News & Blog

Kombinátorok használata a CSS kijelölőkben

News & Blog

A CSS kijelölők segítségével tudjuk azokat azokat az elemeket kijelölni, melyekre érvényesíteni szeretnénk a CSS szabályokat. Az egyes kijelölőket viszont kombinálni is tudjuk a kombinátorok segítségével. Vizsgáljuk meg most ezeket.

Csoportosítás

Ha egy adott stílust több elemre is szeretnénk érvényesíteni, az egyes elemeket vesszővel elválasztva kell felsorolnunk. A következő példában a <p> és a <div> elem színét is zöldre szeretnénk beállítani világoskék háttérrel:

<p>Alma</p>
<div>Barack</div>    
p,div {color: green; background-color: lightblue;}

Vigyázzunk arra, hogy ilyenkor a két elem tulajdonságait összekapcsoltuk, vagyis bármikor módosítjuk ezt a stílust, az mind a két elemre kihat. Ha szeretnénk viszont, hogy mondjuk a <div> elemre a <p>-től különböző tulajdonságok is érvényesüljenek, akkor megtehetjük, hogy rá külön is előírjuk ezt. A <div> elem szélessége legyen például 50%-a az ablaknak:

<p>Alma</p>
<div>Barack</div>
p,div {color: green; background-color: lightblue;}
div {width: 50%;}

Korábban már definiált tulajdonságot is felülírhatunk, amennyiben egy később elhelyezett stílusban tesszük ezt meg. Legyen például a <div> elemünk háttérszíne rózsaszín. 

<p>Alma</p>
<div>Barack</div>    
p,div {color: green; background-color: lightblue;}
div {width: 50%; background-color: pink;}

Természetesen az így definiált stílusok elég rendezetlen gondolkodásra utalnak, és kerülendők. Az viszont már elképzelhető, hogy azt szeretnénk, hogy általában a <div> elemek háttérszíne világoskék legyen (ráadásul ugyanolyan színűek, mint a <p> elemeké), de bizonyos <div> elemek háttérszíne legyen rózsaszín. Ezeket a <div> elemeket megjelöljük valamivel (én most egy class-szal fogom), és erre írjuk elő az új háttérszínt:

<p>Alma</p>
<div>Barack</div>
<div class="mas">Cseresznye</div>
p,div {color: green; background-color: lightblue;}
div {width: 50%; }
.mas{background-color: pink;}

Ilyenkor ezt az osztályt bármilyen elemhez rendelhetjük, ha értelmezhető ott a háttérszín tulajdonság, alkalmazni fogja rá. Előírhatjuk azt is, hogy csak a <div> elemekre használva színezze át rózsaszínre a háttérszínt, ahogyan a következő példában látjuk. Hiába rendeltük hozzá ezt az osztályt a <p> elemhez, arra nincsen hatással, mivel ezt a <p> elemet div.mas nem jelöli ki.

<p class="mas">Alma</p>
<div>Barack</div>
<div class="mas">Cseresznye</div>
p,div {color: green; background-color: lightblue;}
div {width: 50%; }
div.mas{background-color: pink;}

Kicsit messze jutottunk a csoportosítástól, de talán érdemes volt. Nézzük meg most a kombintárok egy másik fajtáját:

Gyermekek kijelölése

Sokszor van arra szükségünk, hogy csak akkor jelöljünk ki egy elemet, ha az valamelyik másik elemnek a gyermeke. Tegyük fel például, hogy egy sorszámozatlan lista minden elemét szeretnénk zöld színnel írni. Azt nem írhatjuk elő, hogy minden <li> elem legyen zöld színű, mert akkor a sorszámozott listákra is alkalmazza. Azt viszont megtehetjük, hogy csak azokat a <li> elemeket válassza ki, amelyek egy <ul> elem gyermekei:

<ul>
    <li>Alma</li>
    <li>Barack</li> 
    <li>Cseresznye</li>
</ul>
ul > li{color: green;}

Gondoljuk el, ha nem használtuk volna a gyermekre történő hivatkozást a kijelölőben, akkor minden <li> elemet meg kellett volna jelölnünk például egy osztállyal, és azon keresztül húztuk volna rájuk a tulajdonságot. Így azért még is szebb!

A fenti példában minden sorszámozatlan listánkban zöld színűek lesznek a listaelemek. Készítsünk most két listát, az egyiket a gyumolcsok, a másikat a zoldsegek azonosítóval lássuk el, és alkalmazzunk rájuk két különböző stílust:

<ul id="gyumolcsok">
    <li>Alma</li>
    <li>Barack</li> 
    <li>Cseresznye</li>
</ul>    
<ul id="zoldsegek">
    <li>Retek</li>
    <li>Uborka</li> 
    <li>Petrezselyem</li>
</ul>
ul#gyumolcsok > li {color: red;}
ul#zoldsegek > li {color: green;}

Utódok kijelölése

Mi van akkor, ha nem egy gyermek, hanem egy utód elemet szeretnénk kijelölni?  Vegyük azt a példát, amikor a listánkban nem csak <li> elemek vannak, hanem a <li> elemeken belül szeretnénk valamit <em> elemek közé zárva dőlve is megjeleníteni. Nézzük a következő kódot:

<ul>
    <li>Opel <em>Corsa</em></li>
    <li>Toyota <em>Carina</em></li> 
    <li>Skoda <em>Fabia</em></li>
</ul>    
ul > li {color: green;}

Azt tapasztaljuk, hogy az autók márkája és az autók típusa is zöld színnel lett megjelenítve. Miért, hiszen az <em> elemekre nem lett előírva a stílus? A válasz egyszerű, mivel az <em> elemek az egyes <li> elemek gyermekei, így a szövegszín öröklődött rájuk. Mi viszont az autók típusát pirossal szeretnénk megjeleníteni. Az ul > em kombinálás nem járható út, hiszen az <em> elemek nem gyermekei az <ul> elemnek. Ilyenkor a relációjel helyett a szóközt használhatjuk, amellyel az utód kapcsolatot írjuk elő a két elem között:

<ul>
    <li>Opel <em>Corsa</em></li>
    <li>Toyota <em>Carina</em></li> 
    <li>Skoda <em>Fabia</em></li>
</ul>    
ul > li {color: green;}
ul em {color: red;}

Megtehettük volna persze, hogy az <em> elemeket, mint a <li> elemek gyermekei jelöljük ki, de általában a lista elemből indulunk ki, hiszen erre a listára szeretnénk érvényesíteni ezt a stílust (még ha most nem is azonosítottuk pl. id-val ezt a listát.).

Közvetlen következő testvérek kijelölése

A szülő-testvér és a szülő-utód kapcsolatokat az előzőekben leírtak szerint már tudjuk kezelni, most nézzük meg, ha egy olyan elemre szeretnénk ráhúzni egy stílust, amely egy másik elem közvetlen következő testvére. Induljunk ki az előző autós listánkból, keretezzük be zöld kerettel, és próbáljuk elérni CSS-sel, hogy minden autó  márkát válasszunk el a másiktól egy zöld vonallal. Persze ez csak úgy néz ki jól, ha az első fölé, és az utolsó alá nem húzunk vonalat. (Hiszen ott a külső keret van.) Ezt a hatást úgy érjük el, hogy minden <li> elemnél, amely közvetlenül egy másik <li> elemnek a testvére (tehát előtte <li> elem található) rendeljük azt a stílust, mely az elem fölé húz egy vonalat. (A külső zöld keret stílusát most nem írom ide a kódba.)

<ul>
    <li>Opel Corsa</li>
    <li>Toyota Carina</li>  
    <li>Skoda Fabia</li>
    <li>Fiat Punto</li>
</ul>
li+li {border-top: 2px solid green;}

Vegyünk egy másik példát a testvérek kijelölésére. Tegyük fel, hogy fejezet és alfejezet címeket alkalmazunk, és az alfejezetek bekezdéseit <div> elemekben tároljuk. Minden alfejezet első bekezdését dőlt betűvel szedjük, és pontozott vonallal bekeretezzük. (Feltételezzük, hogy az első bekezdés valamilyen általános leírását tartalmazza az alfejezetnek, ezért kell másképpen formázva megjeleníteni.) Az első bekezdés és az alfejezet címe között más távolságot szeretnénk beállítani, mint a többi bekezdés között. A közvetlen testvér kijelölésével könnyen tudjuk a különböző stílusokat az egyes elemekhez rendelni.

<h1>CSS kijelölők</h1>
<h2>Attribútum kijelölők</h2>
<div>Ez az alfejezet első bekezdése</div>
<div>Ez az alfejezet második bekezdése</div>
<div>Ez az alfejezet harmadik bekezdése</div>
<h2>Pseudo osztályok</h2>
<div>Ez az alfejezet első bekezdése</div>
<div>Ez az alfejezet második bekezdése</div>
h2 {text-indent: 2em; line-height: 30%;}
h2+div {font-style: italic; border: 1px dotted green; margin-top: 10px; background-color: lightgreen;}
div {margin-left: 6em;}
div+div {padding-top: 5px;}

Testvérek kijelölése

Mi van akkor, ha egy elem nem közvetlen, hanem bármelyik testvérét ki szeretnénk jelölni? Tegyük fel, hogy <div> elemekből felépítünk egy listát.  Az első <div> elem a lista címét tartalmazza, a következők a lista tartalmát. (Vegyük észre, a HTML listában az <ol> vagy <ul> gyermekei az <li> elemek, itt viszont a <div> elemek egymás testvérei, tehát nincsenek szülő gyermek kapcsolatban az első <div>-vel.) A lista címét egy cim osztállyal jelöljük meg, míg a lista elemeit ezen első <div> elem testvéreiként választjuk ki:

<div class="cim">Autók</div>
<div>Opel</div>
<div>Toyota</div>
<div>Suzuki</div>
<div>Mercedes</div>
.cim{background-color: lightgreen; font-weight: 600; border: 1px solid black; padding: 5px 5px 5px 1px; width: 100px;}
div.cim~div{background-color: yellow; border: 1px solid black; text-indent: 1em; padding: 5px 5px 5px 1px;  width: 100px; }

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük