Cei 30 de Selectori CSS pe care trebuie să îi Memorezi

Vă mulțumuți doar prin a invăța selectorii id , class și descendant ? Atunci pierdeți foarte mult din flexibilitate. În timp ce mulți dintre selectorii menționati în acest articol fac parte din specificațiile CSS3 , și sunt prin urmare disponibili doar in programele browser moderne,aveti datoria de a nu le trece cu vederea.

1. *

1

* {

2

 margin: 0;

3

 padding: 0;

4

}

Pentru inceput să incepem cu cei mai evidenți înainte de a înainta spre cei mai complecși.

Simbolul stea are în vedere selectarea fiecărui element din pagină. Cei mai mulți programatori folosesc acest truc pentru a înlătura marginile și umplutura. În timp ce acest lucru este în regulă pentru testele rapide, vă sfătuiesc să nu utilizați niciodată acest truc in producție. Adaugă prea multă greutate pe browser, și nu este necesar.

Simbolul * poate fi folosit de asemenea și împreuna cu selectorii copii.

1

#container * {

2

 border: 1px solid black;

3

}

Acesta va targeta fiecare element copil al #container div. În aceeași măsură, încercați să nu folosiți această tehnică foarte mult, dacă este posibil.

Vizualizați Demonstrația

Compatibilitate

• Internet Explorer 6 +
• Firefox
• Chrome
• Safari
• Opera

2. #X

1

#container {

2

   width: 960px;

3

   margin: auto;

4

}

Prefixând simbolul diez unui selector ne va permite targetarea prin id. Aceasta este cea mai întalnită metodă,în orice caz fiți precaut cand folosiți selectorii id.

Intrebați-vă:chiar trebuie să aplic un id acestui element pentru a-l targeta ?

Selectorii id sunt rigizi și nu îngăduie reutilizarea. Pe cât posibil, întâi încercați utilizarea unui nume de tip tag, noul tip de element introdus de HTML5 sau chiar o pseoda-clasa.

Vizualizați Demonstrarea

Compitibilitate

• Internet Explorer 6 +
• Firefox
• Chrome
• Safari
• Opera

3. .X

1

.error {

2

  color: red;

3

}

Acesta este un selector tip class. Diferența dintre selectorii de tip id și class este că, în cazul celor de tip class, poți targeta mai multe elemente în același timp. Folosiții pe cei tip class cand doriți să aplicați un stil unui grup de elemente. Alternativ, folosiți id pentru a găsi acul în carul cu fân, și stilizați doar un element specific.

Vizualizați Demonstrarea

Compatibilitate

• Internet Explorer 6 +
• Firefox
• Chrome
• Safari
• Opera

4. X Y

1

li a {

2

  text-decoration: none;

3

}

Cel mai întâlnit selector este selectorul descendent. Când trebuie să fiți cât mai specific cu selectorii, folosiții pe acestia. De exemplu, dacă în loc să targetați toate tag-urile de tip anchor vreți să le targetați doar pe acelea care sunt înăuntrul unui element de tip listă neordonată ? Acesta este cazul în care vom dorii să utilizăm un selector descendent.

Pro-tip - Dacă selectorul dvs. arată ca X Y Z A B.error , atunci faceți ceva greșit. Întotdeauna întrebați-vă dacă este necesară aplicarea acelei greutați.

Vizualizați Demonstrarea

Compatibilitate

• Internet Explorer 6 +
• Firefox
• Chrome
• Safari
• Opera

5. X

1

a { color: red; }

2

ul { margin-left: 0; }

Dacă de exemplu a-ți dorii să targetați toate elementele de pe pagină de acelasi tip , in loc de id sau class ? Simplu ! Utilizați un selector de tip. Dacă doriți să selectați toate listele neordonate , folosiți ul {}.

Vizualizați Demonstrarea

Compatibilitate

• Internet Explorer 6 +
• Firefox
• Chrome
• Safari
• Opera

6. X:visited și X:link

1

a:link { color: red; }

2

a:visted { color: purple; }

Folosim pseudo-clasa :link pentru a targeta toate tag-urile tip anchor care nu au fost încă accesate.

Alternativ, folosim pseudo-clasa :visited care,după cum vă asteptați, ne permite să aplicăm un stil specific doar tag-urilor de tip anchor care au fost accesate sau vizitate.

Vizualizați Demonstrarea

Compatibilitate

• Internet Explorer 7 +
• Firefox
• Chrome
• Safari
• Opera

7. X + Y

1

ul + p {

2

   color: red;

3

}

Acesta este referit ca un selector adiacent. Va selecta doar elementul care este imediat precedat de acesta. În acest caz, doar primul paragraf după fiecare ul va avea text rosu.

Vizualizați Demonstrarea

Compatibilitate

• Internet Explorer 7 +
• Firefox
• Chrome
• Safari
• Opera

8. X > Y

1

div#container > ul {

2

  border: 1px solid black;

3

}

Diferența dintre standardul X Y și X > Y este că , cel din urmă va selecta doar copii direcți. De exemplu, considerați următoarele linii.

1

   <div id="container">

2

      <ul>

3

         <li> List Item

4

           <ul>

5

              <li> Child </li>

6

           </ul>

7

         </li>

8

         <li> List Item </li>

9

         <li> List Item </li>

10

         <li> List Item </li>

11

      </ul>

12

   </div>

Selectorul #container > ul va targeta doar ul-urile copii direcți ale div-ului cu id-ul container. Nu va targeta, ul-ul copil direct al primei li.

Din acest motiv, există beneficii din punct de vedere al performantei in folosirea acestui truc. Defapt, este recomandat in special când lucrăm cu motoare de selectori CSS de tip JavaScript.

Vizualizați Demonstrarea

Compatibilitate

• Internet Explorer 7 +
• Firefox
• Chrome
• Safari
• Opera

9. X ~ Y

1

ul ~ p {

2

   color: red;

3

}

Acest combinator rudă este similar celui X + Y cu mențiunea că este mai puțin strict. În timp ce un selector adiacent ( ul + p ) va selecta doar primul element aflat în imediata apropiere, precedat de acel selector, acesta este mult mai generalizat. Va selecta, referindu-ne la exemplul de mai sus, orice element de tip p cât timp acesta este urmat de un ul.

Vizualizați Demonstrarea

Compatibilitate

• Internet Explorer 7 +
• Firefox
• Chrome
• Safari
• Opera

10.X[title]

1

a[title] {

2

   color: green;

3

}

Este referit ca fiind un selector de atribute, in exemplul nostru de mai sus acesta va selecta doar tag-urile tip anchor care au atributul title. Tag-urile tip anchor care nu au un atribut tip title nu vor fi stilizate. Dar dacă doriți să fiți și mai specific ? Ei bine...

Vizualizați Demonstrarea

Compatibilitate

• Internet Explorer 7 +
• Firefox
• Chrome
• Safari
• Opera

11. X[href="foo"]

1

a[href="https://net.tutsplus.com"] {

2

  color: #1f6053; /* nettuts green */

3

}

Codul de mai sus va stiliza toate tag-urile tip anchor care ne redirectionează catre https://net.tutsplus.com; ele vor fi stilizate folosind culoarea noastra verde. Celelalte tag-uri anchor vor ramâne neschimbate.

Notați faptul că valoarea este trecută între ghilimele. Țineți minte acest lucru și atunci când folosiți motorul JavaScript de selectori CSS. Pe cât posibil,întotdeauna folosiți selectorii CSS3 în detrimentul metodelor neoficiale.

Acesta functionează bine,dar este rigid. Dar dacă link-ul ne redirectionează spre Nettuts+ cum ar trebui, dar calea este nettuts.com in locul adresei complete ? În acest caz putem folosi sintaxa expresiilor regulare.

Vizualizați Demonstrarea

Compatibilitate

• Internet Explorer 7 +
• Firefox
• Chrome
• Safari
• Opera

12.  X[href*="nettuts"]

1

a[href*="tuts"] {

2

  color: #1f6053; /* nettuts green */

3

}

Așa mai merge; este exact ce ne trebuie. Simbolul stea desemnează faptul că valoarea precedată va apărea undeva in valoarea atributului. Acest lucru acoperă nettuts.com, net.tutsplus.com , chiar și tutsplus.com.

Aveți în vedere faptul că acesta este o metodă largă. Dacă tag-ul anchor redirectionează spre un website ce nu aparține companiei Envato dar are șirul tuts în adresă? Când trebuie sa fiți cât mai specifici , folosiți simbolul ^ și $, pentru a vă referi la începutul ,respectiv sfârșitul unui șir.

Vizualizați Demonstrarea

Compatibilitate

• Internet Explorer 7 +
• Firefox
• Chrome
• Safari
• Opera

13. X[href^="http"]

1

a[href^="http"] {

2

   background: url(path/to/external/icon.png) no-repeat;

3

   padding-left: 10px;

4

}

V-ați pus întrebarea , cum de unele website-uri sunt capabile să adauge o iconița in dreptul link-urilor externe ? Sunt convins că ați mai văzut acest lucru înainte; ele ne atenționează că link-ul ne va direcționa spre un alt website.

Acesta este un lucru sigur privind simbolul ^. Este cel mai întâlnit în expresiile regulare ce desemnează începutul unui șir. Dacă vrem să targetăm toate tag-urile tip anchor care au atributul href ce incepe cu http , putem folosi un selector similar, utilizat in codul de mai sus.

Remarcați faptul că nu le căutem pe cele https://; acest lucru ar fi inutil, și nu le-am luat în calcul pe cele care încep cu http://.

Dar dacă am dori sa stilizăm toate tag-urile anchor care au ca legatură spre exemplu o fotografie? În acest caz, vom căuta la sfârșitul șirului.

Vizualizați Demonstrarea

Compatibilitate

• Internet Explorer 7 +
• Firefox
• Chrome
• Safari
• Opera

14. X[href$=".jpg"]

1

a[href$=".jpg"] {

2

   color: red;

3

}

Vom folosi simbolul expresiei regulare $ pentru a ne referi la sfârșitul unui șir. În acest caz vom cauta în toate tag-urile anchor care dintre ele este o legatură spre o imagine - - sau o adresă care se termină cu .jpg Țineți minte faptul că acest truc nu va funcționa pentru gif-uri sau png-uri.

Vizualizați Demonstrarea

Compatibilitate

• Internet Explorer 7 +
• Firefox
• Chrome
• Safari
• Opera

15. X[data-*="foo"]

1

a[data-filetype="image"] {

2

   color: red;

3

}

Dacă ne întoarcem la numărul 8;cum compensăm pentru celelalte tipuri de imagini : png , jpeg, jpg, gif? Putem crea mai mulți selectori cum ar fi:

1

a[href$=".jpg"],

2

a[href$=".jpeg"],

3

a[href$=".png"],

4

a[href$=".gif"] {

5

   color: red;

6

}

Dar acest lucru ar fi inutil și ineficient. O altă soluție posibilă este aceea de a utiliza atribute personalizate. Dacă adăugăm un nou atribut al nostru , data-filtertype pentru fiecare tag anchor ce face legătura cu o imagine?

1

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

În acest caz putem targeta cu ajutorul selectorilor atributelor standard doar acele anchor tag-uri.

1

a[data-filetype="image"] {

2

   color: red;

3

}

Vizualizați Demonstrarea

Compatibilitate

• Internet Explorer 7 +
• Firefox
• Chrome
• Safari
• Opera

16. X[foo~="bar"]

1

 a[data-info~="external"] {

2

   color: red;

3

}

4

5

a[data-info~="image"] {

6

   border: 1px solid black;

7

}

Acesta este unul special cu care vă puteți impresiona prieteni. Nu foarte multă lume știe despre acest truc. Simbolul tildă (~) ne permite sa targetăm un atribut ce are o listă de valori separate prin spațiu.

Înaintând cu atributul nostru personalizat de la numarul 15, putem crea unul nou , data-info ce va primi o lista separata prin spatiu care va contine orice lucru notabil. În acest caz, vom nota legăturile externe și cele spre imagini -- doar de exemplu.

1

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

În acest moment putem targeta fiecare tag ce conține fiecare dintre acele valori , folosind simbolul ~.

1

/* Target data-info attr that contains the value "external" */

2

a[data-info~="external"] {

3

   color: red;

4

}

5

6

/* And which contain the value "image" */

7

a[data-info~="image"] {

8

  border: 1px solid black;

9

}

Destul de tare , nu ?

Vizualizați Demonstrarea

Compatibilitate

• Internet Explorer 7 +
• Firefox
• Chrome
• Safari
• Opera

17. X:checked

1

input[type=radio]:checked {

2

   border: 1px solid black;

3

}

Aceasă pseudo clasă va targeta doar elementere din interfață care au fost bifate - butoanele radio sau checkbox. Este atât de simplu.

Vizualizați Demonstrarea

Compatibilitate

• Internet Explorer 9 +
• Firefox
• Chrome
• Safari
• Opera

18. X:after

Pseudo clasele before și after sunt foarte importante. În fiecare zi,se pare ca oamenii gasesc tot mai multe căi de a le folosi in diferite moduri creative. Ele pur și simplu genereaza conținut în jurul elementului.

Mulți au facut contact cu aceste clase când au descoperit trucul clear-fix.

1

.clearfix:after {

2

    content: "";

3

    display: block;

4

    clear: both;

5

    visibility: hidden;

6

    font-size: 0;

7

    height: 0;

8

    }

9

10

.clearfix { 

11

   *display: inline-block; 

12

   _height: 1%;

13

}

Acest truc utilizeaza pseudo clasa :after pentru a adauga un spatiu inainte de element mai apoi golindu-l. Este o metodă excelentă fiind considerată asul din mânecă,în special în cazul în care metoda overflow: hidden; nu este posibilă.

Pentru o altă modalitate creativă de a o folosi, vă puteți referi la micul meu ghid pentru creare a umbrelor.

În conformitate cu specificațiile selectorilor CSS3, ar trebui să folosiți sintaxa pseudo element ::. În orice caz, pentru a păstra compatibilitatea, se permite și folosirea a două puncte. Defapt, este mai firesc folosirea celor două puncte în proiectele dvs.

Compatibilitate

• Internet explorer 8 +
• Firefox
• Chrome
• Safari
• Opera

19. X:hover

1

div:hover {

2

  background: #e3e3e3;

3

}

O, haide. Sigur îl știți și pe acesta. Termenul oficial pentru acesta este user action pseudo class. Suna foarte confuz,dar defapt nu este. Vreți să aplicați un stil unui element atunci cand utilizatorul își poziționează cursorul peste acesta ? Acest selector ne va ajuta să îndeplinim această misiune.

Țineți minte totuși ca versiunile mai vechi ale Internet Explorer nu raspund când pseudo clasa :hover este aplicată oricărui element inafară de un tag anchor.

În cele mai multe cazuri vei folosi acest selector când aplicați,de exemplu, un border-bottom unui anchor tag,când utilizatorul pozitionează cursorul peste el.

1

a:hover {

2

 border-bottom: 1px solid black;

3

}

Pro-tip - border-bottom: 1px solid block; arată mai bine ca text-decoration: underline;.

Compatibilitate

• Internet Explorer 6 + ( :hover trebuie aplicat unui element anchor)
• Firefox
• Chrome
• Safari
• Opera

20. X:not(selector)

1

div:not(#container) {

2

   color: blue;

3

}

Pseudo clasa negation este deasemenea foarte folositoare. Să presupunem că vrem sa selectăm toare div-urile, inafară de cel cu id-ul container. Codul de mai sus se ocupă de acest lucru perfect.

Sau, dacă vrem să selectăm fiecare element (nu este sugerat) inafară de paragrafe, putem face acest lucru:

1

*:not(p) {

2

  color: green;

3

}

Vizualizați Demonstrarea

Compatibilitate

• Internet Explorer 9 +
• Firefox
• Chrome
• Safari
• Opera

21. X::pseudoElement

1

p::first-line {

2

   font-weight: bold;

3

   font-size: 1.2em;

4

}

Putem folosi pseudo elementele (desemnate prin ::) pentru a stiliza fragmente dintr-un element, cum ar fi prima linie sau prima literă. Țineți minte că acestea trebuie aplicate unor element tip block.

Un pseudo-element este compus din: ::

Selectarea primei litere a unui paragraf

1

p::first-letter {

2

   float: left;

3

   font-size: 2em;

4

   font-weight: bold;

5

   font-family: cursive;

6

   padding-right: 2px;

7

}

Acest cod va găsi toate paragrafele din pagină, si va targeta doar prima literă a acestora.

Aceasta metodă este folosită in general pentru a stiliza prima litera a unui articol la fel ca în cazul articolelor unui ziar.

Selectarea primei linii a unui paragraf

1

p::first-line {

2

   font-weight: bold;

3

   font-size: 1.2em;

4

}

Similar,pseudo-elementul ::first-line va stiliza doar prima linie a elementului.

"Pentru compatibilitatea cu foile de stil existente,se acceptă și folosirea notației cu o singură pereche de două puncte introdusă în CSS1 și 2 (:first-line , respectiv, :first-letter, :before și :after). Această compatibilitate nu există pentru noile pseudo-elemente introduse in această specificație." Sursă

Vizualizați Demonstrare

Compatibilitate

• Internet Explorer 6 +
• Firefox
• Chrome
• Safari
• Opera

22. X:nth-child(n)

1

li:nth-child(3) {

2

   color: red;

3

}

Vă amintiți zilele în care nu avem cum să targetăm elemente specifice dintr-o multime ? Pseudo clasa nth-child rezolvă această problemă!

Notați faptul ca nth-child acceptă un parametru de tio număr intreg, înafară de zero. Dacă doriți să selectați al 2-lea element dintr-o listă , folosiși li:nth-child(2).

Putem folosi această metodă și pentru a selecta un grup de elemente copii. De exemplu, putem folosi li:nth-child(4n) pentru a selecta un element odata la fiecare 4 dintr-o listă.

Vizualizați Demonstrarea

Compatibilitate

• Internet Explorer 9 +
• Firefox 3.5+
• Chrome
• Safari

23. X:nth-last-child(n)

1

li:nth-last-child(2) {

2

   color: red;

3

}

Dacă am avea o lista imensă de elemente intr-un ul , si vrem să targetăm doar ultimele 3 elemente ? În loc de li:nth-child(397) , putem folosi pseudo clasa nth-last-child.

Această tehnică lucreză aproape identic ca cea de la numărul 16, difereța fiind ca incepe de la sfârșitul colecției de elemente.

Vizualizați Demonstrarea

Compatibilitate

• Internet Explorer 9 +
• Firefox 3.5+
• Chrome
• Safari
• Opera

24. X:nth-of-type(n)

1

ul:nth-of-type(3) {

2

   border: 1px solid black;

3

}

Vor fi momente cândvei fi nevoit să targetezi elemente dupa tipul acestora, și nu dupa descendent.

Imaginați-vă niste linii de cod ce conține cinci liste neordonate. Dacă doriți să stilizați doar al 3-lea ul, iar acesta nu are un id unic,puteți folosi pseudo clasa nth-of-type(n). În codul de mai sus, doar al 3-lei ul va avea bordură in jurul său.

Vizualizați Demonstrarea

Compatibilitate

• Internet Explorer 9 +
• Firefox 3.5+
• Chrome
• Safari

25. X:nth-last-of-type(n)

1

ul:nth-last-of-type(3) {

2

   border: 1px solid black;

3

}

Și pentru a rămâne consecvenți, putem folosi deasemenea nth-last-of-type pentru a incepe de la sfârșitul listei de selectori și a targeta elementul dorit.

Compatibilitate

• Internet Explorer 9 +
• Firefox 3.5+
• Chrome
• Safari
• Opera

6. X:first-child

1

ul li:first-child {

2

   border-top: none;

3

}

Această pseudo clasă structurală ne permite sa targetăm doar primul copil al unui element. Vom folsi acest selector pentru a sterge bordura primului si ultimului element din listă.

De exemplu, să spunem că avem o listă,și fiecare element are border-top și border-bottom. Dar, facând acest lucru, primul si ultimul element din listă vor arată puțin ciudat.

Mulți designeri aplică clasele first și last pentru a compensa. Dar, noi putem folosi aceste pseudo clase.

Vizualizați Demonstratia

Compatibilitate

• Internet Explorer 7 +
• Firefox
• Chrome
• Safari
• Opera

27. X:last-child

1

ul > li:last-child {

2

   color: green;

3

}

Opusul lui first-child este, last-child,care va targeta ultimul element din lista părintelui.

Exemplu

Să construim un simplu exemplu pentru a demonstra o posibilă întrebuințare a acestor clase. Vom creea o lista stilizată.

Cod

1

  <ul>

2

     <li> List Item </li>

3

     <li> List Item </li>

4

     <li> List Item </li>

5

  </ul>

Nimic special pană aici; doar o simplă lista.

CSS

1

ul {

2

 width: 200px;

3

 background: #292929;

4

 color: white;

5

 list-style: none;

6

 padding-left: 0;

7

}

8

9

li {

10

 padding: 10px;

11

 border-bottom: 1px solid black;

12

 border-top: 1px solid #3c3c3c;

13

}

Acest stil va seta culoarea fundalului, va sterge marginea impusă de browser ul-ului, si va aplica borduri pentru fiecare li pentru a amplifica adâncimea.

Pentru a adauga adâncime listelor tale, aplică border-buttom pentru fiecare li cu o nuanță sau două mai inchise decat culoarea de fundal a acestor li-uri. În continuare, vom aplica border-top impreună cu cateva nuanțe mai deschise.

Singura problemă,descrisă de imaginea de mai sus este aceea că bordura va fi aplicată și in partea de sus respectiv cea de jos a listei neordonate - arată puțin ciudat. Vom rezolva această problemă folosind pseudo-clasele :first-child și :last-child.

1

li:first-child {

2

    border-top: none;

3

}

4

5

li:last-child {

6

   border-bottom: none;

7

}

Așa mai merge; acum am rezolvat!

Vizualizați Demonstratia

Compatibilitate

• Internet Explorer 9 +
• Firefox
• Chrome
• Safari
• Opera

Yep - Internet Explorer 8 suportă :first-child , dar nu și :last-child. Go figure.

28. X:only-child

1

div p:only-child {

2

   color: red;

3

}

Sincer nu cred ca vă veți găsi prea des în situația in care veți fi nevoit să folosiți pseudo-clasa only-child. Cu toate acestea ea există daca aveți nevoie de ea.

Aceasta permite targetarea elementelor care sunt singurii copii ale lor. De exemplu, dacă ne referim la codul de mai sus, doar paragraful care este singurul copil al div-ului va fi colorat in roșu.

Să analizăm codul următor.

1

<div><p> My paragraph here. </p></div>

2

3

<div>

4

   <p> Two paragraphs total. </p>

5

   <p> Two paragraphs total. </p>

6

</div>

În acest caz, al 2-leadiv nu va fi targetat, ci doar primul div. Cât de curând aplicați mai mult de un copil unui element, pseudo clasa only-child va inceta să își mai facă efectul.

Vizualizați Demonstrarea

Compatibilitate

• Internet Explorer 9 +
• Firefox
• Chrome
• Safari
• Opera

29. X:only-of-type

1

li:only-of-type {

2

   font-weight: bold;

3

}

Această pseudo clasă structurală poate fi folosită în cateva moduri foarte inteligente. Va targeta elementele care nu au nici o rudă în domeniul părintelui. Ca de exemplu, să selectăm toate ul-urile care au doar un singur element în listă.

În primul rând să ne intrebăm, cum am putea duce la bun sfârșit această cerința ? Putem selecta ul li , dar, aceasta va selecta toate elementele dintr-o listă. Singura soluție este de a folosi only-of-type.

1

ul > li:only-of-type {

2

   font-weight: bold;

3

}

Vizualizați Demonstratia

Compatibilitate

• Internet Explorer 9 +
• Firefox 3.5+
• Chrome
• Safari
• Opera

30. X:first-of-type

Pseudo clasa first-of-type ne permite să selectăm prima rudă de același tip ca elementul nostru.

Un test

Pentru a ințelege mai bine , să facem un test. Copiați următorul cod in editorul vostru de text preferat.

1

<div>

2

   <p> My paragraph here. </p>

3

   <ul>

4

      <li> List Item 1 </li>

5

      <li> List Item 2 </li>

6

   </ul>

7

8

   <ul>

9

      <li> List Item 3 </li>

10

      <li> List Item 4 </li>

11

   </ul>   

12

</div>

Acum, fară să citiți în continuare, încercați să vă dați seama cum să targetați doar "List Item 2". Când a-ți reușit (sau v-ați dat batut), reveniți aici.

Soluția 1

Există o varietate de metode de a rezolva acest test. Vom vedea o parte dintre ele aici. Să incepem prin a folosi first-of-type.

1

ul:first-of-type > li:nth-child(2) {

2

   font-weight: bold;

3

}

Codul acesta spune pe scurt, "găsește prima listă neordonată din pagină, apoi găsește doar cei mai apropiați copii, care sunt sub-elementele listei. În continuare, filtrează rezultatele si afișează doar elementele pare din acel set.

Soluția 2

Altă opțiune este să folosim selectorul adiacent.

1

p + ul li:last-child {

2

   font-weight: bold;

3

}

În acest scenariu, vom găsi ul-ul care urmează imediat dupa tag-ul p, apoi găsim ultimul copil al acelui element.

Soluția 3

Pe cât de neplăcuți putem fi cu acesti selectori , pe atât putem fi de jucăuși.

1

ul:first-of-type li:nth-last-child(1) {

2

   font-weight: bold;   

3

}

De această dată, vom selecta primul ul din pagină, apoi vom găsi primul element din listă,dar pornind de la sfârșit! :)

Vizualizați Demonstrarea

Compatibilitate

• Internet Explorer 9 +
• Firefox 3.5+
• Chrome
• Safari
• Opera

Concluzie

Daca vreți să compensați pentru browserele mai vechi, cum ar fi Internet Explorer, va trebui sa fiți foarte atenți când folosiți acești selectori noi. Dar, vă rog nu lasați acest lucru să vă oprească din a le învăța. Vă veți face un mare defavor. Fiți siguri că vă referiți aici pentru o listă de compatibilitate a browserelor. Alternativ, puteți folosi excelentul script al lui Dean Edward IE9.js pentru a implementa acesti selectori browserelor mai vechi.

În al 2-lea rând,când lucrați cu librării JavaScript, cum ar fi popularul JQuery, întotdeauna încercați să folosiți selectorii nativi ai CSS3 în detrimentul metodelor/selectorilor particulari ai acestor librării pe cât posibil. Vă va face codul mai rapid, deoarece motorul selectorilor poate fi folosit de browser nativ in momentul analizării.

Vă muțumesc pentru lectură, si sper că ați învățat un truc sau două!