1The descendant combinator — typically represented by a single space ( )
2character — combines two selectors such that elements matched by the second
3selector are selected if they have an ancestor
4(parent, parent's parent, parent's parent's parent, etc)
5element matching the first selector.
6
7example:
8 h1 ul {
9 border : 1px solid #f1f1f1;
10}
11Explanation: This above CSS code snippet will select all the 'ul' (unordered list)
12 tags which are preceeded by an 'h1' (header tag).
13/*the best way to understand is to practice by implemetation.
14Create a html file with lots of h1 and ul elements to understand by
15implementing CSS on them*/
1/*Descendant Selectors*/
2/*Creates matching patterns based on the relationship between nested elements*/
3
4<section>
5 <a href="#"></a> -->/*to select "a" tag in CSS use */--> section a{...}
6</section>
7
8/*Examples:*/
9.class-selector-name
10.nested-class-name {...}
11
12---tag with class="class-selector-name"
13 |
14 |--tag with class="nested-class-name" <-- Selected
15
16main h1 {...}
17
18---main
19 |--h1 <-- Selected
20---h1 <-- Not selected!!!
21