CSS műhely.
← Minden téma

02. TÉMA · CSS

Pszeudo-osztályok és -elemek.

Állapotok, pozíciók és generált tartalom extra HTML nélkül

1. FEJEZET

Pszeudo-osztály vagy pszeudo-elem?

Pszeudo-osztály – egy kettősponttal: :hover, :nth-child(2)

Az elemre akkor illeszkedik, ha az egy bizonyos állapotban vagy helyzetben van. Olyan, mintha a böngésző ideiglenesen egy osztályt tenne rá.

Pszeudo-elem – két kettősponttal: ::before, ::selection

Az elem egy részét formázza, vagy egy új, generált dobozt hoz létre, amely nem szerepel a HTML-ben.

A pszeudo-osztály a specificitásban osztálynak (0-1-0), a pszeudo-elem típusnak (0-0-1) számít. A régi pszeudo-elemek (:before, :after) egy kettősponttal is működnek, de a mai írásmód a két kettőspont.

2. FEJEZET

Állapotok: :hover, :active, :focus, :focus-visible

  • :hover – az egérmutató az elem fölött van (érintőképernyőn nem megbízható).
  • :active – az elemet éppen lenyomják (egérgomb vagy szóköz/Enter lenyomva).
  • :focus – az elemé a fókusz: ide megy a billentyűzetbevitel. Kattintásra és Tab billentyűre is.
  • :focus-visible – a fókusz, de csak akkor, amikor látni kell: billentyűzetes navigációnál, illetve szövegmezőkben mindig. Gombra kattintva egérrel általában nem.

PRÓBÁLD KI

Melyik pszeudo-osztály illeszkedik most?

vidd fölé az egeret, kattints, nyomd le, majd próbáld a Tab billentyűvel
stilus.css

Sok régi minta :focus { outline: none; }-t javasol, hogy kattintáskor ne legyen keret a gomb körül. Ezzel a billentyűzettel navigáló látogató elveszíti, hol jár az oldalon. Helyette a :focus-visible-t formázd: egérrel nem jelenik meg, billentyűzettel igen.

3. FEJEZET

Linkek állapotai – a sorrend számít

A linkekre négy állapot vonatkozik: :link (még nem látogatott), :visited (már látogatott), :hover és :active. Mind a négy pszeudo-osztály 0-1-1 specificitású (a:hover), tehát ütközéskor a sorrend dönt: ha a :hover a :visited elé kerül, egy látogatott linken soha nem látszik a rámutatás színe. A megjegyezhető sorrend: Link – Visited – Hover – Active.

a:link    { color: #2f63a8; }
a:visited { color: #6c4fc0; }
a:hover   { color: #b8621b; }
a:active  { color: #b8382a; }

Adatvédelmi okból a :visited csak néhány színtulajdonságot módosíthat (pl. color, border-color), és a JavaScript sem tudja kiolvasni, melyik link látogatott.

4. FEJEZET

Hányadik gyerek? – :first-child, :last-child, :nth-child()

Ezek a pszeudo-osztályok az elem helyére illeszkednek a szülőn belül. Az :nth-child(an+b) képlet minden n = 0, 1, 2, … értékre kiszámolja, hányadik gyereket választja ki (a számozás 1-től indul). Kulcsszavak: odd = 2n+1 (páratlan), even = 2n (páros).

PRÓBÁLD KI

Képletpróbáló

írd be a zárójel tartalmát

    stilus.css

    Az :nth-child() minden testvért számol, az :nth-of-type() csak az azonos típusúakat. Egy <h2> után álló bekezdések közül a p:nth-child(1) egyet sem talál (az 1. gyerek a h2), a p:nth-of-type(1) viszont az első bekezdést.

    5. FEJEZET

    Generált tartalom: ::before és ::after

    A ::before az elem tartalma elé, az ::after mögé szúr be egy új dobozt. A doboz csak akkor jön létre, ha van content tulajdonsága – akár üres szöveggel (content: ""), díszítő elemekhez.

    PRÓBÁLD KI

    Idézőjelek HTML nélkül

    A CSS a webes dokumentumok megjelenését írja le.
    stilus.css
    .idezet::before {
  content: "„";          /* nyitó idézőjel */
  font-size: 3em;
  color: #6c9272;
}
.idezet::after {
  content: "”";          /* záró idézőjel */
  font-size: 3em;
  color: #6c9272;
}

    A generált tartalom nem része a HTML-nek: nem jelölhető ki egérrel, és nem minden képernyőolvasó olvassa fel. Ezért csak díszítésre használd; fontos szöveget mindig a HTML-be írj.

    Saját számozás CSS-számlálóval

    A counter-reset elindít egy számlálót, a counter-increment lépteti, a content: counter(nev) kiírja – így a lista számai tetszőlegesen formázhatók.

    • Tervezés
    • Megvalósítás
    • Ellenőrzés
    .sajat-lista { counter-reset: lepes; list-style: none; }
.sajat-lista li { counter-increment: lepes; }
.sajat-lista li::before {
  content: counter(lepes);
  /* + kör alakú háttér, igazítás */
}

    6. FEJEZET

    Űrlapmezők állapotai

    Az űrlapelemeknek saját pszeudo-osztályaik vannak. Kattints a mezőkbe, írj beléjük, és figyeld, melyik illeszkedik:

    PRÓBÁLD KI

    Mezők és illeszkedő pszeudo-osztályok

    a zöld címke illeszkedik, a halvány nem
    stilus.css
    /* csak akkor piros, ha a felhasználó már hozzányúlt */
input:user-invalid { border-color: #b8382a; background: #fdf0ed; }
input:user-valid   { border-color: #2e7a4f; }

input:read-only:not(:disabled) { background: #f4f1e4; }
input:disabled { opacity: .55; cursor: not-allowed; }

    Az :invalid már oldalbetöltéskor illeszkedik egy üres, kötelező mezőre – a látogató hibaüzenetet lát, mielőtt bármit írt volna. A :user-invalid csak a mező elhagyása vagy az űrlap beküldése után jelez.

    A letiltott mező a :read-only-ra is illeszkedik (hiszen nem írható). Ha csak a valóban „csak olvasható” mezőt akarod formázni: :read-only:not(:disabled).

    7. FEJEZET

    További hasznos pszeudo-elemek

    Pszeudo-elemMit formáz?Próbáld ki
    ::selectionaz egérrel kijelölt szövegrésztJelöld ki ezt a mondatot!
    ::placeholdera szövegmező helykitöltő szövegét
    ::markera listaelem jelét (pötty, szám)
    • zöld jelölő
    ::first-lettera blokk első betűjét

    Iniciálé: az első betű nagyobb.

    ÖSSZEFOGLALÁS

    Amit érdemes megjegyezni

    • Egy kettőspont: állapot vagy helyzet (pszeudo-osztály, 0-1-0). Két kettőspont: elemrész vagy generált doboz (pszeudo-elem, 0-0-1).
    • A fókuszt ne tüntesd el: formázd a :focus-visible-t.
    • Linkeknél tartsd a LVHA sorrendet.
    • :nth-child(an+b): n = 0, 1, 2, … ; a számozás 1-től indul.
    • ::before/::after csak content-tel jön létre, és csak díszítésre való.
    • Űrlaphibát a :user-invalid-dal jelezz, ne az :invalid-dal.