30 CSS Selectors pentru o viata mai usoara. Partea II

16. CSS Selector [foo~="bar"]
a[data-info~="external"] { 
    color: red; 
} 
  
a[data-info~="image"] { 
    border: 1px solid black; 
}
Acest selector este unul mai special, care cu siguranta o sa va impresioneze prietenii :). Nu prea multi web developeri stiu de acest truc. Tilda (~) ne permite sa vizam un atribut care are o lista de valori separata prin spatiu. Daca ne vom conduce dupa selectorul 15 descris in articolul precedent., putem crea un atribut personal, data-info de exemplu, care ne poate avea valori separate prin spatiu. In acest caz vom face un set de link-uri externe catre imagini, doar pentru exemplu.

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

Avind acest cod HTML, putem sa vizam orice tag care are oricare dintre aceste valori, utilizind (~).
a[data-info~="external"] { 
    color: red; 
} 
  
a[data-info~="image"] { 
    border: 1px solid black; 
}
Browser Compatibility

• IE 9+
• Firefox
• Google Chrome
• Safari
• Opera

17. CSS Selector checked
input[type=radio]:checked { 
    border: 1px solid black; 
} 
Aceasta pseudo-clasa va formata un element din interfata utilizatorului care a fost checked (activat), cum ar fi un HTML radio button sau HTML checkbox. Destul de simplu.

Browser Compatibility

• IE 9+
• Firefox
• Google Chrome
• Safari
• Opera

18. CSS Selector after
Pseudo elementele before si after sunt destul de stranii. In fiecare zi, web developerii gasesc noi modalitati de intrebuintare efectiva a acestor selectore. Ele simplu genereaza content in jurul elementului selectat. Multe au fost introduse spre aceste clase cind au intilnit clear-fix hack.
.clearfix:after { 
     content: ""; 
     display: block; 
     clear: both; 
     visibility: hidden; 
     font-size: 0; 
     height: 0; 
} 
  
.clearfix { 
    *display: inline-block; 
    _height: 1%; 
} 
Acest hack foloseste :after pentru a aduaga un spatiu dupa element, iar apoi pentru al sterge. Este un truc bun in cazul cind metoda overflow:hidden nu este posibil de aplicat.

Browser Compatibility

• IE 8+
• Firefox
• Google Chrome
• Safari
• Opera

19. CSS Selector hover
div:hover { 
   background: #e3e3e3; 
}
Cu siguranta stiati de el. Termenul oficial este: user action pseudo class. Suna cam confuz, dar in realitate este destul de simplu. Daca doriti sa aplicati un stil CSS atunci cind utilizatorul duce mouse pe un HTML element, cu hover puteti sa faceti acest lucru. De exemplu pentru a aplica un un border-bottom unei HTML ancore atunci cind userul duce mouse deasupra, e suficient de a scrie urmatorul cod:
a:hover { 
  border-bottom: 1px solid black; 
}
Browser Compatibility

• IE 6+(in IE6 :hover trebuie sa fie folosit doar pentru HTML ancore!)
• Firefox
• Google Chrome
• Safari
• Opera

20. CSS Selector not (negatie) 

div:not(#container) { 
   color: blue; 
} 

Pseudo clasa negatie este foarte ajutatoare in cazuri particulare. Sa spunem ca e nevoie de a selecta toate div-urile dintr-un HTML template in afara de div-ul care are ID="container". Fragmentul de cod de mai sus ne ajuta sa facem acest lucru.

Sau, dorim sa selectionam toate elementele unice din HTML template, in afara de tag-urile <p>:
*:not(p) { 
   color: green; 
}

Browser Compatibility

• IE 9+
• Firefox
• Google Chrome
• Safari
• Opera

21. CSS Selector ::pseudoElement
p::first-line { 
    font-weight: bold; 
    font-size: 1.2em; 
}
Putem utiliza pseudo elemente (::) pentru a stiliza fragmente a unui element din pagina, cum ar fi prima linie dintr-un paragraf.
Browser Compatibility

• IE 6+
• Firefox
• Google Chrome
• Safari
• Opera

22. CSS Selector nth-child(n)
li:nth-child(3) { 
   color: red; 
}
Va mai aduceti aminte zilele cind ne intrebam cum de selectat un element intr-o lista? Ei bine, selectorul nth-child rezolva aceasta problema. De notat ca nth-child accepta ca parametru un numar de tip integer. Pentru a selecta al doilea element din lista folosim li:nth-child(2).
Se poate de utilizat in modul in care sa selectam un numar variabil de elemente dintr-o lista :). Pentru a alege fiecare al 4-lea element e nevoie de scris li:nth-child(4n).
Browser Compatibility

• IE 9+
• Firefox 3.5+
• Google Chrome
• Safari
• Opera

23. CSS Selector nth-last-child(n)

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

Pentru cazurile cind avem o lista enorma de elemente intr-un ul iar noi avem nevoie sa alegem al treilea element de la urma ne vine in ajutor nth-last-child. In loc sa scriem li:nth-child(397), putem sa scrim li:nth-last-child(3) (lista noastra are 400 elemente).
Browser Compatibility

• IE 9+
• Firefox 3.5+
  
• Google Chrome
• Safari
• Opera

24. CSS Selector nth-of-type(n)
ul:nth-of-type(3) { 
    border: 1px solid black; 
}
Sunt momente cind selectorii de mai sus nu putem sa-i folosim. De exemplu avem un template HTML in care se contin 5 liste neordonate ul iar noi dorim sa formatam al 3-lea ul.In CSS exemplul de mai sus e demonstrat cum de adaugat CSS border pentru al treilea HTML ul din template.

Browser Compatibility

• IE 9+
• Firefox 3.5+
  
• Google Chrome
• Safari
• Opera

25. CSS Selector nth-last-of-type(n)
ul:nth-last-of-type(3) { 
    border: 1px solid black; 
}
Si pentru a adauga un selector care functioneaza invers celui precedent, avem nth-last-of-type.

Browser Compatibility

• IE 9+
• Firefox 3.5+
  
• Google Chrome
• Safari
• Opera

26. CSS Selector first-child
ul li:first-child { 
    border-top: none; 
}
Aceasta pseudo clasa structurala ne permite sa vizam numai primul copil al elementului dorit. In CSS exemplul scris in antet, am aratat cum de sters border-top pentru primul item din lista.
Browser Compatibility

• IE 9+
• Firefox 3.5+
  
• Google Chrome
• Safari
• Opera

27. CSS Selector last-child
ul > li:last-child { 
    color: green; 
}
Spre deosebire de first-child, last-child va viza doar ultimul element al elementului parinte.

Browser Compatibility

• IE 9+
• Firefox
• Google Chrome
• Safari
• Opera

28. CSS Selector only-child
div p:only-child { 
    color: red; 
}
Sincer, nu cred ca prea multi dintre noi o sa gaseasca intrebuintare acestei pseudo clase. Cu toate acestea o descriu, poate cuiva o sa ii fie de ajutor.
Deci, only-child, permite sa selectam elementele care sunt UNICUL copil al printelui sau. In cazul nostru, va stiliza doar paragrafele p, care sunt unicii copii ai elementului div din HTML template.
Browser Compatibility

• IE 9+
• Firefox
• Google Chrome
• Safari
• Opera

 29. CSS Selector only-of-type

li:only-of-type { 
    font-weight: bold; 
}

Aceasta pseudo clasa CSS poate fi folosita in citeva moduri. Va viza elementele care nu au "frati" in containerul parinte. Spre exemplu, sa selectam toate listele ul care au doar un singur item.
Mai intii trebuie sa ne intrebam, cum se poate de realizat acest task. Se poate de folosit ul li dar atunci se vor selecta toate elementele. Unica iesire din situatie este only-of-type
ul > li:only-of-type { 
    font-weight: bold; 
}
Browser Compatibility

• IE 9+
• Firefox 3.5+
• Google Chrome
• Safari
• Opera 

Articol preluat si tradus de aici