Selectors in CSS

CSS selectors are patterns used to select the elements you want to style.

They are essential in applying styles to specific HTML elements.


Universal Selector

The universal selector (*) selects all elements on the page

<style>
* {
 margin: 0;
 padding: 0;
 }
</style>
<p>This paragraph will have no margin or padding.</p>


Type Selector

The type selector selects all elements of a given type.

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>This paragraph text is blue.</p>
</body>
</html>


Class Selector

The class selector selects elements with a specific class attribute. It is denoted by a dot (.) followed by the class name.

<!DOCTYPE html>
<html>
<head>
    <style>
        .intro {
            font-size: 20px;
            color: green;
        }
    </style>
</head>
<body>
    <p class="intro">This is an introduction paragraph with specific styles.</p>
</body>
</html>


ID Selector

The ID selector selects an element with a specific ID attribute. It is denoted by a hash (#) followed by the ID name.

<!DOCTYPE html>
<html>
<head>
    <style>
        #main-header {
            text-align: center;
            color: red;
        }
    </style>
</head>
<body>
    <h1 id="main-header">Welcome to My Website</h1>
</body>
</html>


Attribute Selector

The attribute selector selects elements based on the presence or value of an attribute.

<!DOCTYPE html>
<html>
<head>
    <style>
        a[target="_blank"] {
            color: orange;
        }
    </style>
</head>
<body>
    <a href="https://example.com" target="_blank">Visit Example</a>
</body>
</html>


Descendant Selector

The descendant selector selects elements that are descendants of a specified element.

<!DOCTYPE html>
<html>
<head>
    <style>
        div p {
            color: purple;
        }
    </style>
</head>
<body>
    <div>
        <p>This paragraph is inside a div and has purple text.</p>
    </div>
</body>
</html>


Child Selector

The child selector selects elements that are direct children of a specified element.

<!DOCTYPE html>
<html>
<head>
    <style>
        ul > li {
            list-style-type: square;
        }
    </style>
</head>
<body>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
    </ul>
</body>
</html>


Adjacent Sibling Selector

The adjacent sibling selector selects an element that is directly after another specified element.

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 + p {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Header</h1>
    <p>This paragraph is immediately after the header and has a larger font size.</p>
</body>
</html>


General Sibling Selector

The general sibling selector selects all elements that are siblings of a specified element.

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 ~ p {
            color: brown;
        }
    </style>
</head>
<body>
    <h1>Header</h1>
    <p>This paragraph and any following paragraphs will be brown.</p>
    <p>This is another sibling paragraph.</p>
</body>
</html>


Pseudo-class Selector

Pseudo-classes are used to define a special state of an element. They are preceded by a colon (:).

<!DOCTYPE html>
<html>
<head>
    <style>
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
    <a href="#">Hover over this link</a>
</body>
</html>


Pseudo-element Selector

Pseudo-elements are used to style specified parts of an element. They are preceded by a double colon (::).

<!DOCTYPE html>
<html>
<head>
    <style>
        p::first-line {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>This is a paragraph. The first line will be bold.</p>
</body>
</html>


Grouping Selector

The grouping selector applies the same styles to multiple elements.

<!DOCTYPE html>
<html>
<head>
    <style>
        h1, h2, h3 {
            color: navy;
        }
    </style>
</head>
<body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
</body>
</html>

These are the main types of CSS selectors, each serving a specific purpose to help you target and style HTML elements effectively.