Pseudo-razred :first-of-type

Pseudo-razred :first-of-type izbere prvi element določenega tipa med vsemi elementi znotraj starševskega elementa. To je posebej koristno pri kompleksnih strukturah, kjer želimo oblikovati prvi element določene vrste.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>CSS :first-of-type Primer</title>
    <style>
        .container {
            max-width: 100%;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ccc;
        }

        /* Prvi h2 element bo rdeč */
        h2:first-of-type {
            color: red;
        }

        /* Prvi odstavek bo imel posebno ozadje */
        p:first-of-type {
            background-color: orange!important;
            color: black!important;
            padding: 10px;
            border-radius: 4px;
        }

        /* Prvi span v vsakem odstavku bo krepek */
        p span:first-of-type {
            font-weight: bold;
            color: purple!important;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Glavni naslov</h1>
        <h2>Prvi h2 bo rdeč</h2>
        <p>Prvi odstavek bo imel <span>poudarjen tekst</span> in <span>običajen tekst</span>.</p>
        <h2>Drugi h2 bo običajen</h2>
        <p>Drugi odstavek s <span>poudarjenim tekstom</span>.</p>
    </div>
</body>
</html>

REZULTAT