Universal, Child, and Adjacent Selectors

Universal selectors

Using an asterisk (“ * ”), you can target everything under the sun. You can use it by itself to set global styles for a page, or as a descendant of a selector to set styles of everything within something.

The following, for example, will set the margin and padding on everything in a page to zero and everything within an element with the ID “contact” to be displayed as a block:

* {
    margin: 0;
    padding: 0;
}

#contact * {
    display: block;
}

Child selectors

A greater-than symbol (“>”) can be used to specify something that is a child of something else, that is, something immediately nested within something.

So, with this HTML…

<ul id="genus_examples">
    <li>Cats
        <ul>
            <li>Panthera</li>
            <li>Felis</li>
            <li>Neofelis</li>
        </ul>
    </li>
    <li>Apes
        <ul>
            <li>Pongo</li>
            <li>Pan</li>
            <li>Homo</li>
        </ul>
    </li>
</ul>

…and the following CSS…

#genus_examples > li { border: 1px solid red }

…a red border would be drawn around “Cats” and “Apes” only, rather than around every single list item (which would be the case with #genus_examples li { border: 1px solid red }). This is because the likes of “Panthera” and “Felis” are grandchildren of “genus_examples”, not children.

Adjacent selectors

A plus sign (“+”) is used to target an adjacent sibling of an element, essentially, something immediately following something.

With the following HTML:

<h1>Clouded leopards</h1>
<p>Clouded leopards are cats that belong to the genus Neofelis.</p>
<p>There are two extant species: Neofelis nebulosa and Neofelis diardi.</p>

…and CSS…

h1 + p { font-weight: bold }

Only the first paragraph, that following the heading, will be made bold.