Blog

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

2018-06-02 12:06

CSS választók

Cikkem a CSS választók első részének folytatása. 

16. Szülőelem data-info attribútumának értéke tartalmazza

a[data-info~="fruits"] {
color: green;
}

Többnyire hivatkozásoknál a HTML kódban megadhatjuk az adat típusát. A CSS-választó a kapcsos zárójelben a ~ jellel szabályt állít a data-info attribútummal ellátott tagoknak. Szülőelem(a) összes olyan data-info attrubútumát keresd([data-info]), melynek értéke tartamazza a fruits karaktereket (~="fruits").
Pl.:

<a href="img/alma.jpg" data-info="image fruits">Nézd meg a szabályosan permetezett almafa termését! (Piros link)</a> 
<a href="img/repa.jpg" data-info="image vegetables">Nézd meg ezt a répát! (Nem piros link)</a>
Demo: https://jsfiddle.net/mj219hek/

17. Szülőelem after pszudeó eleme

.clearfix:after {
content:" ";
clear:both;
}

Ezt a pszuedó elemet többnyire akkor használjuk, amikor egy szekció lezárásakor szeretnénk tiszta lappal indítani, eltörölve a float-olást, az egymás mellé rendezett gridek szabályozását, de felhasználási módjai folyamatosan növekednek.

18. Szülőelem hover pszuedó eleme

a {
color: blue;
}

a:hover {
color: red;
}

Azt hiszem, mindenki ismeri ezt a választót. A :hover taggal az előtte álló elem azon állapotát szabályozzuk, amikor rávisszük az egeret.

<a href="#"> Ez a link alapból kék színű, de ha ráviszed az egeret...</a>

Demo: https://jsfiddle.net/begfk8tx/

19. Szülőelem not pszuedó eleme

p:not(.side-p) {
color:pink;
}

Ha szeretnénk egy többször használt elemre valamilyen szabályt használni, és vannak kivételek, amikor viszont nem szeretnénk használni, jól jön a :not pszuedó elem. Például szeretnénk, ha minden bekezdés rózsaszín lenne, kivéve azok, amelyek side-p class-szal rendelkeznek.

<section>
<p> Ez a bekezdés rózsaszín </p>
<p> Ez a bekezdés is rózsaszín </p>
</section>
<aside>
<p class="side-p"> Ez a bekezdés nem rózsaszín </p>
</aside>
Demo: https://jsfiddle.net/eqshxm7b/

20. Szülőelem első betűje és sora

p::first-line {
color: pink;
}

p::first-letter {
font-size:50px;
}

Ez a pszuedó elem attól rendhagyó, hogy az elem után nem egy, hanem két kettőspontot kell tenni. A first-letter pszuedóval iniciálét készíthetünk, de szabályozhatjuk az egész első sort is.

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do Nettuts tempor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do Nettuts tempor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do Nettuts tempor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do Nettuts tempor. </p>

Demo: https://jsfiddle.net/p2knLnwc/

21. X-edik HTML tag

li:nth-child(4) {
color:blue;
}

Ha van egy ismétlődő HTML elemünk (pl.: egy lista egyes elemei), megmondhatjuk a CSS-nek, hogy x-edik tagnál vezessen be egy új szabályt.

<ul>
<li> Ez nem kék </li>
<li> Ez nem kék </li>
<li> Ez nem kék </li>
<li> Ez bizony kék </li>
<li> Ez nem kék </li>
</ul>

Demo: https://jsfiddle.net/qk6tfzpq/

22. Hátulról az x-edik HTML tag

li:nth-last-child(3) {
color:blue;
}

Ha előlről tud számolni a CSS, hátulról miért ne tudna? Előző példánknál maradva a felsorolás azon elemeinek írunk szabályt, amelyek hátulról a 3. helyen állnak.

<ul>
<li> Ez nem kék </li>
<li> Ez nem kék </li>
<li> Ez nem kék </li>
<li> Ez bizony kék </li>
<li> Ez nem kék </li>
<li> Ez nem kék </li>
</ul>
Demo: https://jsfiddle.net/nupvv58c/

23. X-edik HTML tag összes gyermeke

ul:nth-of-type(2) {
color:red;
}

Ez a CSS-választó hasonlóan működik az előzőekhez képest. A különbség az öröklődésben van, ez a pszuedó tag ugyanis a szülőelem összes gyermekére vonatkozik.

<ul>
<li> Ez nem piros </li>
<li> Ez nem piros </li>
</ul>
<ul>
<li> Ez piros </li>
<li> Ez piros </li>
</ul>

Demo: https://jsfiddle.net/gfojvzwu/

24. Hátulról az X-edik HTML tag összes gyermeke

ul:nth-last-of-type(2) {
color:red;
}

Akár az nth-last-child esetében, itt is hátulról indul a számolás. Példánkban az ul összes elemét szabályoztuk, amennyiben az ul hátulról a 2. helyen áll.

<ul>
<li> Ez piros </li>
<li> Ez piros </li>
</ul>
<ul>
<li> Ez nem piros </li>
<li> Ez nem piros </li>
</ul>

Demo: https://jsfiddle.net/kjv0jca9/

25. Szülőelem első gyermeke

ul li:first-child {
color:red;
}

Ha van egy listánk, ezzel a CSS-választóval megadhatjuk, hogy a lista első eleme legyen más.

<ul>
<li> Ez piros </li>
<li> Ez nem piros </li>
<li> Ez nem piros </li>
<li> Ez nem piros </li>
</ul>

Demo: https://jsfiddle.net/ef7y0mj6/

26. Szülőelem utolsó gyermeke

ul > li:last-child {
color: red;
}

Ez a pszuedó elem az előző párja: a szülőelemnek a gyermekelemei közül az utolsóra vonatkozik.

<ul>
<li> Ez nem piros </li>
<li> Ez nem piros </li>
<li> Ez nem piros </li>
<li> Ez piros </li>
</ul>

Demo: https://jsfiddle.net/qu447hfb/

27. Szülőelem gyermeke, ha etyke :)

article p:only-child {

color:red;

}

Ez a pszuedó elem arra való, hogy szabályozni lehessen azokat a gyermekelemeket, amelyek egyedül állnak a szülőelemben, tehát nincs belőlük több példány.

<article>
<p> Itt piros </p>
</article>

<article>
<p> Itt nem piros, mert </p>
<p> Egynél több bekezdés van </p>
</article>

Demo: https://jsfiddle.net/cwp86u1f/

28. Szülőelem gyermektípusa, ha nem ismétlődik

li:only-of-type {
color: red;
}

Ezzel a pszuedó elemmel a típusok "egyfélesége" szerint írhatunk szabályt. Például egy listában, amelyben egyetlen elem van.

<ul>
<li>Itt piros </li>
</ul>

<ul>
<li> Itt nem piros </li>
<li> Itt nem piros </li>
</ul>

Demo:https://jsfiddle.net/v0excrrL/

29. Szülőelem első példánya

ul:first-of-type {
color:red;
}

A listák közül kiválasztjuk az elsőt, majd minden elemére kiterjesztjük a szabályt.

<ul>
<li> Ez piros. </li>
<li> Ez piros. </li>
</ul>
 <ul>
<li> Ez nem piros. </li>
<li> Ez nem piros. </li>
</ul>

Demo: https://jsfiddle.net/cyfaga0y/