HTML and CSS Reference
In-Depth Information
A child combinator is a greater-than character (
>
) placed between two selectors. With the selector you just added, the
<h3>
title element that is a child of the
<aside>
element will be made bold.
Child combinators are unsupported in Internet Explorer 6.
Sibling Combinators
CSS Level 3 introduces sibling combinators, allowing you to create selectors for elements when at the same level.
Adjacent Sibling Combinator
You can use the adjacent sibling combinator to style elements that share the same parent, providing one element im-
mediately follows the other:
1.
In styles.css, add the following:
p + .offer {
color: red;
}
2.
Save styles.css.
An adjacent sibling combinator is a plus symbol (
+
) placed between two selectors. With the selector you just added,
the element
<p class=”offer”>
is made red,
only
when it follows another
<p>
element.
Adjacent sibling combinators are unsupported in Internet Explorer 6.
General Sibling Combinator
Like the adjacent sibling combinator, elements making use of the general sibling combinator share the same parent;
however, because their relationship is “general,” one element doesn't have to immediately follow the other to be se-
lected:
p ~ h2 {
color: black;
}
Where an adjacent sibling selector selects only the element that immediately succeeds it, the general sibling selector
in this example selects all
<h2>
elements that succeed a
<p>
element.
A general sibling combinator is a tilde symbol (
~
) placed between two selectors.
General sibling combinators are unsupported in Internet Explorer 6.
Attribute Selectors
Attribute selectors allow you to select elements by referring to their attributes, such as ID, class, title, src, and so on.
“But wait,” you cry! “Didn't you just cover IDs and classes?” Yes! Technically, the ID and class selectors you just
learned about are their own unique types of selectors. You can also select IDs and classes using attribute selectors.
When you made the background color of the main section white, you used this rule set:
#main {
background-color: white;
}
