css descendant selector code example
Example 1: descendent selector in css
The descendant combinator — typically represented by a single space ( )
character — combines two selectors such that elements matched by the second
selector are selected if they have an ancestor
(parent, parent's parent, parent's parent's parent, etc)
element matching the first selector.
example:
h1 ul {
border : 1px solid #f1f1f1;
}
Explanation: This above CSS code snippet will select all the 'ul' (unordered list)
tags which are preceeded by an 'h1' (header tag).
Example 2: css select descendant with class
Select an element with the ID "id" and the class "class":
#id.class {
}
example:
<div>
<strong id="id" class="class">
Foobar
</strong>
<strong class="class">
Foobar
</strong>
</div>
=> Will select the first <strong> element
Select all elements with the class "class",
which are decendents of a element with an ID of "id":
#id .class {
}
example:
<div id="id">
<strong class="class">Foobar</strong>
</div>
=> Will select the <strong> element
Example 3: css selector for sibling element
img + p {
font-weight: bold;
}
Example 4: CSS descendant selectors
<section>
<a href="#"></a> -->--> section a{...}
</section>
.class-selector-name
.nested-class-name {...}
---tag with class="class-selector-name"
|
|--tag with class="nested-class-name" <-- Selected
main h1 {...}
---main
|--h1 <-- Selected
---h1 <-- Not selected!!!