Css Selectors

Overview

In this lesson we will do a quick review of CSS selectors.

What's Covered in This Lesson

  1. Review Type Selector
  2. Review Class Selector
  3. Review ID Selector
  4. Review Compound Selector
  5. Review Descendent Selector
  6. Review Child
  7. Review Adjacent Sibling
  8. Review General Sibling
  9. Review Universal
  10. Review Attribute Selectors
  11. Review Pseudo Selectors

Selectors

CSS gives us a variety of ways to select different elements and style them.

Type

p {
  color: red;
}

This selects an element of the specified type based directly on providing the element name.

<p>Lorem ipsum</p>

Class

.thick {
  font-weight: bold;
}

This selects an element with matching class attribute name. This selector is indicated by the preceeding . dot (period).

<span class="thick">I'm thick</span>

You can apply a class name to as many elements as you like across the same page and across any pages in your website. This is a good selector for sprinkling the same style to many different elements.

You can also apply more than one class to the same element. For example, let's apply two classes to the same paragraph.

.thick {
    font-weight: bold;
}

.alert {
    color: red;
}

To apply the two classes we simply use a space to separate their names.

<p class="thick alert">Warning...</p>

ID

#box {
  background: blue;
}

This selects an element with matching id attribute name. This selector is indicated by the preceeding # hashtag symbol.

<div id="box">I'm a box</div>

A single Id name should only be applied to one element per page.

Compound

h1, h2, #box {
  font-family: Arial, Helvetica, sans-serif;
}

This selects all matched elements in the compound set. This selector is indicated by a , comma separating the selectors of the set. Each element within the comma separated list will be styled the same.

<h1>Heading</h1>
<h2>Subheading</h2>
<div id="box">I'm a box</div>

Descendent

#nav li {
  background: blue;
}

This selects an element that is nested inside of the specified parent element. This selector is indicated by a keyboard space between the parent and the child to be selected.

<ul id="nav">
  <li>child</li>
</ul>

Child

#list > li {
  border: 1px solid black;
}

This selects an element that is nested only one level deep inside of the specified parent element. It only selects direct children and not grandchildren. This selector is indicated by a > (greater than) symbol between the parent and the child to be selected.

<ul id="list">
  <li>child</li>
  <li>child
    <ul>
      <li>grand child</li>
    </ul>
  </li>
</ul>

Adjacent Sibling

h3 + p {
  color: green;
}

This selects an element that appears directly after the former element assuming they are both siblings (in the same level of nesting, in the same parent). This selector is indicated by a + plus symbol between the former sibling and the selected element that follows.

<h3>Heading</h3>
<p>I'm a paragraph that is selected because I come directly after an h3.</p>
<p>I'm not selected.</p>

General Sibling

h2 ~ p {
  color: black;
}

This selects all elements that appear directly after the former element. This selector is indicated by a ~ tilde symbol between the former sibling and the selected element that follows it.

<h2>Sub heading</h2>
<p>I'm selected because I appear after an h2.</p>
<p>I'm also selected for the same reason, in fact any paragraphs on the rest of the page after the h2 will be selected.</p>

Universal

* {
  color: orange;
}

This selects elements where the properties specified have not been styled by any other selectors. This selector is indicated by an * asterisk symbol.

<h5>Sub heading</h5>

We haven't yet specified a color style for h5 anywhere else yet on our CSS so they will get the color orange now being covered under the universal selector.

Attribute

img[alt="Cat"] {
  border: 1px solid black;
}

This selects an element with a matching attribute value. This selector is indicated by [] square brackets, followed by the attribute property and value of the selected element within the brackets.

<img src="myimage.jpg" alt="Cat">
Other Attribute Selectors Include:

a[href^="http"] The ^= caret symbol and equals sign select elements that start with the matching value, such as <a href="http://google.com">google</a>.

p[class$="dog"] The $= dollar and equals signs select elements that end with the matching value, such as <p class="bigbdog">...</a>.

img[alt*="love"] The *= asterisk and equals sign select elements that have the matched characters appearing anywhere within the value, such as <img src="myimage.jpg" alt="I love you.">.

p[class~="monkey"] The ~= tilde symbol and equals sign select elements that contain the term within a space separated value, such as <p class="zoo monkey details">...</p>.

p[class|="birds"] The |= pipe symbol selects elements that contain the term within a dash separated value, such as <p class="new-birds-today">...</p>.

Pseudo Class

a:link {
  text-decoration: none;
}

This selects an element based on the unique relationship or state described in the selector. This selector is indicated by the : colon symbol, followed by the pseudo class that describes the element's state or positioning amongst other elements.

<a href="about.html">About</a>
Other Pseudo Class Selectors Include:

a:link selects links in their default state before the visitor has interacted with them.

a:visited selects links after the user has already clicked on them and is visiting that page again.

a:hover selects links when the user is hovering their mouse over the link.

a:active selects links for only the moment when the mouse button is pressed when clicking on the link.

p:first-child selects elements that are the first child when appearing inside a common parent. Such as <div><p>I'm selected</p><p>I'm not</p><p>Neither am I</p></div>

p:last-child selects elements that are the last child when appearing inside a common parent. Such as <div><p>I'm not selected</p><p>Neither am I</p><p>I'm selected</p></div>

These are just a few pseudo selectors, but there are many additional ones you can explore in the resource links provided at the bottom of this lesson.

Summary

  • CSS provides a wide range of selectors to select different elements. Get to know them all.

Resources

View CSS Selectors on Learn.co and start learning to code for free.

Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us