Cei 30 de selectori CSS pe care trebuie să-i memorați

aflați CSS: Ghidul complet

am construit un ghid complet pentru a vă ajuta să învățați CSS, indiferent dacă începeți cu elementele de bază sau doriți să explorați CSS mai avansat.

selectori CSS

deci ai învățat baza id, class și descendant selectori-și apoi a numit-o zi? Dacă da, pierdeți un nivel enorm de flexibilitate. Vă datorez să se angajeze aceste CSS avansate și selectoare CSS3 în memorie.

Selectoare De Bază

1. *

* { margin: 0; padding: 0;}

să le eliminăm pe cele evidente, pentru începători, înainte de a trece la selectorii mai avansați.

simbolul stea va viza fiecare element de pe pagină. Mulți dezvoltatori vor folosi acest truc pentru a elimina margin s și padding. Deși acest lucru este cu siguranță bine pentru teste rapide, v-aș sfătui să nu folosiți niciodată acest lucru în codul de producție. Aceasta adaugă prea multă greutate pe browser și nu este necesară.

* poate fi utilizat și cu copii selectori.

#container * { border: 1px solid black;}

aceasta va viza fiecare element care este un copil al #container div. Din nou, încercați să nu utilizați această tehnică foarte mult, dacă vreodată.

2. # X

#container { width: 960px; margin: auto;}

prefixarea simbolului hash la un selector ne permite să vizăm cu id. Aceasta este cu ușurință cea mai obișnuită utilizare; cu toate acestea, fiți precauți atunci când utilizați selectoare id.

întrebați-vă: trebuie să aplic un id acestui element pentru a-l viza?

id selectoarele sunt rigide și nu permit reutilizarea. Dacă este posibil, încercați mai întâi să utilizați un nume de etichetă, unul dintre noile elemente HTML5 sau chiar o pseudo-clasă.

3. .X

.error { color: red;}

acesta este un selector class. Diferența dintre id s și classes este că, cu acesta din urmă, puteți viza mai multe elemente. Utilizați class es atunci când doriți ca stilul dvs. să se aplice unui grup de elemente. Alternativ, utilizați id s pentru a găsi un ac în carul cu fân și stilați numai acel element specific.

4. X

a { color: red; }ul { margin-left: 0; }

ce se întâmplă dacă doriți să vizați toate elementele de pe o pagină, în conformitate cu type lor, mai degrabă decât un idsau class nume? Păstrați-l simplu, și de a folosi un selector de tip. Dacă trebuie să vizați toate listele neordonate, utilizați ul {}.

Demo Live de Selectoare de bază

Selectoare Combinator

5. X Y

li a { text-decoration: none;}

următorul selector cel mai comun este selectorul descendant. Când trebuie să fii mai specific cu selectorii tăi, le folosești. De exemplu, ce se întâmplă dacă, în loc să vizați toate etichetele de ancorare, trebuie doar să vizați ancorele care se află într-o listă neordonată? Acest lucru este în special atunci când ar folosi un selector descendent.

Pro-Sfat: Dacă selectorul dvs. arată ca X Y Z A B.error, o faceți greșit. Întrebați-vă întotdeauna dacă este absolut necesar să aplicați toată această greutate.

6. X + Y

ul + p { color: red;}

acesta este denumit selector adiacent. Acesta va selecta numai elementul care este imediat precedat de fostul element. În acest caz, numai primul paragraf după fiecare ul va avea text roșu.

7. X > Y

div#container > ul { border: 1px solid black;}

diferența dintre standardul X Y și X > Y este că acesta din urmă va selecta doar copii direcți. De exemplu, luați în considerare următorul marcaj.

 <div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

un selector de #container > ulva viza doar ul care sunt copii direcți ai div cu un idde container. Nu va viza, de exemplu, ulcare este un copil al primului li.

din acest motiv, există beneficii de performanță în utilizarea combinatorului copil. De fapt, este recomandat în special atunci când se lucrează cu motoare selector CSS bazate pe JavaScript.

8. X ~ Y

ul ~ p { color: red;}

acest combinator frate este similar cu X + Y, dar este mai puțin strict. În timp ce un selector adiacent (ul + p) va selecta doar primul element care este imediat precedat de fostul selector, acesta este mai generalizat. Va selecta, referindu-se la exemplul nostru de mai sus, orice p elemente, atâta timp cât urmează un ul.

Demo Live de Selectoare Combinator

Selectoare atribut

9. X

a { color: green;}

denumit selector de atribute, în exemplul nostru de mai sus, acesta va selecta doar etichetele de ancorare care au un atribut title. Anchor tag-uri care nu nu vor primi acest stil special. Dar dacă trebuie să fii mai specific? Consultați următorul exemplu!

10. X

a { color: #83b348; /* Envato green */}

fragmentul de mai sus va stiliza toate etichetele de ancorare care se leagă de https://code.tutsplus.com; vor primi culoarea noastră verde. Toate celelalte etichete de ancorare vor rămâne neafectate.

rețineți că înfășurăm valoarea în ghilimele. Nu uitați să faceți acest lucru și atunci când utilizați un motor JavaScript CSS selector. Când este posibil, utilizați întotdeauna selectori CSS3 peste metode neoficiale.

acest lucru funcționează bine, deși este un pic rigid. Ce se întâmplă dacă legătura se îndreaptă într-adevăr către Envato Tuts+, dar poate că calea este code.tutsplus.com mai degrabă decât URL-ul complet? În aceste cazuri, putem folosi un pic din sintaxa expresiilor regulate.

11. X

a { color: #83b348; /* Envato green */}

Iată, de asta avem nevoie. Steaua desemnează că valoarea de procedură trebuie să apară undeva în valoarea atributului. În acest fel, aceasta acoperă tutsplus.com, code.tutsplus.com, și chiar webdesign.tutsplus.com.

rețineți că aceasta este o afirmație amplă. Ce se întâmplă dacă tag-ul ancora legat de unele site-ul non-Envato cu tutsplus șir în URL-ul? Când trebuie să fiți mai specific, utilizați ^ și $, pentru a face referire la începutul și, respectiv, la sfârșitul unui șir.

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

v-ați întrebat vreodată cum unele site-uri web pot afișa o mică pictogramă lângă linkurile externe? Sunt sigur că le-ați văzut înainte; sunt memento-uri frumoase că link-ul vă va direcționa către un site complet diferit.

aceasta este o floare la ureche cu simbolul carate. Este cel mai frecvent utilizat în expresiile regulate pentru a desemna începutul unui șir. Dacă dorim să vizăm toate etichetele de ancorare care au un href care începe cu http, am putea folosi un selector similar cu fragmentul prezentat mai sus.

observați că nu căutăm https://; acest lucru nu este necesar și nu ține cont de adresele URL care încep cu https://.

acum, ce-ar fi dacă am vrea să stilizăm toate ancorele care se leagă, să zicem, de o fotografie? În aceste cazuri, să căutăm sfârșitul șirului.

13. X

a { color: red;}

din nou, vom folosi un simbol expresii regulate, $, pentru a se referi la sfârșitul unui șir. În acest caz, căutăm toate ancorele care se leagă de o imagine—sau cel puțin o adresă URL care se termină cu .jpg. Rețineți că acest lucru nu va captura imagini GIF și PNG.

14. X

a { color: red;}

cum compensăm toate tipurile de imagini? Ei bine, am putea crea mai multe selectoare, cum ar fi:

a,a,a,a { color: red;}

dar asta este o durere și este ineficientă. O altă soluție posibilă este utilizarea atributelor personalizate. Ce se întâmplă dacă am adăugat propriul nostru atribut data-filetype fiecărei ancore care se leagă de o imagine?

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

apoi, cu acel cârlig în loc, putem folosi un selector de atribute standard pentru a viza numai acele ancore.

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

Iată unul special care vă va impresiona prietenii. Nu prea mulți oameni știu despre acest truc. Simbolul tilde (~) ne permite să vizăm un atribut care are o listă de valori separate de spațiu.

mergând împreună cu atributul nostru personalizat de la numărul 15, de mai sus, am putea crea un atribut data-info, care poate primi o listă separată de spațiu cu tot ce trebuie să notăm. În acest caz, vom face notă de link—uri externe și link-uri către imagini-doar pentru exemplu.

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

cu acest marcaj în loc, acum putem viza orice tag-uri care au oricare dintre aceste valori, prin utilizarea ~ atribute selector truc.

/* Target data-info attr that contains the value "external" */a { color: red;}/* And which contain the value "image" */a { border: 1px solid black;}

destul de puturos, nu?

Demo Live de selectori atribut

Pseudo selectori

16. X: vizitat și X:link

a:link { color: red; }a:visited { color: purple; }

folosim pseudo-clasa :link pentru a viza toate etichetele de ancorare pe care nu s-a făcut încă clic.

alternativ, avem și pseudo clasa :visited, care, așa cum v-ați aștepta, ne permite să aplicăm un stil specific doar etichetelor de ancorare de pe pagina pe care s-a făcut clic sau „vizitat”.

17. X: bifat

input:checked { border: 1px solid black;}

această pseudo clasă va viza doar un element de interfață utilizator care a fost bifat—cum ar fi un buton radio sau o casetă de selectare. Este la fel de simplu ca asta.

18. X: după

pseudo clasele before și after sunt grozave. În fiecare zi, se pare, oamenii găsesc modalități noi și creative de a le folosi în mod eficient. Pur și simplu generează conținut în jurul elementului selectat.

mulți au fost introduși pentru prima dată în aceste clase când au întâlnit hack-ul clear-fix.

.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; }.clearfix { *display: inline-block; _height: 1%;}

acest hack foloseste :after pseudo clasa pentru a adăuga un spațiu după elementul, și apoi clar. Este un truc excelent pentru a avea în geanta instrument, în special în cazurile în care overflow: hidden; metoda nu este posibilă.

pentru o altă utilizare creativă a acestui lucru, consultați sfatul meu rapid despre crearea umbrelor.

Conform specificației selectorilor CSS3, ar trebui să utilizați tehnic sintaxa pseudo element a două puncte ::. Cu toate acestea, pentru a rămâne compatibil, user-agent va accepta o singură utilizare colon, de asemenea.

19. X: hover

div:hover { background: #e3e3e3;}

Oh, haide. Știi asta. Termenul oficial pentru aceasta este”pseudo-clasa de acțiune a utilizatorului”. Sună confuz, dar chiar nu este. doriți să aplicați un stil specific atunci când un utilizator planează peste un element? Acest lucru va face treaba!

rețineți că versiunile mai vechi de Internet Explorer nu răspund atunci când pseudo clasa :hover este aplicată la altceva decât la o etichetă de ancorare.

cel mai des veți folosi acest selector atunci când aplicați, de exemplu, un border-bottom pentru a ancora etichete, atunci când planat peste.

a:hover { border-bottom: 1px solid black;}

Pro-Sfat: border-bottom: 1px solid black; arată mai bine decât text-decoration: underline;.

20. X: nu (selector)

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

pseudo clasa de negare este deosebit de utilă. Să presupunem că vreau să selectez toate divs, cu excepția celui care are un id de container. Fragmentul de mai sus se va ocupa perfect de această sarcină.

sau, dacă aș vrea să selectez fiecare element (nu este recomandat), cu excepția etichetelor paragrafului, am putea face:

*:not(p) { color: green;}

21. X:: pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

putem folosi pseudo elemente (desemnate de ::) pentru a stiliza fragmente ale unui element, cum ar fi prima linie sau prima literă. Rețineți că acestea trebuie aplicate elementelor la nivel de bloc pentru a intra în vigoare.

un pseudoelement este compus din două puncte: ::

vizați prima literă a unui paragraf

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

acest fragment este o abstracție care va găsi toate paragrafele din pagină și apoi va Sub-viza doar prima literă a acelui element.

acesta este cel mai adesea folosit pentru a crea un stil asemănător unui ziar pentru prima literă a unui articol.

țintă prima linie a unui paragraf

p::first-line { font-weight: bold; font-size: 1.2em;}

în mod similar, ::first-line pseudo elementul va, cum era de așteptat, stil prima linie a elementului numai.

„pentru compatibilitatea cu foile de stil existente, agenții utilizator trebuie să accepte și notația anterioară-colon pentru pseudo-elemente introduse în nivelurile CSS 1 și 2 (și anume, :first-line, :first-letter, :before și :after). Această compatibilitate nu este permisă pentru noile pseudo-elemente introduse în această specificație.”- Selectoare W3C Specificatii

Demo Live de Pseudo Selectoare

Nth copil și selectoare de tip

22. X: n-copil (n)

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

amintiți-vă zilele în care am avut nici o modalitate de a viza elemente specifice într-o stivă? Pseudo clasa nth-child rezolvă asta!

vă rugăm să rețineți că nth-child acceptă un număr întreg ca parametru, dar acesta nu este bazat pe zero. Dacă doriți să vizați al doilea element din listă, utilizați li:nth-child(2).

putem folosi chiar și acest lucru pentru a selecta un set variabil de copii. De exemplu, am putea face li:nth-child(4n) pentru a selecta fiecare al patrulea element din listă.

23. X: n-ultimul-copil(n)

li:nth-last-child(2) { color: red;}

ce se întâmplă dacă ai avea o listă uriașă de articole într-un ul și ai avea nevoie doar să accesezi, să zicem, al treilea până la ultimul articol? În loc să faceți li:nth-child(397), puteți folosi pseudo clasa nth-last-child.

această tehnică funcționează aproape identic cu numărul 16 de mai sus. Diferența este că începe la sfârșitul colecției și își face drumul înapoi.

24. X: n-de-tip(n)

ul:nth-of-type(3) { border: 1px solid black;}

vor exista momente în care, în loc să selectați un child, trebuie să selectați în funcție de type de element.

Imaginați-vă marcajul care conține cinci liste neordonate. Dacă ați vrut să stil doar al treilea ul, și nu au avut un unic id pentru a cârlig în, ai putea folosi nth-of-type(n) pseudo clasa. În fragmentul de mai sus, doar al treilea ul va avea o graniță în jurul său.

25. X: n-ultimul-de-tip(n)

ul:nth-last-of-type(3) { border: 1px solid black;}

și da, pentru a rămâne consecvenți, putem folosi și nth-last-of-type pentru a începe la sfârșitul listei de selectori și pentru a ne întoarce înapoi pentru a viza elementul dorit.

26. X: primul copil

ul li:first-child { border-top: none;}

această pseudo clasă structurală ne permite să vizăm doar primul copil al părintelui elementului. Veți folosi adesea acest lucru pentru a elimina bordurile din primul și ultimul element de listă.

de exemplu, să presupunem că aveți o listă de rânduri și fiecare are un border-top și un border-bottom. Ei bine, cu acest aranjament, primul și ultimul element din acel set va arăta un pic ciudat.

mulți designeri aplică clase de first și last pentru a compensa acest lucru. În schimb, puteți utiliza aceste clase pseudo.

27. X: ultimul-copil

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

opusul first-child, last-child va viza ultimul element al părintelui elementului.

last-child exemplu Selector

să construim un exemplu simplu pentru a demonstra o posibilă utilizare a acestor clase. Vom crea un element de listă în stil.

 <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>

pentru marcare, nu este nimic special: doar o listă simplă.

iată CSS-ul:

ul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0;}li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c;}

acest stil va seta un fundal, elimina padding implicit browser-ul de pe ul, și se aplică borduri pentru fiecare li pentru a oferi un pic de adâncime.

pentru a adăuga adâncime listelor dvs., aplicați un border-bottom la fiecare licare este o nuanță sau două mai închisă decât culoarea de fundal a li. Apoi, aplicați un border-top care este o pereche de nuanțe mai ușoare.

singura problemă, așa cum se arată în imaginea de mai sus, este că o margine va fi aplicată chiar în partea de sus și de jos a listei neordonate—ceea ce pare ciudat. Să folosim :first-child și :last-child pseudo clase pentru a remedia acest lucru.

li:first-child { border-top: none;}li:last-child { border-bottom: none;}

acolo vom merge; care stabilește!

28. X: copil unic

div p:only-child { color: red;}

sincer, probabil că nu te vei găsi folosind pseudo clasa only-child prea des. Cu toate acestea, este disponibil, ar trebui să aveți nevoie de ea.

vă permite să vizați elemente care sunt singurul copil al părintelui său. De exemplu, referindu-se la fragmentul de mai sus, numai paragraful care este singurul copil al div va fi colorat în roșu.

să presupunem următorul marcaj.

<div><p> My paragraph here. </p></div><div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p></div>

în acest caz, al doilea paragraf divnu va fi vizat; doar primul div. De îndată ce aplicați mai mult de un copil unui element, pseudo clasa only-child încetează să mai aibă efect.

29. X: numai de tip

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

această clasă pseudo structurală poate fi utilizată în unele moduri inteligente. Acesta va viza elemente care nu au frați în containerul părinte. De exemplu, să vizăm toate ul care au doar un singur element de listă.

în primul rând, întrebați-vă cum ați îndeplini această sarcină. Ai putea face ul li, dar acest lucru ar viza toate elementele din listă. Singura soluție este utilizarea only-of-type.

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

30. X: primul tip

pseudo clasa first-of-type vă permite să selectați primii frați de tipul său.

un Test

pentru a înțelege mai bine acest lucru, să facem un test. Copiați următorul marcaj în editorul de cod:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

acum, fără a citi mai departe, încercați să vă dați seama cum să vizați doar „elementul de listă 2”. Când v-ați dat seama (sau ați renunțat), citiți mai departe.

soluție 1

există o varietate de moduri de a rezolva acest test. Vom examina câteva dintre ele. Să începem cu first-of-type.

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

acest fragment spune în esență, pentru a găsi prima listă neordonată pe pagină, apoi găsiți doar copiii imediați, care sunt elemente de listă. Apoi, filtrați-l până la doar al doilea element de listă din acel set.

Soluția 2

o altă opțiune este utilizarea selectorului adiacent.

p + ul li:last-child { font-weight: bold;}

în acest scenariu, găsim ul care continuă imediat eticheta p și apoi găsim ultimul copil al elementului.

soluția 3

putem fi la fel de nesuferiți sau cât de jucăuși vrem cu acești selectori.

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

de data aceasta, vom apuca primul ul pe pagina, și apoi găsi primul element din listă, dar pornind de la partea de jos!

Demo Live a selectorilor Nth Child și Type

concluzie

dacă compensați browserele mai vechi, cum ar fi Internet Explorer 6, trebuie să fiți atenți atunci când utilizați aceste selectoare mai noi. Dar te rog, nu lăsa asta să te descurajeze să le înveți. Ți-ai face un mare deserviciu. Asigurați-vă că consultați aici o listă de compatibilitate a browserului. Alternativ, puteți utiliza excelentul IE9 al lui Dean Edward.JS script pentru a aduce suport pentru aceste selectoare pentru browsere mai vechi.

în al doilea rând, atunci când se lucrează cu biblioteci JavaScript, cum ar fi populare jQuery, încercați întotdeauna să utilizați aceste selectoare native CSS3 peste metode personalizate/selectoare bibliotecii, atunci când este posibil. Vă va face Codul mai rapid, deoarece motorul selector poate utiliza parsarea nativă a browserului, mai degrabă decât propria sa.

este minunat că petreceți timp învățând fundamentele designului web, dar dacă aveți nevoie de o soluție rapidă, unul dintre șabloanele noastre CSS gata de utilizare ar putea fi o opțiune bună. Avem, de asemenea, câteva elemente premium CSS pentru tine să ia în considerare.

• 
  CSS3
  15 tabele elegante de stabilire a prețurilor CSS pentru cel mai recent proiect Web
  Monty Shokeen
• 
  Bootstrap 4
  18 Cele mai bune pluginuri Bootstrap 4
  Monty Shokeen

acces GRATUIT la Envato Elements timp de 1 lună

în cele din urmă, iată o ofertă foarte specială pentru a vă ajuta să construiți site-uri și aplicații cu aspect profesional. Pe lângă utilizarea acestor selectori CSS, de ce să nu profitați de fotografii stoc de înaltă calitate, înregistrări video, fonturi premium, Grafică, Ilustrații și multe altele?

în mod normal, ar trebui să plătiți pentru astfel de resurse. Dar chiar acum, Puteți accesa milioane de active creative pentru proiectele dvs. de codificare pentru o lună întreagă, complet gratuit. Și mai mult, veți obține descărcări nelimitate, astfel încât să puteți apuca cât doriți în acea lună și să plătiți numai dacă decideți să continuați!

pentru a profita de această ofertă, Faceți clic pe acest link special de înscriere sau introduceți codul de mai jos pe pagina de înregistrare:

elements_cont_tuts-freemonth1-4bwkbp

nu așteptați prea mult—oferta este valabilă doar pentru o perioadă limitată de timp!