Advanced CSS Selectors

There are so many ways to target elements using CSS that there's almost nothing you can't grab and add styling to. We've already talked about some of the basic ways like element types and classes, so here are some of the more advanced selectors we can use.

Note: This is an incomplete listing. For a full list of advanced selectors, refer to the links in resources below.

Descendent

Elements nested inside one another. In this example, only the <a> tags inside of a <nav>

CSS:

nav a {
    color: CornflowerBlue;
}

HTML:

<nav>
    <a>This link</a> will get styling
    <ul>
        <li>So will <a>this one</a></li>
        <li>and <a>this one</a> nested in here</li>
    </ul>
</nav>

Child

The difference between descendent and child is a bit confusing. Child selectors only apply to matching elements directly inside the parent, and not anywhere further down.

CSS:

nav > a {
    color: CornflowerBlue;
}

HTML:

<nav>
    <a>This link</a> will get styling
    <ul>
        <li>but not <a>this one</a></li>
        <li>or <a>this one</a></li>
    </ul>
</nav>

Adjacent Sibling

Elements that appear next to each other on the same level. For example, you might want to apply a different margin to the paragraphs right after a heading.

CSS:

h2 + p {
    margin-top: 2em;
}

HTML:

<h2>Some Heading<h2>
<p>This paragraph gets styling</p>
<p>but not this one</p>
<p>or this one...</p>

General Sibling

Elements that appear anywhere after a given element on the same level.

CSS:

h2 ~ p {
    margin-top: 2em;
}

HTML:

<article>
    <h2>Some Heading<h2>
    <p>This paragraph gets styling</p>
    <div>Unrelated content</div>
    <p>This paragraph gets styling too</p>
</article>
<p>But not this one, on a different level</p>

Attribute

You can target elements based on whether they have a certain attribute. Not too common, but handy.

CSS:

img[title] {
    border-color: red; /* images with a title attribute */
}
img[title="geckos"] {
    border-color: red; /* more specifically, images with the title "geckos" */
}

HTML:

<img title="geckos" src="img/team-gecko.jpg" alt="">

Universal

Applies to all elements regardless of their type. This selector is useful when combined with other selectors, but it's rarely written on its own. The * is implied if it's missing.

CSS:

*.accent-color {
    border: 1px solid Plum;
}
/* ^ is the same as... */
.accent-color {
    border: 1px solid Plum;
}

HTML:

<p class="accent-color">This paragraph is accented</p>
...
<div class="accent-color">So is this div</div>
...
<p>And <a class="accent-color">this link</a> too. The type of element doesn't matter.</p>

Pseudo

Pseudo CSS selectors describe elements that cannot be described by the document tree, usually elements that are dynamic in some way. Useful for links and forms.

CSS:

a:hover {
    color: GreenYellow;
}

HTML:

<a href="">Bright on hover!</a>

CSS:

li:nth-child(3n-2) {
    background-color: SeaGreen;
}

HTML:

<ul>
    <li>this item is colored</li>
    <li>not this one</li>
    <li>not this one</li>
    <li>this item is colored</li>
    <li>not this one</li>
</ul>