Hirenkumar Trivedi's Blog
CSS Selectors

Photo by Jackson Sophat on Unsplash

CSS Selectors

Hirenkumar Trivedi's photo
Hirenkumar Trivedi
·

4 min read

Table of contents

The selectors can be applied in a wide variety of ways. But first, let's understand the various approaches by first defining CSS selectors.

CSS selectors: In short, CSS selectors allow you to choose the HTML element(s) that you want to style. You can target the elements extremely carefully and style them according to your needs.

Types of selectors

  1. Universal selector
  2. Individual selector
  3. Class and Id selector
  4. Chained selector
  5. Combined selector
  6. Inside an element
  7. Direct child
  8. Sibling ~ or +

1. Universal selector:

The universal selector is utilized as indicated by the * mark that is placed immediately before the curly brackets. It specifically addresses each and every HTML element on the page that the browser has rendered.

HTML:

<body>
  <div>Hello World!</div>
  <span>Span is just a span, nothing more</span>
  <p>We all know paragraph</p>
</body>

CSS:

* {
        background-color: #DE4839;
        color: #383CC1;
  }

In the above example universal selection will impact <div>, <span> and <p> tags. They will have the background color - #DE4839 and the text color - #383CC1.

2. Individual selector:

Any HTML element can be specified in order to apply the specific selector. Now it will search the entire DOM tree for that element, and wherever it finds it, it will apply the specified CSS style.

HTML:

<body>
  <span>span-1</span>
  <div>
    <span>span-2</span>
  </div>
</body>

CSS:

span {
        background-color: #50DBB4;
        color: #EDC126;
}

In the above example, you can see that we have two <span> tags. The first one is outside the div and the second one is inside the div. In this case, both the <span> tags will have the same CSS styling that we have written using the individual selector syntax.

So, in the above example the <span> tags will have a background color - #50DBB4 and text color - #EDC126

3. Class and Id selector:

a) Class: For any HTML element, you can design a style for a specific class. The class for styling the element is accessed using the (.) dot.

HTML:

<body>
  <p class="text">Paragraph</p>
</body>

CSS:

.text {
        background-color: #E21717;
        color: #FF6666;
        padding: 3px
}

b) ID: Any HTML element that has an id can have a style created for it. To get the element's id for styling, use the hash or pound symbol (#).

HTML:

<body>
  <p id="p1">Paragraph-1</p>
</body>

CSS:

#p1 {
        background-color: #E21717;
        color: #3DBE29;
        padding: 3px;
        border: 3px solid #DDD101;
}

4. Chained selector

We can target HTML elements that have exactly the same class names defined in them by using chained selectors. Only those components that possess all of the chained class names will be impacted.

HTML:

<ul>
      <li class="bg-black text-white">item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
</ul>

CSS:

li.bg-black.text-white {
     background-color: #000000;
     color: #ffffff;
}

In the example provided, the style will be applied to the <li> tag which has class names bg-black and text-white.

5. Combined selector

We can target multiple elements at once with combined selectors. Adding (,) commas between the elements will help us separate them.

HTML:

<span>Span is just a span, nothing more</span>
<p>We all know paragraph</p>
<ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
</ul>

CSS:

span,
li {
    background-color: #000000;
}

We are aiming for the <span> and <li> elements in the example above. Each and every <span> and <li> element will have the CSS style described in the CSS snippet. While the <p> element stays the same.

6. Inside an element

You can choose to target an element that is deeply nested in the DOM tree.

HTML:

<div>
      <li>awesome</li>
      <ul>
          <li>highlight me</li>
          <li>highlight me</li>
      </ul>
      <li>test</li>
    </div>

CSS:

div ul li {
     background-color: #383CC1;
}

This selection will affect all <li> tags that are present inside <ul> tag which is present inside <div> tag.

7. Direct child

With the help of this selector, we can select a direct child of any element.

HTML:

<div>
      <li>awesome</li>
      <ul>
          <li>highlight me</li>
          <li>highlight me</li>
      </ul>
      <li>test</li>
    </div>

CSS:

div > li {
     background-color: #3DBE29;
}

In the above example, we are selecting the direct child of the <div> tag which is the <li> tag present outside of <ul> tag

8. Sibling ~ or +

Using + We can use + to target that element's immediate or subsequent sibling.

Using ~ by using ~ we can target all of that element's close siblings.

HTML:

<div>
        <section>
            <p>Test 1</p>
            <p class="sibling">Test 2</p>
            <p>Test 3</p>
            <p>Test 4</p>
            <p>Test 5</p>
      </section>
    </div>

CSS:

Using +

.sibling + p {
        background-color: #E03B8B;
}

Using ~

.sibling ~ p {
        background-color: #E03B8B;
}

In the CSS using +, the style will be applied to only <p>Test 3</p> but in CSS using ~ style will be applied to all the siblings i.e. <p>Test 3</p>, <p>Test 4</p> & <p>Test 5</p>

Thank you for reading, Happy coding :)

HTML5CSS3