29 CSS-választó, amit feltétlenül ismerned kell I. rész
2024-03-18 03:03
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">Demo: https://jsfiddle.net/L9pn4w3b/
<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>
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 />Demo: https://jsfiddle.net/0xw9s8hv/
<a href="http://jsfiddle.net">Ez itt nem piros</a>
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ó.