This article is for intermediate or entry level frontend developers interested in CSS Grouping selectors. The writer assumes that the reader has basic knowledge of CSS selectors, HTML elements. This article will not cover other type of selectors . At the end of the article, the reader can style nested HTML elements with CSS grouping selectors. The article will utilize a basic HTML layout to demonstrate CSS grouping selectors at work.
HTML Layout.
Types of grouping Selectors
1)Selector list (“,”): Two or more CSS selectors separated by comma(s). From the above HTML, below is an example of selector list.
.header-content, .content-input, .header-people{
background-color: red;
}
The above styles will give the three classes a background color of red.
2) Descendant selectors (" " ): It is an empty space two CSS selectors.
.container p{
color:#FF4820
}
The style above gives all the p element and any element within p such as the span element an orange colour.
3) Child selectors “>”: Greater than sign between two CSS selectors D>E. The style affects all E that are directly within D and not those inside E.
.container >p{
color:#FF4820
}
The style will only affect the p element and not the span element.
4)Sibling selector (~): Given two CSS selectors A~B, the sibling selector select all B that follows A.
H1~p{
font-family:verdana;
font-size:24px;
}
The above will style all p elements that follows h1
5) Adjacent Sibling Selector (+): Given two CSS selectors D+E. The style will affect the first E that follows D.
h1+p{
font-family:verdana;
font-size:24px;
}
The style will affect the first p that follows h1.
Take note that grouping selectors can be nested. For example
.container .header-content >p {
}
It means style a element p that is a child of class header-content, a descendant of class container.
The article listed different CSS grouping selectors with examples.
- Selector List
- Descendant Selector
- Child Selector
- Sibling Selector
- Adjacent selector Also, the articles demonstrated nesting of grouping selectors.
Top comments (0)