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;}

var ai_iframe_width_advanced_iframe = 0;var ai_iframe_height_advanced_iframe = 0;var aiIsIe8=false;var aiOnloadScrollTop="true";var aiShowDebug=false; if (typeof aiReadyCallbacks === 'undefined') { var aiReadyCallbacks = []; } else if (!(aiReadyCallbacks instanceof Array)) { var aiReadyCallbacks = []; } function aiShowIframeId(id_iframe) { jQuery("#"+id_iframe).css("visibility", "visible"); } function aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe); } function aiResizeIframeHeightId(height,width,id) {aiResizeIframeHeightById(id,height);}var ifrm_advanced_iframe = document.getElementById("advanced_iframe");var hiddenTabsDoneadvanced_iframe = false; function resizeCallbackadvanced_iframe() {}

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%;}

var ai_iframe_width_advanced_iframe_2 = 0;var ai_iframe_height_advanced_iframe_2 = 0;var aiIsIe8=false;var aiOnloadScrollTop="true";var aiShowDebug=false; if (typeof aiReadyCallbacks === 'undefined') { var aiReadyCallbacks = []; } else if (!(aiReadyCallbacks instanceof Array)) { var aiReadyCallbacks = []; } function aiShowIframeId(id_iframe) { jQuery("#"+id_iframe).css("visibility", "visible"); } function aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe_2); } function aiResizeIframeHeightId(height,width,id) {aiResizeIframeHeightById(id,height);}var ifrm_advanced_iframe_2 = document.getElementById("advanced_iframe_2");var hiddenTabsDoneadvanced_iframe_2 = false; function resizeCallbackadvanced_iframe_2() {}

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;}

var ai_iframe_width_advanced_iframe_3 = 0;var ai_iframe_height_advanced_iframe_3 = 0;var aiIsIe8=false;var aiOnloadScrollTop="true";var aiShowDebug=false; if (typeof aiReadyCallbacks === 'undefined') { var aiReadyCallbacks = []; } else if (!(aiReadyCallbacks instanceof Array)) { var aiReadyCallbacks = []; } function aiShowIframeId(id_iframe) { jQuery("#"+id_iframe).css("visibility", "visible"); } function aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe_3); } function aiResizeIframeHeightId(height,width,id) {aiResizeIframeHeightById(id,height);}var ifrm_advanced_iframe_3 = document.getElementById("advanced_iframe_3");var hiddenTabsDoneadvanced_iframe_3 = false; function resizeCallbackadvanced_iframe_3() {}

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;}

var ai_iframe_width_advanced_iframe_4 = 0;var ai_iframe_height_advanced_iframe_4 = 0;var aiIsIe8=false;var aiOnloadScrollTop="true";var aiShowDebug=false; if (typeof aiReadyCallbacks === 'undefined') { var aiReadyCallbacks = []; } else if (!(aiReadyCallbacks instanceof Array)) { var aiReadyCallbacks = []; } function aiShowIframeId(id_iframe) { jQuery("#"+id_iframe).css("visibility", "visible"); } function aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe_4); } function aiResizeIframeHeightId(height,width,id) {aiResizeIframeHeightById(id,height);}var ifrm_advanced_iframe_4 = document.getElementById("advanced_iframe_4");var hiddenTabsDoneadvanced_iframe_4 = false; function resizeCallbackadvanced_iframe_4() {}

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;}

var ai_iframe_width_advanced_iframe_5 = 0;var ai_iframe_height_advanced_iframe_5 = 0;var aiIsIe8=false;var aiOnloadScrollTop="true";var aiShowDebug=false; if (typeof aiReadyCallbacks === 'undefined') { var aiReadyCallbacks = []; } else if (!(aiReadyCallbacks instanceof Array)) { var aiReadyCallbacks = []; } function aiShowIframeId(id_iframe) { jQuery("#"+id_iframe).css("visibility", "visible"); } function aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe_5); } function aiResizeIframeHeightId(height,width,id) {aiResizeIframeHeightById(id,height);}var ifrm_advanced_iframe_5 = document.getElementById("advanced_iframe_5");var hiddenTabsDoneadvanced_iframe_5 = false; function resizeCallbackadvanced_iframe_5() {}

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;}

var ai_iframe_width_advanced_iframe_6 = 0;var ai_iframe_height_advanced_iframe_6 = 0;var aiIsIe8=false;var aiOnloadScrollTop="true";var aiShowDebug=false; if (typeof aiReadyCallbacks === 'undefined') { var aiReadyCallbacks = []; } else if (!(aiReadyCallbacks instanceof Array)) { var aiReadyCallbacks = []; } function aiShowIframeId(id_iframe) { jQuery("#"+id_iframe).css("visibility", "visible"); } function aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe_6); } function aiResizeIframeHeightId(height,width,id) {aiResizeIframeHeightById(id,height);}var ifrm_advanced_iframe_6 = document.getElementById("advanced_iframe_6");var hiddenTabsDoneadvanced_iframe_6 = false; function resizeCallbackadvanced_iframe_6() {}

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;}

var ai_iframe_width_advanced_iframe_7 = 0;var ai_iframe_height_advanced_iframe_7 = 0;var aiIsIe8=false;var aiOnloadScrollTop="true";var aiShowDebug=false; if (typeof aiReadyCallbacks === 'undefined') { var aiReadyCallbacks = []; } else if (!(aiReadyCallbacks instanceof Array)) { var aiReadyCallbacks = []; } function aiShowIframeId(id_iframe) { jQuery("#"+id_iframe).css("visibility", "visible"); } function aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe_7); } function aiResizeIframeHeightId(height,width,id) {aiResizeIframeHeightById(id,height);}var ifrm_advanced_iframe_7 = document.getElementById("advanced_iframe_7");var hiddenTabsDoneadvanced_iframe_7 = false; function resizeCallbackadvanced_iframe_7() {}

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;}

var ai_iframe_width_advanced_iframe_8 = 0;var ai_iframe_height_advanced_iframe_8 = 0;var aiIsIe8=false;var aiOnloadScrollTop="true";var aiShowDebug=false; if (typeof aiReadyCallbacks === 'undefined') { var aiReadyCallbacks = []; } else if (!(aiReadyCallbacks instanceof Array)) { var aiReadyCallbacks = []; } function aiShowIframeId(id_iframe) { jQuery("#"+id_iframe).css("visibility", "visible"); } function aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe_8); } function aiResizeIframeHeightId(height,width,id) {aiResizeIframeHeightById(id,height);}var ifrm_advanced_iframe_8 = document.getElementById("advanced_iframe_8");var hiddenTabsDoneadvanced_iframe_8 = false; function resizeCallbackadvanced_iframe_8() {}

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;}

var ai_iframe_width_advanced_iframe_9 = 0;var ai_iframe_height_advanced_iframe_9 = 0;var aiIsIe8=false;var aiOnloadScrollTop="true";var aiShowDebug=false; if (typeof aiReadyCallbacks === 'undefined') { var aiReadyCallbacks = []; } else if (!(aiReadyCallbacks instanceof Array)) { var aiReadyCallbacks = []; } function aiShowIframeId(id_iframe) { jQuery("#"+id_iframe).css("visibility", "visible"); } function aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe_9); } function aiResizeIframeHeightId(height,width,id) {aiResizeIframeHeightById(id,height);}var ifrm_advanced_iframe_9 = document.getElementById("advanced_iframe_9");var hiddenTabsDoneadvanced_iframe_9 = false; function resizeCallbackadvanced_iframe_9() {}

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;}

var ai_iframe_width_advanced_iframe_10 = 0;var ai_iframe_height_advanced_iframe_10 = 0;var aiIsIe8=false;var aiOnloadScrollTop="true";var aiShowDebug=false; if (typeof aiReadyCallbacks === 'undefined') { var aiReadyCallbacks = []; } else if (!(aiReadyCallbacks instanceof Array)) { var aiReadyCallbacks = []; } function aiShowIframeId(id_iframe) { jQuery("#"+id_iframe).css("visibility", "visible"); } function aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe_10); } function aiResizeIframeHeightId(height,width,id) {aiResizeIframeHeightById(id,height);}var ifrm_advanced_iframe_10 = document.getElementById("advanced_iframe_10");var hiddenTabsDoneadvanced_iframe_10 = false; function resizeCallbackadvanced_iframe_10() {}

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;}

var ai_iframe_width_advanced_iframe_11 = 0;var ai_iframe_height_advanced_iframe_11 = 0;var aiIsIe8=false;var aiOnloadScrollTop="true";var aiShowDebug=false; if (typeof aiReadyCallbacks === 'undefined') { var aiReadyCallbacks = []; } else if (!(aiReadyCallbacks instanceof Array)) { var aiReadyCallbacks = []; } function aiShowIframeId(id_iframe) { jQuery("#"+id_iframe).css("visibility", "visible"); } function aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe_11); } function aiResizeIframeHeightId(height,width,id) {aiResizeIframeHeightById(id,height);}var ifrm_advanced_iframe_11 = document.getElementById("advanced_iframe_11");var hiddenTabsDoneadvanced_iframe_11 = false; function resizeCallbackadvanced_iframe_11() {}

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; }

var ai_iframe_width_advanced_iframe_12 = 0;var ai_iframe_height_advanced_iframe_12 = 0;var aiIsIe8=false;var aiOnloadScrollTop="true";var aiShowDebug=false; if (typeof aiReadyCallbacks === 'undefined') { var aiReadyCallbacks = []; } else if (!(aiReadyCallbacks instanceof Array)) { var aiReadyCallbacks = []; } function aiShowIframeId(id_iframe) { jQuery("#"+id_iframe).css("visibility", "visible"); } function aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe_12); } function aiResizeIframeHeightId(height,width,id) {aiResizeIframeHeightById(id,height);}var ifrm_advanced_iframe_12 = document.getElementById("advanced_iframe_12");var hiddenTabsDoneadvanced_iframe_12 = false; function resizeCallbackadvanced_iframe_12() {}

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