CSS Selectors with Examples

To style an element or some part of an element, we need to select the element first. And therefore, this article is all about selecting elements in CSS.

Selectors in CSS are used to select HTML elements to style them.

List of Basic and Most Used Selectors in CSS

Selecting HTML elements based on their names
Selecting HTML elements based on their class names
Selecting HTML elements based on their IDs
Selecting all HTML elements using * (the universal selector)

Let's first briefly describe these basic and most used selectors in CSS, with the help of examples. Then will explain advance selectors of CSS.

CSS Select an Element Based on its Name

CSS Code

<!DOCTYPE html>
<html>
<head>
    <style>
        p {color:rebeccapurple; text-align: center;}
        span {background-color: rebeccapurple; color: seashell;}
        i {font-weight: bold;}
    </style>
</head>
<body>

    <p>This is <span>Para</span> one.</p>
    <p>This is <i>Para</i> two.</p>
    
</body>
</html>

Output

This is Para one.

This is Para two.

CSS Select an Element Based on its Class Name

CSS Code

<!DOCTYPE html>
<html>
<head>
    <style>
        .red {color: red;}
    </style>
</head>
<body>

    <p class="red">This is Para one.</p>
    <p>This is <span class="red">Para</span> two.</p>
    
</body>
</html>

Output

This is Para one.

This is Para two.

To style a specific element with specific class, specify that particular element before the class name. The syntax to style specific element with specific class, is:

element.className{declaration}

For example:

p.red {color: red;}

Only the paragraph with red class, will get effected. We can also assign multiple class to an HTML element. For example:

<p class="red center">This is Para one.</p>

Here, this P tag contains two classes namely red and center.

Note - The . (dot) is used for class selector in CSS.

CSS Select an Element Based on its ID

CSS Code

<!DOCTYPE html>
<html>
<head>
    <style>
        #a {text-align: center; margin-bottom: 40px; color: blue;}
    </style>
</head>
<body>

    <p id="a">This is Para one.</p>
    <p>This is Para two.</p>
    
</body>
</html>

Output

This is Para one.

This is Para two.

Note - The # (hash) is used for ID selector in CSS.

CSS Select All Elements at Once - The * Selector

CSS Code

<!DOCTYPE html>
<html>
<head>
    <style>
        * {text-align: center; color: purple;}
    </style>
</head>
<body>

    <h2>The Universal Selector (*)</h2>
    <p>This is Para one.</p>
    <p id="paraTwo">This is Para two.</p>
    
</body>
</html>

Output

The Universal Selector (*)

This is Para one.

This is Para two.

CSS Select and Style Multiple Elements at Once

CSS Code

<!DOCTYPE html>
<html>
<head>
    <style>
        h2, p {text-align: center; color: royalblue;}
    </style>
</head>
<body>

    <h2>CSS Multiple Elements Selector Example</h2>
    <p>This is Para one.</p>
    <h3>This is inside H3 tag</h3>
    
</body>
</html>

Output

CSS Multiple Elements Selector Example

This is Para one.

This is inside H3 tag

List of Advance Selectors in CSS

Since, these selectors contains multiple ways to select elements, therefore I've divided into separate articles.

CSS Online Test

« Previous Tutorial Next Tutorial »