CSS Selectors

❮ Prev Next ❯

A selector allows us to associate one or more declarations to one or more elements on the page.

Basic selectors

Suppose we have a pelement on the page, and we want to display the words into it using the yellow color. 

p{
    color :yellow;
  }

We can target that element using this selector p,which targets all the element using the ptag in the page. A simple CSS rule to achieve what we want is:

Every HTML tag has a corresponding selector, for example: div, span, img.

If a selector matches multiple elements, all the elements in the page will be affected by the change.

HTML elements have 2 attributes which are very commonly used within CSS to associate styling to a specific element on the page: class and id.

There is one big difference between those two: inside an HTML document you can repeat the same class value across multiple elements, but you can only use an id once. As a corollary, using classes you can select an element with 2 or more specific class names, something not possible using ids.

Classes are identified using the . symbol, while ids using the # symbol.

Example using a class: 

<p class="cat-name">Roger</p>

.cat-name{
    color :yellow;
  }

Example using an id: 

<p id="cat-name">Roger</p>

#cat-name{
    color :yellow;
  }

Combining selectors

So far we've seen how to target an element, a class or an id. Let's introduce more powerful selectors.

Targeting an element with a class or id

You can target a specific element that has a class, or id, attached.

Example using a class: 

<p class="cat-name">Roger</p>

p.cat-name{
    color :yellow;
  }

Example using an id: 

<p id="cat-name">Roger</p>

p#cat-name{
    color :yellow;
  }

Why would you want to do that, if the class or id already provides a way to target that element? You might have to do that to have more specificity. We'll see what that means later.

Targeting multiple classes

You can target an element with a specific class using .class-name , as you saw previously. You can target an element with 2 (or more) classes by combining the class names separated with a dot, without spaces.

Example: 

<p class="cat-name roger">Roger</p>

.cat-name.roger{
    color :yellow;
  }

Combining classes and ids

In the same way, you can combine a class and an id.

Example: 

<p class="cat-name"  id="roger">Roger</p>

.cat-name#roger{
    color :yellow;
  }

Grouping selectors

In the same way, you can combine a class and an id.

Example: 


<p>My cat name is:</p>
<p class=""cat-name">Roger</p>

p, .cat-name{
    color :yellow;
  }

Follow the document tree with selectors

We've seen how to target an element in the page by using a tag name, a class or an id.

You can create a more specific selector by combining multiple items to follow the document tree structure. For example, if you have a span tag nested inside a p tag, you can target that one without applying the style to a span tag not included in a p tag:

Example: 


<span>Hello!</span>
<p> My cat name is: 
<span class="cat-name"> Roger </span>
</p>


p span{
    color :yellow;
  }

See how we used a space between the two tokens p and span.

This works even if the element on the right is multiple levels deep.

To make the dependency strict on the first level, you can use the > symbol between the two tokens: 

p > span{
    color :yellow;
  }

In this case, if a span is not a first children of the p element, it's not going to have the new color applied.

Direct children will have the style applied: 


<p> 
  <span>This is yellow</span>
  <strong> 
    <span>This is not yellow</span>
  </strong>
</p>

Adjacent sibling selectors let us style an element only if preceded by a specific element. We do so using the + operator:

Example: 

p + span{
    color :yellow;
  }

This will assign the color yellow to all span elements preceded by a p element: 

<p>This is a paragraph</p>
<p>This is a yellow span</p>

Example 

<!DOCTYPE HTML>
<html>
    <head>
      <style>
        P > span {
          color :yellow
          }
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <p> 
        <span>This is yellow</span>
        <strong> 
          <span>This is not yellow</span>
        </strong>
      </p>
    </body>
  </html>

We have a lot more selectors we can use:

  • Attribute selectors
  • Pseudo class selectors
  • Pseudo element selectors

We'll find all about them in the next sections.

❮ Prev Next ❯