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;}
Not Red
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=""] {font-weight: bold;}
would match only those <a> tags that have an href value set to the topic's support site URL.
Search WWH ::

Custom Search