Introduction:

In this article we will learn what is CSS selector or how to use different type of selectors with example.

Description:

CSS selectors are used to select the content which you want to set style. Selectors are the important part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.

There are several different types of selectors in CSS.

  1. CSS Element Selector
  2. CSS Id Selector
  3. CSS Class Selector
  4. CSS Universal Selector
  5. CSS Group Selector

CSS Element Selector

The element selector selects the HTML element by name.

<!DOCTYPE>
<html>
<head>
    <title>Example of CSS Selectors</title>
    <style>
        p {
            text-align: center;
            color: green;
        }
    </style>
</head>
<body>
    <p>This style will be applied on every paragraph.</p>
    <p id="para1">Hello Man!</p>
    <p>Hi Man!</p>  
</body>
</html>

Output:

 This style will be applied on every paragraph.

Hello Man!

Hi Man!


CSS Id Selector


CSS id selector selects the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is chosen to select a single, unique element.

It is written with the hash character (#), followed by the id of the element.

Let’s take an example with the id "Spa1".

 

<!DOCTYPE>
<html>
<head>
    <title>Example of CSS Selectors</title>
    <style>
        #Spa1 {
            text-align: center;
            color: blue;
        }
    </style>
</head>
<body>
    <div style="width:300px;">
        <p>This style will be applied on every paragraph.</p>
        <p id="Spa1">Hello Man!</p>
        <p>Hi Man!</p>
    </div> 
</body>
</html>

Output:

This style will be applied on every paragraph.

   Hello Man!

Hi Man!

 


CSS Class Selector


CSS class selector selects HTML elements with a specific class attribute. It is used with a period character . (full stop symbol) followed by the class name. a class name can be multiple in a page.

Let's take an example with a class "class1".

<!DOCTYPE>
<html>
<head>
    <title>Example of CSS Selectors</title>
    <style>
        .class1 {
            text-align: center;
            color: blue;
        }
    </style>
</head>
<body>
    <div style="width:300px;">
        <p>This style will be applied on every paragraph.</p>
        <p class="class1">Hello Man!</p>
        <p class ="class1">Hi Man!</class>
    </div> 
</body>
</html>

 

Output:

This style will be applied on every paragraph.

Hello Man!

Hi Man!

 

CSS Class Selector for specific element


If you want to specify that only one specific HTML element should be affected then you should use the element name with class selector.

Let's see an example.

<!DOCTYPE>
<html>
<head>
    <title>Example of CSS Selectors</title>
    <style>
        p.class1 {
            text-align: center;
            color: blue;
        }
    </style>
</head>
<body>
    <div style="width:300px;">
        <p>This style will be applied on every paragraph.</p>
        <div class="class1">Hello Man!</div>
        <p class ="class1">Hi Man!</class>
    </div> 
</body>
</html> 


Output:

This style will be applied on every paragraph.

Hello Man!

Hi Man!

 

CSS Universal Selector

The universal selector is used as a wildcard character. It selects all the elements on the pages.

<!DOCTYPE>
<html>
<head>
    <title>Example of CSS Selectors</title>
    <style>
        *{
            text-align: left;
            color: blue;
        }
    </style>
</head>
<body>
    <div style="width:300px;">
        <p>This style will be applied on every paragraph.</p>
        <div >Hello Man!</div>
        <p>Hi Man!</class>
    </div> 
</body>
</html>

Output:

This style will be applied on every paragraph.

Hello Man!

Hi Man!

 

CSS Group Selector

The grouping selector is used to select all the elements with the same style definitions.

Grouping selector is used to minimize the code. Commas are used to separate each selector in grouping.

Let's see the full example of CSS group selector.

<!DOCTYPE>
<html>
<head>
    <title>Example of CSS Selectors</title>
    <style>
        p,div,h1{
            text-align: left;
            color: blue;
        }
    </style>
</head>
<body>
    <div style="width:300px;">
        <p>This style will be applied on every paragraph.</p>
        <div >Hello Man!</div>
        <h1>Hi Man!</h1>
    </div> 
</body>
</html> 

 

Output:

This style will be applied on every paragraph.

Hello Man!

Hi Man!

 

I hope this article will help to you after reading.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

Welcome to SQL Tutorials Point

Don't have an account? Click here to Create a new account, it takes less than a minute.