HTML and CSS Reference
In-Depth Information
This selector selects elements whose
type
attribute isn't
submit
. The background color of these
elements is then set to
#808080
.
The general sibling combinator consists of two simple selectors separated by a tilde (
~
) character. It
selects elements of the second type that are preceded by an element of the first type. Both elements must
have the same parent, but the second element doesn't have to be immediately preceded by the first
element. For example, let's say you have a
<div>
element containing other elements such as
<ul>
,
<input>
,
and
<span>
, as shown here:
<div>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
<ul>
<li>Three</li>
<li>Four</li>
</ul>
You wish to apply styling to
<ul>
sibling elements that appear after the
<div>
element and occurring
anywhere within the
<div>
. You can do so using the following CSS rule:
div ~ ul {
background-color:#ff6a00;
}
Figure 13-6 shows the final outcome.
Figure 13-6.
General sibling combinator
As you can see, the first
<ul>
is a child of the
<div>
and not a sibling, and hence the specified styling isn't
applied it to it. The second
<ul>
is a sibling of the
<div>
element, so the general sibling combinator selects it
and applies the specified background color.
Browser-Specific Property Prefixes
As mentioned earlier, the CSS3 specifications are still evolving, and different browser vendors support
them in varying degrees. Currently, the CSS3-specific features implemented by browsers fall into two
