(Kiss Beáta 2025/2026)
Már volt arról szó, hogy a HTML oldalunk kinézetét CSS kóddal alakíthatjuk olyan kinézetűvé, amilyen megjelenést elvárunk tőle. Mivel a CSS abban is segít, hogy a szerkezeti felépítést elválasszuk a kinézeti formázástól, így a definíciós nyelvezete is úgy lett kitalálva, hogy először meg kell címeznünk a DOM-ban elhelyezkedő elemeket, amire stílus formázást szeretnénk tenni un. selector-okkal. Ezek a selector-ok egy vagy akár több HTML elemet is kijelölhetnek arra, hogy azok stílusait formázzuk.
Öt kategóriára oszthatjuk a CSS selector-okat, kiválasztókat.
Az egyszerű kiválasztók között három típust különböztetünk meg, de ezek kombinálhatók is egymással annak érdekében, hogy minél pontosabban meg tudjuk határozni azokat a DOM elemeket, amiket meg szeretnénk formázni.
A selector egy blokkot nyit amiben a kiválasztott elemek tulajdonságainak (CSS property) értékét adhatjuk meg.
A három alapvető selector típus felhasználásával definiált blokkra láthatunk példát a következőkben.
A HTML elem (TAG) selector
body {
background-color: light-grey;
color: #444;
}
Az id selector
#my-custom-nav {
background-color: #afbfc4;
border: 1px solid #444;
}
A class selector
.my-custom-nav-item {
background: #999;
}
A selector-ok összevonhatók, például gyakori, hogy nem minden elemre szeretnénk egy stílust engedélyezni, ami rendelkezik egy adott class attribútum értékkel, hanem mondjuk csak a <span> TAG-ekre.
span.my-custom-nav-item {
background: #999;
}
Az egyszerű kiválasztók körébe tartozik egy speciális selector, az univerzális kiválasztó minta, a '*' karakter. Ezzel a kiválasztóval definiált stílus minden elemre vonatkozik a HTML oldalon.
A kombinált selector-ral kezelni tudjuk a DOM hierarchiát és meg tudjuk vele fogalmazni egy adott TAG leszármazóinak az elérését, ha például space karaketrekkel vagy > jellel elválasztjuk őket egymástól.
A space azt jelenti, hogy bármelyik szintű gyermek elem, amelyre ráillik a selector space utáni része.
div#my-first-block a {
/*
a my-first-block id-vel megjelölt div-en belüli összes 'a',
függetlenül attól, hogy milyen szinten található a leszármazók között!
*/
}
A '>' jelet pedig akkor használjuk, ha a kiválasztott elemen belüli első szintről keresünk gyermek objektumot.
div#my-first-block > a {
/*
a my-first-block id-vel megjelölt div-en belüli összes 'a',
ami az első szintű leszármazója, tehát gyereke.
*/
}
A + jellel a kikeresett objektum utáni legelső testvér objektumot (közös szülő és egy szinten vannak) találja meg.
div#my-first-block + p {
/*
a my-first-block id-vel megjelölt div első 'p' testvére (olyan objektum, aminek a közvetlen szülője megegyezik a my-first-block id-vel megjelölt div közvetlen szülőjével).
*/
}
A ~ (tilde) jellel a kikeresett objektum utáni összes testvér objektumot találja meg.
div#my-first-block ~ p {
/*
a my-first-block id-vel megjelölt div összes 'p' testvére.
*/
}
<ul class="menu">
<li class="item"><a href="#">Home</a></li>
<li class="item"><a href="#">About</a></li>
<li class="item has-sub">
<a href="#">Services</a>
<ul class="submenu">
<li class="sub-item"><a href="#">Design</a></li>
<li class="sub-item"><a href="#">Dev</a></li>
</ul>
</li>
</ul>
<section class="content">
<article class="post">
<h2 class="title">Post</h2>
<p class="lead">Intro...</p>
</article>
</section>
Egyszerű kombinált szelektorok és mit választanak:
.menu > .item — a .menu közvetlen li.item gyerekei.
.menu .submenu .sub-item a — a submenu belső linkjei (bárhol a submenu alatt).
.has-sub > .submenu — csak a has-sub közvetlen alatti submenu.
.content article.post h2.title — a post cím (leszármazó szelektor, több szint is lehet).
h2.title + p.lead — a cím után közvetlenül következő bevezető bekezdés.
.item a:hover — a menülink hover állapota.
A pseudo-element csoportba tartozó selector-okat '::' karakterekkel választunk el az elemkiválasztótól és olyan objektumon belüli vagy hierarchián belüli elemekre vagy töredékekre utalnak, mint például az első sora valamely szövegnek vagy az első betűje egy szövegnek.
Az első sor kiválasztója
p::first-line {
font-style: italic;
}
A ::first-line selector csak blokkos elemen értelmezett, hiszen több soros szövegnek lehet csak első sora!
Az első betű kiválasztójának segítségével készíthetünk egy iniciálé szerű kiemelt betűt a bekezdésünknek.
p::first-letter {
font-weight: 400;
font-size: 3rem;
}
Egy listának az elemeit jelölő szimbólumokat is megcímezhetjük CSS selector-ral, ez a ::marker.
::marker {
color: red;
font-size: 23px;
}
Beállíthatjuk a kijelölt szöveg háttérszínét és írás színét is, erre van a ::selection
::selection {
color: red;
background: yellow;
}
A pseudo-elemekkel meg tudunk még címezni olyan helyeket a HTML-ben, ami a kiválasztott TAG előtt vagy után helyezkedik el és oda tartalmat tudunk beilleszteni CSS-ből a content: property segítségével. A beszúrt tartalom lehet egy kép vagy egyszerű és rövid szöveg macskakörmök között.
p::before { content: url(smiley.gif); }
p::after { content: "Hello world!"; }
A pseudo-class csoportba tartozó selector-okat egy ':' karakterrel választjuk el a selector-tól, amit így specializáltan pontosítunk.
Egy anchor esetén például az alábbi módon tudunk csak a még nem látogatott linkekre, a már látogatott linkekre külön-külön stílust definiálni.
/* még nem látogatott link */
a:link { }
/* már kattintott link */
a:visited { }
Ha egy olyan elemet szeretnénk (például az oldalunk menüjét leíró <ul>-ben az <li> elemeket) stílussal ellátni, ami fölött épp ott van az egérkurzor, akkor azt a :hover esemény kiválasztásával tudjuk beállítani
ul.my-custom-nav li:hover { }
Az így (:hover-re) definiált stílus csak akkor állítódik be, amikor az egeret az adott elem fölé visszük és ha az egér mutatója elhagyja az elemet, akkor a stílust ki is kapcsolja a böngésző.
Ha több elem helyezkedik el egy objektum gyermekeként és szeretnénk a gyermekek közül a legelsőt kiválasztani, akkor használhatjuk a :first-child selector-t.
ul.my-custom-nav li:first-child { }
További pseudo-class kiválasztóknak például a Mozilla Developer Network oldalán lehet utánanézni, érdemes kipróbálni mindet egy-egy rövid HTML részlet segítségével, amire az adott selector ráillik!
Léteznek komplex pseudo-class kiválasztók is, amikben paraméterekkel tovább finomíthatjuk a kiválasztást, ilyen például az :nth-child() selector.
A navigációs menünkben a harmadik elemet az alábbi módon választhatjuk ki.
ul.my-custom-nav li:nth-child(3) { }
Ennél a kiválasztónál vannak előre definiált paraméter értékek is, ilyen az even (minden páros elemre ráillik) és az odd (minden páratlan elemet kiválaszt)
ul.my-custom-nav li:nth-child(even) { }
ul.my-custom-nav li:nth-child(odd) { }
Az üres HTML elemeket az :empty selector képes kikeresni a dokumentumból, ami csak azokat az elemeket adja vissza, amiknek nincs egyetlen gyermek objektumuk sem.
:empty { }
FIGYELEM! Ha például egy <div><p></p></div> blokkot szeretnénk az :emtpy selector segítségével kikeresni, akkor az nem fog sikerülni, mivel ennek a blokknak valóban nincs megjeleníthető gyermek eleme, de akkor is létezik gyermeke a <div>-nek és ez az üres <p> blokk. Ha azonban a <div> egy HTML megjegyzést tartalmaz csak, akkor a <div> üresnek számít és a selector megtalálja. <div>*\ez egy HTML megjegyzés, amit a böngésző nem jelenít meg *</div>\
Vannak olyan kiválasztók, amelyek az elem attribútuma vagy az attribútumának az értéke alapján keresnek meg objektumokat.
Azok az <li> elemek, amelyeknek van data-nav-item attribútuma
ul.my-custom-nav li[data-nav-item] { }
Azok az <li> elemek, ahol a data-nav-item attribútum értéke "nav-option"
ul.my-custom-nav li[data-nav-item="nav-option"] { }
Azok az <li> elemek, ahol a class attribútum értéke tartalmazza a "nav-item" szót, tehát vagy ez a class értéke vagy szerepel a class-ben úgy, hogy van előtte és utána egy space karakter.
ul.my-custom-nav li[class~="nav-item"] { }
Azok az <li> elemek, ahol a class attribútum értéke pontosan a "nav" szó vagy a "nav-" érték szerepel benne úgy, hogy a "-" mögött bármi szerepelhet.
ul.my-custom-nav li[class|="nav"] { }
Azok az <li> elemek, ahol a class attribútum értéke a "nav" szóval kezdődik.
ul.my-custom-nav li[class^="nav"] { }
Azok az <li> elemek, ahol a class attribútum értéke a "nav" karakterlácot végződik.
ul.my-custom-nav li[class$="nav"] { }
Azok az <li> elemek, ahol a class attribútum tartalmazza a "nav" karakterláncot.
ul.my-custom-nav li[class*="nav"] { }
FIGYELEM! A fenti példákban fontos a szó és a karakterlánc megkülönböztetése. A szó az a karakterlánc, ami előtt és után egy-egy space karakter szerepel, míg a karakterlánc lehet egy másik szó része is.
A stílusdefiníciókat elhelyezhetjük külön css fájlokban, ilyenkor a HTML oldal fejlécében tudjuk a <link rel="stylesheet" type="text/css" href="my-custom.css"> formában kérni a betöltését a böngészőtől, de megadhatjuk <style> </style> TAG-ek közé írva is a <body> </body> vagy a <head> </head> blokkon belül is.
Létezik egy speciális stílus definíció is, ami nem szétválasztja a szerkezetet a megjelenítéstől, hanem egymásba fűzi őket, de nem a régi HTML elemeket felhasználva, hanem a CSS tulajdonság és érték párosok definiálásával a HTML attribútumai között a speciális style attribútumba illesztve.
<div style="border: 1px solid lightyellow"></div>
Ezt inline stílusdefiníciónak nevezzük.
Mivel egy HTML elemre előfordulhat (és elő is szokott fordulni), hogy több CSS selector illeszkedik és a böngészőnek el kell tudnia döntenie, ha több ugyanolyan CSS tulajdonság is van definiálva, hogy melyik az az érték, ami az adott tulajdonságra érvényesítve lesz, ezért bevezették a stílusdefiníciók precedenciáját (kiértékelési fontossági sorrendjét).
A stílusdefiníciók közül alapértelmezetten az lesz a győztes amelyik a legközelebbi (legpontosabb) selector-ban helyezkedik el. Viszont ez a sorrend is felüldefiniálható egy varázs kulcsszó megadásával a tulajdonsághoz hozzárendelt érték mögött elhelyezve. Ez a kulcsszó az "!important" és azt jelöli a böngészőnek, hogy az adott tulajdonságnak beállított érték a legfontosabb azok közül, amik ugyanerre a tulajdonságra vannak definiálva.
A lenti példában minden <span> megjelenése inline-block lesz, tehát blokkos elemmé válik, de úgy hogy a teljes szélességet nem tölti ki, továbbá a háttérszíne sárga lesz. A precedencia szabályai alapján fehér háttérszínűnek kellene lennie, mert a sima span {} selector gyengébb (általánosabban megfogalmazott), mint a p span.my-inline-block {} selector, ami sokkal pontosabb, mégis az !important kulcsszóval a gyengébb kiválasztóban definiált tulajdonság érték fog győzni.
<!DOCTYPE html>
<html lang="hu">
<head>
<style>
p span.my-inline-block {
background-color: white;
}
span {
display: inline-block;
background-color: yellow !important;
}
</style>
</head>
<body>
<p>
<span class="my-inline-block">Hello, ez egy teszt blokk<span>
</p>
</body>
</html>
Ha nincs !important kulcsszó egy adott elemhez tartozó stílusok között, akkor a precedencia úgy alakul a fenti illeszkedési pontosságon felül, hogy az inline stylusdefiníció mindig győz.