What is Selector?

Selectors are used to target or select the HTML elements which you want to style on your web page.

Types of Selectors :

There are many selectors out there, let's take a look one by one

Universal Selector :

Universal selectors are used to target every element that is in the body part of the HTML documents. The universal selector is denoted by an asterisk (). *Syntax :

* {
    properties: values
}

Example :

CSS :

* {
    background-color: #1f1f1f;
    color: white;
}

Result:

Individual or Element Selector :

Individual selectors are used to targeting/select particular HTML elements in your document like p, a, span, etc.

Syntax :

Tag_Name {
    properties: values
}

Example :

HTML :

<span>This is paragraph</span>

CSS:

span {
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
}

Result:

Class Selector :

The class selector starts with (.) and selects every element that contains that particular class. You can use the same class in multiple elements and vice versa.

Syntax :

.class_name {
    properties: values
}

Example :

HTML :

<p class="para">This is paragraph</p>

CSS :

.para {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-decoration: underline;
}

Result :

Id Selector :

The id selector starts with (#) and selects that element that matches the same id. Unlike classes, you can't use the same id in multiple elements.

Syntax :

#Id_Name {
    properties: values;
}

Example :

HTML :

 <p id="para">This is paragraph</p>

CSS :

#para {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-decoration: underline;
}

Result :

Combination Selectors :

Combination selectors, or combinators, are combinations of multiple selectors. They combine in such a way that they are used to select specific elements in the document.

Descendant combinator :

The descendant selector is used when you want to target your element more specifically. The descendant selector is denoted by putting " "(space) between elements. The way descendant selectors work is that they select all the element2 that are descendants of element1.

Syntax :

element1 element2 {
            properties: values
        }

Example :

HTML :

<div>
        <p>This is paragraph</p>
</div>

CSS :

div p {
    color: white;
    text-decoration: underline;
}

Result :

Child Combinator :

The way the child selector works is that it selects all the element2 that are direct children of element1. It is denoted by '>'.

Syntax :

element1 > element2 {
    properties: values
}

Example :

HTML :

<div>
        <p>This is paragraph</p>
</div>

CSS :

div > p {
    color: white;
    text-decoration: underline;
}

Result :

General Sibling Combinator :

The way general sibling combinators work is that they select all the element1 that are siblings of element2(not necessarily immediately). It is denoted by '~'.

Syntax :

element1 ~ element2 {
    properties: values
}

Example :

HTML :

<div>
        <span>This is span</span>
        <p>This is paragraph</p>
</div>

CSS :

span ~ p {
    color: white;
    text-decoration: underline;
}

Result :

Adjacent Sibling Combinator :

The way adjacent sibling combinators work is that they select element2 which is immediately after element1. It is denoted by '+'.

Syntax :

element1 + element2 {
    properties: values
}

Example :

HTML :

<div>
        <span>This is span</span>
        <p>This is paragraph</p> <!--Only this paragraph will get the style-->
        <h4>This is heading</h4>
        <p>This is another paragraph</p>
</div>

CSS :

span + p {
    color: white;
    text-decoration: underline;
}

Result :