CSS Selectors

CSS Selectors point to the HTML element we want to style, the declaration block contains statements separated by semicolons. Each declaration includes a CSS property and value, separated by a semicolon. While declarations end with a semicolon, blocks end with curly braces. Selectors serve to "find" HTML elements we want to transform, and we divide them into five categories.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* simple element selector */
        p {
            font-family: Arial, sans-serif;
        }

        /* class selector */
        .important {
            color: #d63384;
            font-weight: bold;
        }

        /* ID selector */
        #main-heading {
            color: #0d6efd;
            text-align: center;
            margin-bottom: 25px;
        }

        /* descendant combinator */
        div p {
            margin-left: 20px;
        }

        /* child combinator */
        div > span {
            background-color: #ffc107;
            padding: 2px 5px;
        }

        /* adjacent sibling combinator */
        h2 + p {
            font-style: italic;
        }

        /* general sibling combinator */
        h2 ~ p {
            line-height: 1.6;
        }

        /* pseudo-classes */
        a:hover {
            color: #198754;
            text-decoration: none;
        }

        /* pseudo-elements */
        p::first-letter {
            font-size: 120%;
            font-weight: bold;
        }

        /* attribute selector */
        [title] {
            cursor: help;
        }

        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #dee2e6;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 id="main-heading">Welcome to My Website</h1>
        
        <h2>About Me</h2>
        <p>This paragraph will be in <span>italic text</span>, because it follows the h2 element.</p>
        <p>I am a <span class="important">creative developer</span> who strives for excellence.</p>
        
        <div class="section">
            <h2>My Services</h2>
            <p>I offer various services:</p>
            <ul>
                <li>Web Design</li>
                <li>Application Development</li>
                <li>SEO Optimization</li>
            </ul>
        </div>
        
        <p title="Click for more information">For more information about me, visit the About Me page.</p>
    </div>
</body>
</html>

RESULT

Above, I show you an example webpage that combines different types of CSS selectors in practical use. The example shows a simple company webpage where you can see the operation of simple selectors (elements, classes, IDs), combinators (descendant, child, adjacent, general sibling), pseudo-classes and pseudo-elements. The page contains a heading, navigation, and content sections where you can observe how different selectors affect element styling. Particularly interesting are hover effects on links, first letter styling of paragraphs, and special marking of important text.

Selector	Example	Description
Simple Selectors
`*`	`* { }`	Universal selector – selects all elements
`element`	`p { }`	Selects all elements with the specified name
`.class`	`.heading { }`	Selects all elements with the specified class
`#id`	`#header { }`	Selects the element with the specified ID
`element.class`	`p.description { }`	Selects elements with the specified class
`element, element`	`h1, p { }`	Grouping selector – selects multiple elements
Attribute Selectors
`[attribute]`	`[href] { }`	Selects elements with the specified attribute
`[attribute="value"]`	`[type="text"] { }`	Selects elements with the exact attribute value
`[attribute~="value"]`	`[class~="active"] { }`	Selects elements whose attribute contains the word
`[attribute\|="value"]`	`[lang\|="en"] { }`	Selects elements with attribute starting with the word
`[attribute^="value"]`	`[href^="https"] { }`	Selects elements whose attribute starts with value
`[attribute$="value"]`	`[href$=".pdf"] { }`	Selects elements whose attribute ends with value
`[attribute*="value"]`	`[href*="tutorial"] { }`	Selects elements whose attribute contains the value
Combinators
`element element`	`div p { }`	Descendant – selects all p inside div
`element > element`	`div > p { }`	Child – selects only direct children
`element + element`	`div + p { }`	Adjacent sibling – selects element immediately after
`element ~ element`	`div ~ p { }`	General sibling – selects all siblings after
Pseudo-classes
`:active`	`a:active { }`	Selects an active link
`:checked`	`input:checked { }`	Selects checked input elements
`:disabled`	`input:disabled { }`	Selects disabled elements
`:empty`	`div:empty { }`	Selects elements without content
`:enabled`	`input:enabled { }`	Selects enabled elements
`:first-child`	`p:first-child { }`	Selects the first child of a parent
`:first-of-type`	`p:first-of-type { }`	Selects the first element of its type
`:focus`	`input:focus { }`	Selects the element with focus
`:hover`	`a:hover { }`	Selects element on mouse hover
`:in-range`	`input:in-range { }`	Selects elements with value in range
`:invalid`	`input:invalid { }`	Selects elements with invalid value
`:lang()`	`p:lang(sl) { }`	Selects elements with specified language
`:last-child`	`p:last-child { }`	Selects the last child of parent
`:last-of-type`	`p:last-of-type { }`	Selects the last element of its type
`:link`	`a:link { }`	Selects unvisited links
`:not()`	`:not(p) { }`	Selects all elements except specified
`:nth-child()`	`p:nth-child(2) { }`	Selects nth child of parent
`:nth-last-child()`	`p:nth-last-child(2) { }`	Selects nth child from the end
`:nth-last-of-type()`	`p:nth-last-of-type(2) { }`	Selects nth element of type from end
`:nth-of-type()`	`p:nth-of-type(2) { }`	Selects nth element of specified type
`:only-child`	`p:only-child { }`	Selects the only child of parent
`:only-of-type`	`p:only-of-type { }`	Selects the only element of its type
`:optional`	`input:optional { }`	Selects optional form elements
`:out-of-range`	`input:out-of-range { }`	Selects elements with value out of range
`:read-only`	`input:read-only { }`	Selects read-only elements
`:read-write`	`input:read-write { }`	Selects read-write elements
`:required`	`input:required { }`	Selects required form elements
`:root`	`:root { }`	Selects the root element of document
`:target`	`:target { }`	Selects the current active URL target
`:valid`	`input:valid { }`	Selects elements with valid value
`:visited`	`a:visited { }`	Selects visited links
Pseudo-elements
`::after`	`p::after { }`	Inserts content after the element
`::before`	`p::before { }`	Inserts content before the element
`::first-letter`	`p::first-letter { }`	Selects the first letter of text
`::first-line`	`p::first-line { }`	Selects the first line of text
`::selection`	`::selection { }`	Selects user-highlighted text