CSS selectors

CSS selectors define the elements to which you want to apply specific CSS rules.

Universal selectors

The CSS universal selector (*) selects all elements in the document.

Syntax

* { style properties }

Example

css

* {
        background-color: #03203C;
        color: #fff;
}

html

 <p>We all know paragraph</p>
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>

Result

Type selectors

The CSS type selector selects all elements of the given type within a document.

Syntax

element { style properties }

Example

css

p {
        color: #2827cc;
}
ul {
        background-color: #ff6263;
}

html

 <p>We all know paragraph</p>
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>

Result

Class selectors

The CSS class selector matches elements based on the contents of their class attribute.

Syntax

.class_name { style properties }

Example

css

.bg-blue {
        background-color: #2827cc;
        color: #fff;
}

html

 <p class="bg-blue">We all know paragraph</p>

Result

ID selectors

The CSS id selector matches elements based on the values of their id attribute.

Syntax

#id_value { style properties }

Example

css

#unique_text {
        color: #3dbe29;
        background-color: #000;
}

html

<ul>
      <li>item1</li>
      <li>item2</li>
      <li id="unique_text">item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>

Result

Combined selectors

The combined selector (,) selects all the macing elements in groups.

Syntax

element,element { style properties }

Example

css

p,li {
        background-color: #6ee4da;
      }

html

<p> It's awesome</p>
      <ul>
        <li>highlight me</li>
        <li>highlight me</li>
      </ul>

Result

Combinator selectors

• Descendant combinator

The Descendant combinator " " (space) selects nodes that are descendants of the parent element

Syntax

selector1 selector2 {
  /* property declarations */
}

Example

css

ul li {
        background-color: #e83a59;
        color: white;
      }

html

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

Result

• Direct child combinator

The Direct child combinator "> " selects only those elements matched by the second elemnts that are the direct children of elements matched by the parent.

Syntax

selector1 > selector2 { style properties }

Example

css

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

html

<div>
      <p>It's awesome</p>
      <li>awesome</li>
      <ul>
        <li>highlight me</li>
        <li>highlight me</li>
      </ul>
    </div>

Result

• Sibling combinator

1. Next sibling

The next sibling combinator (+) separates two selectors and matches the second element if it immediately follows the first element, and both are sibling.

It only selects immediate next child of same parent.

Syntax

former_element + target_element { style properties }

Example

css

.sibling + p {
        font-weight: 900;
        color: #e07c24;
      }

html

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

Result

1. Subsequent sibling

The subsequent sibling combinator (~) separates two selectors and matches all the sibling elements of same parent after the first

It selects all next same childs of same parent of selected element.

Syntax

former_element ~ target_element { style properties }

Example

css

.sibling ~ p {
        font-weight: 900;
        background-color: #5a20cb;
        color: #fff;
}

html

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

Result

Pseudo selectors

• Pseudo class

A pseudo-class (:) is a keyword added to a selector that specifies a special state of the selected elements.

For Example

css

li:hover {
        background-color: aqua;
      }

html

 <ul>
      <li >item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>

Result

With :hover when we hover our mouse over element it applies the properties.

• Pseudo elements

A pseudo-elements (: :) is a keyword added to a selector that lets us style a specific part of the selected elements.

For Example

css

li::before {
        content: "This is ";
        color: #235583;
      }

html

 <ul>
      <li >item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>

Result

Here using ::before we add some common text before <li> elements without touching HTML.

Attribute selectors

The CSS attribute selector matches elements based on the presence or value of a given attribute.

Example

css

button[type="reset"] {
        background-color: #8a2be2;
        color: #fff;
      }

html

<button type="reset">Reset</button><br /><br />
<button type="submit">Submit</button>

Result