CSS Pseudo-osztályok és elemek

A CSS pseudo-osztályok és pseudo-elemek lehetővé teszik, hogy elemeket különböző állapotokban vagy pozíciókban formázzunk anélkül, hogy extra HTML elemeket kellene használnunk.

:hover Pseudo-osztály

A :hover az egér mutatóval történő rámutatás állapotát jelzi. Gyakran használjuk interaktív elemek visszajelzésére.

.button:hover {
    background-color: #1976D2;
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

:active Pseudo-osztály

Az :active az elem aktív állapotát jelzi, például amikor rákattintunk. Kiváló visszajelzést ad a felhasználói interakcióról.

.button:active {
    background-color: #388E3C;
    transform: translateY(2px);
}

:focus Pseudo-osztály

A :focus az elem fókuszált állapotát jelzi, például amikor egy input mezőbe kattintunk vagy tab billentyűvel navigálunk rá.

.input:focus {
    outline: none;
    border-color: #2196F3;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.3);
}

:first-child, :last-child, :nth-child

Ezek a pseudo-osztályok lehetővé teszik elemek kiválasztását a szülőelemükön belüli pozíciójuk alapján.

Első elem (:first-child)

Második elem (páros :nth-child(even))

Harmadik elem

Negyedik elem (páros :nth-child(even))

Utolsó elem (:last-child)

p:first-child { background-color: #bbdefb; }
p:last-child { background-color: #ffcdd2; }
p:nth-child(even) { background-color: #c8e6c9; }

::before és ::after Pseudo-elemek

A ::before és ::after pseudo-elemek lehetővé teszik dekoratív tartalom hozzáadását egy elem elé vagy után.

Ez egy idézet, amit automatikusan idézőjelek vesznek körbe a ::before és ::after pseudo-elemek segítségével.

.quote::before {
    content: '"';
    position: absolute;
    left: -10px;
    top: -10px;
}

.quote::after {
    content: '"';
    position: absolute;
    right: -10px;
    bottom: -40px;
}

Link Állapotok

A linkeknek különböző állapotai lehetnek: :link, :visited, :hover, :active

Kattintható link

(Próbáld ki a különböző állapotokat)

a:link { color: #2196F3; }
a:visited { color: #9C27B0; }
a:hover { color: #1976D2; }
a:active { color: #F44336; }

Form Elem Állapotok

Az űrlap elemeknek számos speciális állapota lehet: :disabled, :read-only, :valid, :invalid

input:disabled { background-color: #f5f5f5; }
input:read-only { background-color: #fff3e0; }
input:invalid { border-color: #f44336; }
input:valid { border-color: #4CAF50; }

Egyedi Számozott Lista

A ::before pseudo-elem és CSS számlálók segítségével egyedi számozást készíthetünk.

Első elem
Második elem
Harmadik elem

.custom-list {
    counter-reset: my-counter;
}

.custom-list li::before {
    counter-increment: my-counter;
    content: counter(my-counter);
}

::selection Pseudo-elem

A ::selection pseudo-elem lehetővé teszi a kijelölt szöveg megjelenésének testreszabását.

Jelöld ki ezt a szöveget az egérrel, hogy lásd a különleges kijelölési stílust!

.text::selection {
    background-color: #FFEB3B;
    color: #000;
}