HTML and CSS Reference
In-Depth Information
General Sibling Selectors
A CSS3 selector (
~
) can be used to select elements that happen to have a particular element
preceding them as a sibling directly. For example,
h1 ~ p {color: red;}
would mean that
<p>
tags that eventually follow at the same tag nesting level as
<h1>
tags
would be red:
<p>
I am not red.
</p>
<h1>
Heading 1
</h1>
<p>
This is red.
<
/
p>
<h2>
Heading 2
</h2>
<p>
I am red too.
</p>
<div><p>
Not me as I am not a sibling given that I am one level down.
</p></div>
h1 ~ p {color: red;}
body
p
Not Red
h1
p
Red
h2
p
Red
div
p
Not Red
N
OTE
Advanced contextual selectors like direct child selectors are not supported under some
relatively recent Internet Explorer versions, notably IE 6 and earlier.
A summary of all the core element selectors discussed so far can be found in Table 4-6.
Attribute Selectors
Attribute selectors, first introduced in CSS2, allow rules to match elements with particular
attributes or attribute values. For example, a rule such as
a[href] {background-color: yellow;}
would match all
<a>
tags that simply have the
href
attribute, whereas a rule such as
a[href="http://www.htmlref.com"] {font-weight: bold;}
would match only those
<a>
tags that have an
href
value set to the topic's support site URL.
