Types Of selectors

1) Class selector (.)

Class selector finds elements with specific class across the HTML page and applies the CSS to the elements that have the respective class value set.

The class selector uses the HTML class attribute, and is defined with a dot i.e. “.”

In the example below, all HTML elements with class=”center” will be center-aligned:

Syntax – .className { Property: Value }

The CSS style will then be applied to all tags with

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Class Selector</title>
</head>
<style type="text/css">
    .warningText {
        color: red;
    }

    p.warningText {
        color: blue;
    }
</style>
<body>
    <h2 class="warningText">This heading is in red.</h2>
    <p class="warningText">
        This text is blue.
    </p>
    <p>
        This is a paragraph, <span class="warningText"> and this text is a red</span>
    </p>
</body>
</html>

2) ID selector (#)

The id selector finds elements with the specified id and applies the CSS.

The id selector is used to specify a style for a single, unique element.

Example – #paragaragh{ Property: Value }

The style rule mentioned then will be applied to the any HTML element with id value ” paragaragh”:

If multiple Ids are to be associated with a single style separate it will comma i.e. – #paragaragh, #selectId, #checkid (Refer Grouping Selector)

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>ID Selector</title>
        <style type="text/css">
                                         #paragraph {
                                                       background-color: #CCCC99;
                                         }
                                         h4#paragraph {
                                                       background-color: #FFCC99;
                                         }
        </style>
    </head>
    <body>
        <p>
            Paragraph - 1
        </p>
        <p id="paragraph" >
            Paragraph - 2
        </p>
        <h4 id="paragraph">
            Header - 4
        </h4>
    </body>
</html>

3) Element Selector

The element selector selects elements based on the element name.

When we want to apply CSS for an element across all its usage then we go for element selector.

Syntax – html_tag { Property: Value }

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Elements Selector</title>
                     <style type="text/css">
                     p {
                     text-align:center;
                     color:red;
                     background-color :black;
                     }
                     </style>
    </head>
    <body>
              <p id="para1">Hello World!</p>
              <p>This paragraph is also affected by the style.</p>
              <pre>Nothing will be affected in pre since no CSS is associated</pre>
              <h6>Nothing will be affected in h6 since no CSS is associated</h6>
    </body>
</html>

4) Grouping selector (,)

A grouping selector is used to group a no selector into a single selector.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>CSSSelectors-4GroupingSelector</title>
        <style type="text/css">
                                         H1, H2, H3, H4, H5, H6 , p , #paraID , .paraClass{
                                                       color: #0000FF;
                                                       font-family: sans-serif;
                                         }
        </style>
    </head>

    <body>
        <p>Business News</p>
        <h4>Political News</h4>
        <h3>Technology News</h3>
        <div id="paraID">Economy News</div>
        <div class="paraClass">International News</div>
    </body>
</html>

5) Universal selector (*)

A universal selector is used to select all the elements in an HTML document.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Universal Selector</title>
        <style type="text/css">
                                         * {
                                                       font-family: Verdana, Arial, sans-serif;
                                                       font-size: 22px;
                                                       }
        </style>
    </head>

    <body>
        Available Courses : <br>
        1) HTML <br>
        2) JavaScript <br>
        3) CSS <br>
    </body>
</html>

6) Child Selector (>)

Child selector selects all elements that are the immediate children of a specified element.

Example:

div > p {

    background-color: red;

    color: yellow;

}

Above selects all p elements that are immediate children of the div tag.

<!DOCTYPE html>
<html>
<head>
    <title>Child Selector</title>
    <style>
        div > p {
            background-color: red;
            color: yellow;
        }
    </style>
</head>
<body>
    <p>Paragraph 1</p>
    <div>
        <code>Some code.</code>
        <p>Paragraph 2 - Inside div tag</p>
        <a><p>Paragraph 3 - Inside div and a tag</p></a>
    </div>
    <p>Paragraph 4</p>
</body>
</html>

7) Descendant Selector (space)

The descendant selector selects all elements that are descendants (child or sub child) of a specified element.

Example:

div  p {

    font-color: red;

}

The above code selects all p elements that are descendants of the div tag.

<!DOCTYPE html>
<html>
<head>
    <title>Descendant Selector</title>
    <style>
        div  p {
            background-color: red;
            color: yellow;
        }
    </style>
</head>
<body>
    <p>Paragraph 1</p>
    <div>
        <code>Some code.</code>
        <p>Paragraph 2 - Inside div tag</p>
        <a><p>Paragraph 3 - Inside div and a tag</p></a>
    </div>
    <p>Paragraph 4</p>
</body>
</html>

8) Adjacent Sibling Selector (+)

Adjacent Sibling Selector selects all elements that is immediate adjacent siblings of a specified element.

Example:

div + p {

    font-color: red;

}

The following example selects the <p> elements that are placed immediately after <div> elements:

Note – If there is any other element between div and p tag then no p tags will be selected.

<!DOCTYPE html>
<html>
<head>
    <title>Adjacent Sibling Selector</title>
    <style>
        div + p {
            background-color: red;
            color: yellow;
        }
    </style>
</head>
<body>
    <p>Paragraph 1</p>
    <div>
        <code>Some code.</code>
        <p>Paragraph 2 - Inside div tag</p>
        <a><p>Paragraph 3 - Inside div and a tag</p></a>
    </div>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
</body>
</html>

9) General Sibling Selector (~)
General Sibling Selector selects all tag elements that are siblings (that appears) of a specified element.

Example:
div ~ p {
    font-color: red;
}
Above code selects all p tag that appears below div tag.

Note In the below case – Only p with id 1 and 2 qualify, p tag with id 3 will not qualify its not immediate sibling.

<div></div>
<p id=’1’></p>
<p id=’2’></p>
<a><p id=’3’></p></a>

<!DOCTYPE html>
<html>
<head>
    <title>General Sibling Selector</title>
    <style>
        div ~ p {
            background-color: red;
            color: yellow;
        }
    </style>
</head>
<body>
    <p>Paragraph 1</p>
    <div>
        <code>Some code.</code>
        <p>Paragraph 2 - Inside div tag</p>
        <a><p>Paragraph 3 - Inside div and a tag</p></a>
    </div>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
</body>
</html>

Thanks for reading our blog if you have any questions regarding this, Then Please leave your query in a comment box.