CSS selector

Learn all the most important information about CSS selectors

Selectors allow us to associate one or more declarations with one or more elements on the page.

Basic selector

Suppose we have apElements on the page, we want to use yellow to display words in them.

We canthe goalThe element using the selectorp, It uses to locate all elementspMark in the page. The simple CSS rules to achieve what we want are:

p {
  color: yellow;
}

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

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

HTML elements have 2 attributes, which are very commonly used in CSS to associate styles with specific elements on the page:classwithid.

There is a big difference between the two: in the HTML document, you can repeat the same contentclassValue across multiple elements, but you can only useidonce. Therefore, the use of classes can select elements with 2 or more specific class names, while the use of id cannot be achieved.

use.Symbol, while ID uses#Symbolic.

Examples of using classes:

<p class="dog-name">
  Roger
</p>
.dog-name {
  color: yellow;
}

Example of using ID:

<p id="dog-name">
  Roger
</p>
#dog-name {
  color: yellow;
}

Combination selector

So far, we have understood how to locate elements, classes or IDs. Let us introduce more powerful selectors.

Use category or ID to locate elements

You can locate a specific element with a class or ID attached.

Examples of using classes:

<p class="dog-name">
  Roger
</p>
p.dog-name {
  color: yellow;
}

Example of using ID:

<p id="dog-name">
  Roger
</p>
p#dog-name {
  color: yellow;
}

If the class or id already provides a method for the element, then why do you want to do this? You may need to do this to have moreSpecificity. We will understand what this means later.

For multiple categories

You can use to specify specific categories of elements.class-name, As you saw earlier. By combining class names separated by dots (without spaces), elements can be positioned as 2 (or more) classes.

example:

<p class="dog-name roger">
  Roger
</p>
.dog-name.roger {
  color: yellow;
}

Combine class and ID

Similarly, you can combine a class and an id.

example:

<p class="dog-name" id="roger">
  Roger
</p>
.dog-name#roger {
  color: yellow;
}

Group selector

You can combine selectors to apply the same declaration to multiple selectors. To do this, separate them with commas.

example:

<p>
  My dog name is:
</p>
<span class="dog-name">
  Roger
</span>
p, .dog-name {
  color: yellow;
}

You can add spaces to these statements to make them clearer:

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

Use the selector to follow the document tree

We have seen how to locate elements on the page by using tag names, classes or IDs.

You can create more specific selectors by combining multiple items to follow the document tree structure. For example, if you have aspanThe tags are nested inpLabel, you can target the ad object without applying the style tospanLabel not included inplabel:

<span>
  Hello!
</span>
<p>
  My dog name is:
  <span class="dog-name">
    Roger
  </span>
</p>
p span {
  color: yellow;
}

See how we use a space between two tagspwithspan.

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

To strictly restrict dependencies on the first layer, you can use>Symbol between two marks:

p > span {
  color: yellow;
}

In this case, ifspanNot the first childpElement, the new color will not be applied.

Direct children will apply the following styles:

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

The adjacent sibling selector allows us to style the element only if there is a specific element in front of the element. We use+operator:

example:

p + span {
  color: yellow;
}

This will assign yellow to all span elements, followed by apelement:

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

We can use more selectors:

  • Attribute selector
  • Pseudo-class selector
  • Pseudo element selector

More information about future positions.

Download mine for freeCSS Manual


More CSS tutorials: