Selectors in CSS

CSS Selectors: Here, we are going to learn about the selectors in CSS with its syntax and examples.
Submitted by Anjali Singh, on November 04, 2019

CSS Selectors

In CSS the selectors identify specific HTML elements as targets for CSS styles. These selectors are used to connect HTML elements to their CSS to make them look more elegant.

Syntax:

    Selector-type
    {
    //css code
    }

Basically, the selectors are categorized into the following types,

  1. Universal selector
  2. Tag selector
  3. Grouping selector
  4. Class selector
  5. ID selector
  6. Child selector

1) Universal Selector

The universal selector selects all elements and styles them. The prefix used is "*". All elements defined in the calling HTML file will be selected and styles are applied to them.

Example:

<head>
    <style>
        * {
            background-color: red;
        }
    </style>
</head>
<html>

<body>
    <div>
        <p>Some content</p>
    </div>
</body>

</html>

Output

Selectors in CSS | Example 1

Here, "*" takes all the elements and set their background color to red.

2) Tag Selector

The tag selector selects the elements with specific tags(<div> or <p> etc) to connect it to the CSS for styling.

Syntax:

    tag-name{
        //css styling
    }

Example:

<!DOCTYPE html>

<head>
    <style>
        p {
            Background-color: green;
        }
    </style>
</head>
<html>

<body>
    <div>
        <p>Some content</p>
    </div>
</body>

</html>

Output

Selectors in CSS | Example 2

Here, it takes all the elements of paragraph(<p>) tag and set their background color to green.

3) Grouping Selector

The property grouping selector selects all the HTML elements with the same style definitions. Multiple tags are separated by "," .

Syntax:

    tag-name1,tag-name2{
        //css styling
    }

Example:

<!DOCTYPE html>

<head>
    <style>
        p,
        h1 {
            Background-color: green;
        }
    </style>
</head>
<html>

<body>
    <div>
        <h1>heading</h1>
        <p>Some content</p>
    </div>
</body>

</html>

Output

Selectors in CSS | Example 3

Here, it takes all the elements of paragraph(<p>) and heading1(<h1>) tag and set their background color to green.

4) Class Selector

The class selector selects the elements with specific class and style them. The prefix used is "."

Syntax:

    .class-name
    {
        //css styling
    }

Example:

<!DOCTYPE html>

<head>
    <style>
        .head1 {
            font-size: 25px;
            background-color: #efefef;
            color: #f40;
        }
    </style>
</head>
<html>

<body>
    <h1 class="head1">heading</h1>
</body>

</html>

Output

Selectors in CSS | Example 4

Here, select and style all elements with class "head1".

5) Id Selector

The ID selector selects the elements with specific ID and style them. Here, the prefix used is "#".

    #id{
        //css styling
    }

Example:

<!DOCTYPE html>

<head>
    <style>
        #team1 {
            font-size: 25px;
            background-color: #f1f1f1;
            color: #f40;
        }
        
        #team2 {
            font-size: 30px;
            background-color: #f40;
            color: #f1f1f1;
        }
    </style>
</head>
<html>

<body>
    <div id="team1">
        <ol>
            <li>Aman</li>
            <li>Bharti</li>
            <li>Uma</li>
        </ol>
    </div>
    <div id="team2">
        <ol>
            <li>Manju</li>
            <li>Shivang</li>
            <li>Amit</li>
        </ol>
    </div>
</body>

</html>

Output

Selectors in CSS | Example 5

Here, the "team1" and "team2" are the ID selectors that selects the elements with id "team1" and "team2", and set the appropriate CSS styles.

6) Child Selector

The child selector is used to select elements with a specific parent.

Syntax:

    element>element
    {
        //css styling
    }

Example:

<!DOCTYPE html>

<head>
    <style>
        div > h2 {
            background: #f40;
            padding: 2px;
            font-size: 200%;
        }
    </style>
</head>
<html>

<body>
    <div>
        <h2>heading2</h2>
    </div>
</body>

</html>

Output

Selectors in CSS | Example 6

Here, the element on the left side of > is the parent and the element on the right is the children element.

CSS Tutorial & Examples »




Comments and Discussions!

Load comments ↻





Copyright © 2024 www.includehelp.com. All rights reserved.