Blog

29 CSS-választó, amit feltétlenül ismerned kell I. rész

2018-06-02 12:06

CSS választók

A CSS választókat azért érdemes minél jobban megismerni, mert annál specifikusabban tudunk meghatározni egy HTML szerkezetre vonatkozó szabályt.

Amikor definiálunk egy stílust, elsősorban azt kell meghatároznunk, hogy mire vonatkozik a megadott szabály. Az egyes HTML elemek közötti kapcsolatot jelentik a CSS-választók.

1. Összes HTML-elem

* {
    margin:0;
}

A csillag jelöli az összes HTML-elemet, így ez egy általános érvényű (globális) szabályt fog képezni a honlapodon.

2. Adott azonosítójú osztály

#mydiv {
    height:300px;
    background:#000;
    color:#FFF;
}

Arra a HTML-elemre vonatkozik, amelyikhez az id attribútumot rendelted:

<div id="mydiv">
    Ez itt egy fekete doboz fehér betűkkel.
</div>

Demo: https://jsfiddle.net/bhsqtu4y/

3. Adott osztály

.mydivs {
    height:300px;
    background:#000;
    color:#FFF;
}

Ebben az esetben azokat a html tageket szabályozod, amelyikhez a megadott nevű class-t rendelted:


<div class="mydivs">
    Ez itt egy fekete doboz fehér betűkkel.
</div>

Demo: https://jsfiddle.net/yeowxyc0/

4. Szülőelem közvetlen és közvetett gyermeke

.mydivs a {
    color:red;
    text-decoration: underline;
}

Ha két elem közé semmilyen karaktert nem teszel, az annyit tesz, mintha azt mondandád: "valaminek az összes valamije", esetünkben a mydivs classnak az összes hivatkozása. Azt fontos kiemelni, hogy abban az esetben is működik, ha nem követlenül a mydivs alatt van az "a" tag.

<div class="mydivs">
    <a href="#"> Ez itt piros </a><br />
    <a href="#"> Ez itt piros </a>
<div class=”cont”>
    <a href="#"> Ez is piros </a>
</div>
    <p> Lorem ipsum </p>
</div>
<a href="#"> Ez itt nem piros </a>

Demo: https://jsfiddle.net/czykbh1y/

5. Szülőelem közvetlen gyermeke

.mydivs > a {
    color:red;
    text-decoration: underline;
}

Abban különbözik az előző szabálytól, hogy a szülőosztály - a relációsjel bal oldala - közvetlen gyermekosztályára - a relációsjel jobb oldalára - vonatkozik a szabály, azaz ha a szülőoszályon belül beékelünk egy plusz divet, és abba tesszük bele a gyermekosztályt, arra már nem fog kiterjedni a CSS szabálya.

<div class="mydivs">
    <a href="#"> Ez itt piros </a><br />
    <a href="#"> Ez itt piros </a>
<div class=”cont”>
    <a href="#"> Ez itt nem piros </a>
</div>
    <p> Lorem ipsum </p>
</div>
<a href="#"> Ez itt nem piros </a>

Demo: https://jsfiddle.net/6fj7k3z4/


6. Szülőelem összes gyermeke

.mydivs * {
    height:300px;
    background:#000;
    color:#FFF;
}

Ahogy a 4. példában is, itt sincs az elemek között írásjel, ezért következetesen az osztály (class) összes gyermekére (child) vonatkozik a szabály, az osztályon belül minden egyes HTML kódra.

<div class="mydivs">
    <a href="#"> Link 1 </a><br />
    <a href="#"> Link 2 </a>
    <p> Lorem ipsum </p>
</div>

Demo: https://jsfiddle.net/kc0wpLq0/

7. Hivatkozás állapotai

a:link {
    color:blue;
}

a:visited {
    color:purple;
}

a:hover {
    color:yellow;
}

A három szabály abban hasonlít, hogy az "a" taghoz kettősponttal kapcsolódik a meghatározás. Ezt pszuedó elemnek hívjuk, és az előtte levő elem valamilyen állapotát jelöli. Sokszor használjuk a hivatkozások egyes állapotainak meghatározására. Az a:link azokra a hivatkozásokra vonatkozik, amelyekre még nem kattintott a felhasználó, míg a látogatott linkeket az a:visited pszuedó elemmel azonosíthatjuk. Az a:hover pedig azt az állapotot jelenti, amikor a felhasználó a linkre húzza a kurzort.  


<a href="#"> Link 1 </a><br />
<a href="#"> Link 2 </a>

Demo: https://jsfiddle.net/skjt4xsj/

8. Szülőelem után közvetlenül egy gyermekosztály

.mydivs + p {
    color:red;
}

A plusz jel az adott HTML tagon kívül közvetlenül megjelenő tagra vonatkozik. Csak abban az esetben lép érvénybe, ha közvetlenül a lezárt kód után következik a plusz jel jobb oldalára írt elem.

<div class="mydivs">
    <p> Itt még nem piros.</p>
    <p> Itt még nem piros.</p>
</div>

<p> Itt piros.</p>
<p> Itt már nem piros.</p>

Demo: https://jsfiddle.net/Lmwqwtpv/

9. Szülőelem után közvetlenül végtelen gyermekosztály

.mydivs ~ p {
    color:red;
}

Abban különbözik az előző szabálytól, hogy a szülőosztály után végtelen mennyiségű gyerekosztályra érvényes az itt megadott érték, de ebben az esetben is közvetlenül a lezárt HTML tag után kell következnie a gyermekosztálynak - jelen esetben a "p" tagnak. 
<div class="mydivs">
    <p> Itt még nem piros.</p>
    <p> Itt még nem piros.</p>
</div>

<p> Itt piros.</p>
<p> Itt még mindig piros.</p>
Demo: https://jsfiddle.net/L9pn4w3b/

10. Szülőelemnek létezik az adott attribútuma

a[title] {
    color:red;
    text-decoration: underline;
}

A kapcsoszárójelbe írt elem azt deklarálja, hogy csak a szabály csak az osztálynak a "title" attibútummal ellátott tagjaira vonatkozik, azaz ha egy HTML hivatkozást title érték nélkül tüntetünk fel, arra nem lesz hatályos a fenti CSS szabály.


<a href="http://panni.turnhauser.hu" title="Turnhauser Panni weboldala">Ez itt piros</a><br />
<a href="http://jsfiddle.net">Ez itt nem piros</a>
Demo: https://jsfiddle.net/0xw9s8hv/

11. Szülőelem attribútuma egyenlő

a[href="http://panni.turnhauser.hu"] {
    color:red;
    text-decoration: underline;
}

Megadhatjuk az attribútumnak átadott értéket is, így bizonyosak lehetünk benne, hogy nem azokra a HTML elemekre fog vonatkozni a CSS szabály, amely rendelkezk az adott attribútummal, hanem arra, amely a megadott oldalra hivatkozik (de persze ez nem csak a hivatkozások esetében működik.)


<a href="http://panni.turnhauser.hu" title="Turnhauser Panni weboldala">Ez itt piros</a><br />
<a href="http://jsfiddle.net" title="Jsfiddle">Ez itt nem piros</a>

Demo: https://jsfiddle.net/0Lrah9jp/

12. Szülőelem attribútuma tartalmazza

a[href*="panni"] {
    color:red;
    text-decoration: underline;
}

Abban különbözik az előző szabálytól, hogy nem kell pontosan megadni az átadott értékét az attribútumnak, elég, ha csak egy részét adjuk meg.

<a href="http://panni.turnhauser.hu" title="Turnhauser Panni weboldala">Ez itt piros</a><br />
<a href="http://turnhauser.hu/panni" title="Turnhauser Panni weboldala">Ez itt piros</a><br />
<a href="http://jsfiddle.net" title="Jsfiddle">Ez itt nem piros</a>

Demo: https://jsfiddle.net/tzvfpz5n/

13. Szülőelem attrubútumának értéke kezdődjön...

div[class^="my"] {
    height:300px;
    background:#000;
    color:#FFF;
}

Az előző szabályhoz képest az a különbség ebben a CSS-választóban, hogy a szülőelemnek az attribútumának az értékének kifejezetten az első karaktereiben keres, azaz jelen esetben az összes div közül azokat keresi meg, amelyek "my" szóval kezdődnek.

<div class="div1">Erre nem vonatkozik a szabály</div>
<div class="divmy">Erre nem vonatkozik a szabály</div>
<div class="mydiv">Erre vonatkozik a szabály</div>
<div class="my">Erre vonatkozik a szabály</div>

Demo: https://jsfiddle.net/92jdexew/

14. Szülőelem attrubútumának értéke végződjön...

div[class$="s"] {
    height:300px;
    background:#000;
    color:#FFF;
}

Az előző szabályhoz képest az a különbség ebben a CSS-választóban, hogy a szülőelemnek az attribútumának az értékének kifejezetten az utolsó karaktereiben keres, azaz jelen esetben az összes div közül azokat keresi meg, amelyek "s" betűvel végződnek.

<div class="div1">Erre nem vonatkozik a szabály</div>
<div class="divmy">Erre nem vonatkozik a szabály</div>
<div class="mydivs">Erre vonatkozik a szabály</div>
<div class="mys">Erre vonatkozik a szabály</div>

Demo: https://jsfiddle.net/94Lm47wj/

15. Szülőelem megadott típusa

a[data-filetype="image"] {
    color: red;
    text-decoration:underline;
}

Amennyiben a HTML elemnek megadjuk, hogy a típusa milyen, a CSS választóban hivatkozhatunk erre a típusra. Példámban a kép típusú hivatkozásokat választottam. Fontos, hogy nem amiatt tudja a képtípust a CSS választó, hogy ilyen kiterjesztésű a hivatkozás, hanem mert a HTML tagnak átadtuk ezt az értéket!

<a href="banana.jpg" data-filetype="image">Ez piros</a><br />
<a href="banana.gif" data-filetype="image">Ez piros</a><br />
<a href="banana.png" data-filetype="image">Ez piros</a><br />
<a href="banana.tif" data-filetype="image">Ez piros</a><br />
<a href="banana.pdf">Ez nem piros</a>

Demo: https://jsfiddle.net/hkbuvm0t/

A cikk folytatása itt található.