Ce este un selector în css este o descriere a acelui element sau grup de elemente care îi spune browserului ce element să selecteze pentru a-i aplica un stil. Să ne uităm la selectoarele CSS de bază.

1) .X

Selector CSS de clasa X. Diferența dintre id și clasă este că mai multe elemente dintr-o pagină pot avea aceeași clasă, dar id-ul este întotdeauna unic. Clasele ar trebui folosite pentru a aplica același stil mai multor elemente.

• Crom
• Firefox
• Safari
• Operă

2) #X

Selector de ID CSS. Semnul hash dinaintea selectorului CSS X selectează un element al cărui id = X. Când atribuiți stiluri după id, trebuie să vă amintiți întotdeauna că trebuie să fie unic - doar un astfel de id ar trebui să fie pe pagină. Prin urmare, este mai bine să folosiți selectoare după clase, combinații de clase sau nume de etichete. Cu toate acestea, selectoarele de ID sunt excelente pentru testarea automată, deoarece... Acestea vă permit să interacționați imediat cu exact elementul dorit și să aveți încredere că există doar unul de acest fel pe pagină.

Ce browsere sunt acceptate:
• Crom
• Firefox
• Safari
• Operă

3) *

Selector CSS pentru toate elementele. Simbolul stea selectează toate elementele care se află pe pagină. Mulți dezvoltatori îl folosesc pentru a elimina (zero) marjele și valorile de umplutură ale tuturor elementelor paginii. Cu toate acestea, în practică este mai bine să nu faceți acest lucru, deoarece acest selector CSS încarcă destul de greu browserul căutând prin toate elementele din pagină.

Simbolul * poate fi folosit și pentru a selecta toate elementele copil:

#header * ( chenar: 5px gri solid; )

Acest exemplu selectează toți copiii (descendenții) elementului cu #header . Dar întotdeauna merită să ne amintim că acest selector este destul de greu pentru browser.

Ce browsere sunt acceptate:
• Crom
• Firefox
• Safari
• Operă

4) X

Selector de tip CSS. Cum se selectează toate elementele de același tip dacă nu au nici id, nici clase? Merită să utilizați un selector de tip de element CSS. De exemplu, pentru a selecta toate listele ordonate dintr-o pagină, utilizați ol(...) așa cum se arată mai sus.

Ce browsere sunt acceptate:
• Crom
• Firefox
• Safari
• Operă

5) X Y

Selector descendent CSS sau Selector de elemente copil CSS este folosit cel mai des. Se folosește dacă este necesar să se selecteze elemente de un anumit tip din multe elemente copil. De exemplu, trebuie să selectați toate legăturile care se află în elementul li. În acest caz, utilizați acest selector. Când utilizați lanțuri de astfel de selectoare, întrebați-vă întotdeauna dacă este posibil să selectați a acestui element utilizați o secvență și mai scurtă de selectoare.

Ce browsere sunt acceptate:
• Crom
• Firefox
• Safari
• Operă

6) X + Y

Selector de elemente adiacente alege numai un element de tip Y care vine imediat după elementul X. În acest caz, fiecare paragraf imediat după fiecare element div va primi un tip și o dimensiune de font special.

Ce browsere sunt acceptate:
• IE7+
• Firefox
• Crom
• Safari
• Crom

7) X > Y

Selector descendent CSS. Diferența dintre selectorii X Y și X > Y este că selectorul CSS în cauză va selecta numai copiii imediati ai elementelor (va selecta doar descendenții direcți). De exemplu:

Selectorul CSS #content > ul va selecta doar un ul care este un copil direct al div-ului cu id="container" . Nu va selecta un ul care este un copil al primului li. Acesta este un selector CSS destul de rapid.

Ce browsere sunt acceptate:
• Crom
• Firefox
• Safari
• Operă

8) X ~ Y

Selector de elemente surori (subling). mai puțin strict decât X + Y. Acesta va selecta nu numai primul, ci și toate celelalte p elemente care urmează ol.

Ce browsere sunt acceptate:
• Crom
• Firefox
• Safari
• Operă

Pseudo-clasă:link folosit pentru a selecta toate linkurile care nu au fost încă făcute clic. Dacă trebuie să aplicați un anumit stil link-urilor deja vizitate, atunci utilizați pseudo-clasa:vizitata.

Ce browsere sunt acceptate:
• Crom
• Firefox
• Safari
• Operă

10)X

Selector de atribute CSS. Acest exemplu selectează numai acele linkuri care au un atribut titlu.

Ce browsere sunt acceptate:
• Crom
• Firefox
• Safari
• Operă

11)X

Ce browsere sunt acceptate:
• Crom
• Firefox
• Safari
• Operă

12)X

Asteriscul înseamnă că valoarea pe care o căutați trebuie să fie undeva în atribut (orice parte a atributului href). Astfel, vor fi selectate și link-uri de pe https://www..stijit.. Culoarea aurie va fi aplicată tuturor link-urilor selectate.

Ce browsere sunt acceptate:
• Crom
• Firefox
• Safari
• Operă

13)X

Unele site-uri au pictograme săgeți mici lângă link-uri către alte site-uri pentru a indica faptul că acestea sunt link-uri externe. Karatul „^” este un simbol care indică începutul unei linii. Astfel, pentru a selecta toate etichetele al căror href începe cu http, trebuie să utilizați un selector CSS cu karat, așa cum se arată în exemplul de mai sus.

Ce browsere sunt acceptate:
• Crom
• Firefox
• Safari
• Operă

14)X

Aici este folosit expresie uzualași un simbol $ pentru a indica sfârșitul liniei. ÎN în acest exemplu cautam toate link-urile care se refera la imagini cu extensia .jpg.

Ce browsere sunt acceptate:
• Crom
• Firefox
• Safari
• Operă

15)X

Aici aplicăm Selector de atribute personalizate CSS. Adăugăm propriul atribut data-filetype la fiecare link:

legătură

Acum, folosind selectorul CSS de mai sus, puteți selecta toate linkurile care duc la imagini cu orice extensie.

Ce browsere sunt acceptate:
• Crom
• Firefox
• Safari
• Operă

16)X

Tilul (~) vă permite să evidențiați un anumit atribut dintr-o listă de atribute separate printr-un spațiu. Puteți scrie propriul atribut data-info, în care puteți specifica mai multe cuvinte cheie separate printr-un spațiu. Astfel puteți indica că linkul este extern și duce la imagine.

legătură

Folosind această tehnică, putem selecta elemente cu combinațiile de atribute de care avem nevoie:

/* Selectați un element al cărui atribut data-info conține valoarea externă */ a ( culoare: verde; ) /* Selectați un element al cărui atribut data-info conține imaginea valorii */ a ( chenar: 2px negru întrerupt; )

Ce browsere sunt acceptate:
• Crom
• Firefox
• Safari
• Operă

17) X:verificat

Această pseudo-clasă evidențiază doar elemente precum o casetă de selectare sau un buton radio și numai atunci când sunt deja în starea bifată.

Ce browsere sunt acceptate:
• Crom
• Firefox
• Safari
• Operă

18) X:după

Pseudoclasele :before și :after sunt foarte utile - creează conținut înainte și după elementul selectat.

Clearfix:după (conținut: ""; afișare: bloc; clar: ambele; vizibilitate: ascuns; dimensiunea fontului: 0; înălțimea: 0; ) .clearfix ( *afișare: bloc inline; _înălțimea: 1%; )

Aici, folosind pseudo-clasa:after, o linie goală este creată după blocul cu class.clearfix și apoi șters. Această abordare este utilizată dacă nu este posibilă aplicarea overflow: proprietate ascunsă.

Ce browsere sunt acceptate:
• Crom
• Firefox
• Safari
• Operă

19) X: hover

Aplică un stil specific unui element atunci când cursorul mouse-ului trece peste el. Vechi versiuni de internet Explorer se aplică numai: trece cu mouse-ul la linkuri.

A:hover (chenar-jos: 1px punctat albastru; )

Ce browsere sunt acceptate:
• IE6+ (se aplică numai legăturilor din IE6)
• Crom
• Firefox
• Safari
• Operă

20) X:nu(selector)

Pseudo-clasă nu (negații) Acest lucru este util atunci când, de exemplu, trebuie să selectați toate div-urile, cu excepția celui cu id="content" .

Folosind același principiu, puteți selecta toate elementele, cu excepția p:

*:nu(p) (culoare: albastru; )

Ce browsere sunt acceptate:
• Crom
• Firefox
• Safari
• Operă

21) X::pseudoElement

Pseudo-elementele pot fi folosite pentru a aplica stiluri unor porțiuni de elemente, de exemplu, prima linie a unui paragraf sau prima literă a unui cuvânt. Se aplică numai elementelor bloc.

Selectarea primei litere a unui paragraf:

P::prima literă (familie de fonturi: cursiv; dimensiunea fontului: 30px; greutatea fontului: bold; padding-right: 1px; )

Selectarea primului rând dintr-un paragraf:

P:prima linie (dimensiunea fontului: 28px; greutatea fontului: bold; )

Ce browsere sunt acceptate:
• Crom
• Firefox
• Safari
• Operă

22) X:primul copil

Pseudo-clasa primul copil selectează doar primul copil al elementului părinte. Adesea folosit pentru a elimina un chenar din primul element al unei liste. Această pseudo-clasă există de atunci CSS 1.

Ce browsere sunt acceptate:
• Crom
• Firefox
• Safari
• Opera 3.5+
• Android

23) X:ultimul-copil

Pseudo-clasa ultimul copil selectează ultimul copil al elementului părinte. A apărut doar de atunci CSS 3.

Ce browsere sunt acceptate:
• IE9+ (IE8 acceptă primul copil, dar nu ultimul copil. Microsoft (c))
• Crom
• Firefox
• Safari
• Opera 9.6+
• Android

24) X:copil singur

Pseudo-copil unic de clasă vă permite să selectați acele elemente care sunt singurii copii ai părinților lor.

Ce browsere sunt acceptate:
• Crom
• Firefox
• Safari 3.0+
• Opera 9.6+
• Android

25) X:nth-child(n)

Selectează element copil după numărul specificat în parametru. selectorul de al n-lea copil ia un număr întreg ca parametru, dar numără de la 1, adică dacă trebuie să selectați al doilea element din listă, utilizați li:nth-child(2) . Toate pseudo-clasele care folosesc nth-child au apărut doar începând cu CSS 3.

Ce browsere sunt acceptate:
• Crom
• Firefox 3.6+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

26) X:ultimul-copil(n)

Dacă aveți o listă mare de elemente în ul și trebuie să selectați al treilea element de la sfârșit? În loc să scrieți li:nth-child(109), puteți utiliza selectorul ultimului copil al al-lea-ultimul-copil. Această metodă este aceeași cu cea anterioară, dar numărând de la final.

Ce browsere sunt acceptate:
• Crom
• Firefox 3.6+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

27) X:nth-of-type(n)

Dacă există patru liste neordonate pe o pagină și trebuie doar să stilați pe a treia, care nu are un id unic, ar trebui să utilizați nth-of-type.

Ce browsere sunt acceptate:
• Crom
• Firefox 3.6+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

28) X:a-n-ul-ultimul-tip(n)

Pseudo-clasa a n-a-ultim-de-tip(n) are scopul de a selecta al n-lea element de un anumit tip de la final.

Ce browsere sunt acceptate:
• Crom
• Firefox 3.6+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

29) X:numai-de-tip

Pseudo-clasă numai de tip selectează elemente care nu au vecini în cadrul elementului părinte. De exemplu, puteți selecta toate ul-urile care conțin numai lisuri singuratice.

Ce browsere sunt acceptate:
• Crom
• Firefox 3.5+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

30) X: primul de tip

Pseudo-clasa prima de tip selectează primul element de tipul dat.

Ce browsere sunt acceptate:
• Crom
• Firefox 3.5+
• Safari 3.1+
• Opera 9.5+
• Android 2.1+
• iOS 2.0+

Un set de reguli de design (care la rândul lor constau din selectoare cu un bloc de anunțuri) aplicate anumitor etichete html, datorită cărora se formează aspectul site-ului.

Selector CSS- aceasta este o parte integrantă Reguli CSS responsabil pentru determinarea specificului etichete html, cărora li se vor aplica stilurile de design specificate în această regulă.

Astfel, datorită selectoarelor, browserul înțelege ce elemente ale codului paginii trebuie să aplice stiluri de design specifice.

Instrumentul de selecție a elementelor CSS este extrem de flexibil și convenabil pentru selectarea atât a elementelor de cod individuale, cât și a grupurilor întregi de elemente definite de anumite caracteristici.

Tipuri de selectoare CSS

La fel ca propozițiile din text, selectoarele CSS pot fi simple sau complexe. Diferența dintre ele este că cele complexe se obțin din combinarea mai multor simple și sunt folosite pentru a personaliza mai precis designul final al resursei.

Numai că, spre deosebire de textele obișnuite, în foile de stil în cascadă contează în ce ordine și ce selectoare folosim. Mai mult, acest lucru va determina nu numai ce elemente alegem și în funcție de ce criterii, ci și viteza de procesare a codului nostru în ansamblu, dar vom vorbi despre subtilități în articolele următoare.

Selectoare simple

• Selector universal – este responsabil pentru selectarea tuturor elementelor din document. Specificat printr-un asterisc. Este de obicei folosit pentru a reseta stilurile implicite ale browserelor, astfel încât toți cei care vizitează site-ul să nu-și piardă designul dacă folosesc unele dintre propriile setări ale browserului sau diverse plugin-uri...

  * (un pic de stil;)

• Selector de tip – Selectează toate etichetele care se potrivesc unui anumit tip. Specificată de numele etichetei. Folosit pentru sarcină reguli generale designul documentului, de exemplu, setează fonturi diferite pentru titluri și textul simplu al documentului.

  h1 (un pic de stil; )

• – va aplica regula css tuturor etichetelor cu nume specific clasă. Specificat printr-un punct cu numele clasei scris imediat după el. Poate cel mai comun selector în aspect. De obicei, este folosit pentru a seta diferite stiluri de design pentru etichete de același tip, dar diferite ca funcționalitate.

  LeftColumn (un stil;)

• Selector ID – folosit pentru a proiecta elemente unice pe pagină. Este specificat printr-un hash urmat de id-ul numelui. Folosit dacă trebuie să proiectați un anumit element de pagină.

  #alertButton (un stil; )

• – selectează etichete care au un atribut. Specificat de numele atributului în paranteza patrata. Poate fi folosit atât pentru a proiecta un grup de etichete în care un anumit atribut este pur și simplu prezent, cât și pentru un grup de etichete în care este prezent un anumit atribut cu o anumită valoare.

  [ tip] ( un stil; ) [ tip = „trimite” ] ( un stil; ) input[ tip = „trimite” ] ( un stil; )

Selectoare complexe

• Selector descendent – ​​selectează elemente descendente (etichete situate în interiorul altei etichete). Specificate separate printr-un spațiu (părinte - spațiu - copil).

  div p (un stil; )

• Selector element copil - selectează un element imbricat direct în alt element. Specificat de simbolul „>” (părinte-verificare-copil). Un element copil diferă de un element descendent prin faptul că vine imediat după părinte (primul nivel de imbricare). În timp ce un copil este considerat a fi orice etichetă în interiorul altuia, indiferent de nivelul de cuibărit.

  Sidebar>ul (un pic de stil;)

• Selector de elemente surori – selectează o etichetă care vine imediat după o altă etichetă (nu este închisă în interior, dar merge mai departe). Specificat printr-un plus (primul element – ​​plus – element soră). În practică este rar folosit. O condiție prealabilă pentru utilizare este prezența unui părinte comun pentru toate elementele cu semnul „+” combinat.

  h1+ p (un stil; )

Pseudo-clase și pseudo-elemente

Clasificarea de mai sus a selectoarelor CSS depindea doar de marcarea documentului. Dacă vrem să stabilim o schimbare aspect elemente în funcție de modificările stării sale pe pagină (de exemplu, schimbarea culorii unui buton la hover), atunci putem folosi pseudo-clase și pseudo-elemente selectoare.

• Amintiți-vă că, spre deosebire de html, CSS face distincție între majuscule și minuscule. Adică class.active și .Active nu sunt același lucru! Ele vor fi aplicate diferitelor elemente, dacă există în document.
• Denumiți selectoarele pentru stil, astfel încât să nu vă confundați cu ei mai târziu: .leftColumn – bun nume, .left - depinde de situație, dar nu chiar, .llll - un fel de gunoi, îți poți da seama fără să te uiți la cod de unde a venit această clasă?
• Permiteți-mi să vă reamintesc încă o dată - dacă există un singur element pe pagină și este totul unic, atunci folosim id pentru el, dar dacă există posibilitatea ca altul să apară sau pur și simplu există mai multe elemente similare pe pagina, apoi folosiți clase pentru design.

Rezumând

Selectoare în CSS- Acest cel mai puternic instrument identificarea anumitor elemente de pagină sau a unui grup de elemente unite printr-o caracteristică specifică pentru aplicarea ulterioară a stilurilor de design acestora din blocul de anunțuri aferent acestui selector.

După stăpânire principii generale interacțiune și crearea de selectoare, veți uita de problemele legate de proiectarea documentelor web. Cunoștințe bune selectoarele vă permit să reduceți semnificativ timpul Aspect HTML pagini.

Deși subiectul pare extrem de confuz la prima vedere, devine simplu și de înțeles după o perioadă de practică, susținută de teoria calitativă.

Selectorii sunt una, dacă nu cea mai importantă parte a CSS. Ele formează o cascadă și definesc modul în care stilurile ar trebui aplicate elementelor paginii.

Până de curând, CSS-ul nu se concentrase niciodată pe selectori. A apărut din când în când actualizări minoreîn cadrul specificațiilor selectoarelor, dar nu au existat niciodată îmbunătățiri reale inovatoare. Din fericire, selectorii au atras mai multă atenție în ultima vreme, așa că haideți să aruncăm o privire la cum să alegeți tipuri diferite elemente şi elemente în diferite stări.

CSS3 a adus noi selectoare, deschizând un întreg lume noua oportunități și îmbunătățiri ale practicilor existente. Aici vom discuta despre selectoare, atât vechi, cât și noi, și despre cum să le folosim cel mai bine.

Selectoare tipice

Înainte de a ne aprofunda în unele dintre cele mai complexe selectoare și cele oferite în CSS3, să aruncăm o privire la unele dintre cele mai comune selectoare disponibile astăzi. Acești selectori includ selectori de tip, clasă și identificator.

Selector tip identifică un element în funcție de tipul său, în special de modul în care este declarat elementul în HTML. Selector clasă identifică un element pe baza valorii atributului de clasă, care poate fi reaplicat mai multor elemente după cum este necesar și ajută la partajarea stilurilor populare. Și, în sfârșit identificator definește un element bazat pe valoarea atributului id care este unic și ar trebui să fie folosit o singură dată pe o pagină.

H1 (...).slogan (...) #intro (...)

Selectoare pentru copii

Selectorii de copii oferă o modalitate de a selecta elementele care sunt imbricate unele în altele, făcându-le copii ale elementului părinte. Această alegere poate fi făcută de doi căi diferite, folosind un selector de descendenți sau un selector de copii direct.

Selector de descendenți

Cel mai comun selector de copii este selectorul de descendenți, care se potrivește cu fiecare element care urmează un anumit strămoș. Copilul nu trebuie să vină imediat după strămoș în arborele documentelor, ca o relație părinte-copil, dar poate fi oriunde în cadrul strămoșului. Selectorii descendenți sunt creați prin spațiul dintre elementele individuale din selector, creând nou nivel ierarhie pentru fiecare element de listă.

Selectorul de articole h2 este un selector descendent și selectează numai elemente

, care se află în interiorul elementului

. Vă rugăm să rețineți, indiferent unde locuiește elementul

în timp ce se află în interiorul elementului

, va fi întotdeauna selectat. În plus, orice element

în afara elementului

nu va fi selectat.

Mai jos sunt titlurile, din care sunt selectate rândurile 3 și 5.

Articolul h2 (...)

...

Acest titlu va fi selectat

Acest titlu va fi selectat

Selector direct pentru copii

Uneori, selectoarele pentru copii merg prea departe, selectând mai mult decât se dorește. Uneori trebuie selectați doar copiii direcți ai unui element părinte, mai degrabă decât fiecare instanță a unui element imbricat adânc într-un strămoș. În acest caz, un selector copil direct poate fi utilizat prin plasarea unui semn mai mare decât (>) între elementul părinte și elementul copil din selector.

De exemplu, articolul > p este un selector direct de copii numai atunci când elementele

Situat direct în interiorul elementului

. Orice element<р>plasat în afara elementului

sau imbricate în interiorul altui element, altul decât

, nu va fi selectat.

Mai jos, paragraful de pe rândul 3, este singurul copil direct al părintelui său

, de aceea a fost ales.

Articolul > p (...)

Acest paragraf va fi selectat

Selectori înrudite

A ști cum să selectezi elementele copil este în mare măsură util și este destul de comun. Cu toate acestea, este posibil să fie necesar să fie selectate și elemente frați, adică elemente care au un strămoș comun. O astfel de selecție poate fi făcută folosind un selector comun de frați și selectoare vecine.

Selector generic de frați

Selectorul general de frați vă permite să selectați elementele care urmează să fie selectate în funcție de frații lor, adică cele care au același părinte comun. Acestea sunt create folosind caracterul tilde (~) între două elemente dintr-un selector. Primul element specifică faptul că al doilea element trebuie să fie un frate al acestuia și ambele trebuie să aibă același părinte.

Selectorul h2~p este un selector general de frați, care caută elemente

Care vin după orice elemente

in acelasi parinte. Pentru a element

A fost selectat, trebuie să vină după orice element

.

Paragrafele din rândurile 5 și 9 sunt selectate deoarece vin după un antet din arborele documentului și au același părinte ca un antet asociat.

H2 ~ p(...)

...

Acest paragraf va fi selectat

Acest paragraf va fi selectat

Selectoare adiacente

Uneori poate fi de dorit să aveți un pic mai mult control, inclusiv capacitatea de a selecta un frate care urmează direct un alt frate. Un selector adiacent va selecta numai elemente frate imediat după alt element frate. În loc de un caracter tilde, așa cum este cazul unui selector de frați obișnuit, un selector de frați folosește un simbol plus (+) între două elemente din selector. Din nou, primul element specifică că al doilea element trebuie să urmeze imediat și să fie legat de el, iar ambele elemente trebuie să aibă același părinte.

Să aruncăm o privire la selectorul adiacent h2 + p . Vor fi selectate doar elemente

Vin imediat după elemente

. Ambele trebuie să aibă, de asemenea, același element părinte.

Paragraful de pe rândul 5 este selectat deoarece urmează imediat antetul aferent și au același părinte.

H2 + p(...)

...

Acest paragraf va fi selectat

Exemplu de selectoare adiacente

☰

Introducere ( afișare: niciuna; ) etichetă, ul ( chenar: 1 px solid #cecfd5; chenar-radius: 6 px; ) etichetă ( culoare: #0087cc; cursor: indicator; afișare: bloc inline; dimensiune font: 18 px; umplutură: 5px 9px; tranziție: toate .15s ease; ) label:hover (culoare: #ff7b29; ) input:bifat + etichetă (box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); culoare: #9799a7 ; ) nav (înălțime maximă: 0; depășire: ascuns; tranziție: toate .15s ease; ) input:checked ~ nav (înălțime maximă: 500px; ) ul ( stil listă: niciunul; margine: 8px 0 0 0; padding: 0; lățime: 100px; ) li ( chenar-jos: 1px solid #cecfd5; ) li:last-child ( chenar-bottom: 0; ) a ( culoare: #0087cc; afișare: bloc; padding: 6px 12px; text-decor: niciunul; ) a:hover (culoare: #ff7b29; )

Selectori de atribute

Unii dintre selectorii generici discutați mai devreme pot fi definiți și ca selectori de atribute, în care un element este selectat pe baza unei clase sau a valorii id. Acești selectori de atribute de clasă și id sunt folosiți pe scară largă și destul de puternici, dar sunt doar începutul. Alți selectori de atribute au apărut în ultimii ani, în special făcând progrese mari cu CSS3. Elementele pot fi selectate acum în funcție de faptul dacă un atribut este prezent și de ce valoare conține.

Selector de prezență de atribut

Primul selector de atribute identifică un element pe baza faptului că atributul este activat sau nu, indiferent de valoarea sa reală. Pentru a selecta un element în funcție de faptul dacă un atribut este prezent sau nu, includeți pur și simplu numele atributului între paranteze drepte () în selector. Parantezele pătrate pot veni după orice selector de tip sau clasă, în funcție de nivelul de specificitate dorit.

A (...)

...

Selector de atribute =

Pentru a identifica un element cu o valoare specifică și precisă, se poate folosi același selector ca și până acum, dar de această dată valoarea dorită este inclusă între paranteze drepte după numele atributului. Între paranteze pătrate ar trebui să existe un nume de atribut după semnul egal (=), unde valoarea atributului dorit este scrisă în ghilimele.

A (...)

...

Selector de atribute *=

Când încercăm să găsim un element bazat pe o parte a valorii unui atribut, dar nu pe o potrivire exactă, se poate folosi caracterul asterisc (*) din parantezele pătrate ale selectorului. Asteriscul trebuie să apară imediat după numele atributului, imediat înaintea semnului egal. Aceasta înseamnă că valoarea care urmează trebuie doar să apară sau să fie conținută în valoarea atributului.

A (...)

...

Selector de atribute ^=

Pe lângă selectarea unui element pe baza valorii atributului care conține textul specificat, puteți selecta și un element în funcție de locul în care începe valoarea atributului. Folosirea caracterului circumflex (^) între parantezele selectoare între numele atributului și semnul egal înseamnă că valoarea atributului trebuie să înceapă cu textul specificat.

A (...)

...

Selector de atribute $=

Opusul selectorului anterior este un selector de atribute, unde valoarea se termină cu ceva text. În loc să se folosească caracterul ^, se folosește un semn dolar ($) în parantezele selectorului dintre numele atributului și semnul egal. Folosirea unui semn dolar înseamnă că valoarea atributului trebuie să se încheie cu textul specificat.

A (...)

...

Selector de atribute ~=

Uneori, valorile atributelor pot fi distanțate una de cealaltă, în care doar unul dintre cuvinte trebuie să fie eligibil pentru a crea o selecție. În acest caz, utilizarea caracterului tilde (~) în parantezele selectorului între numele atributului și semnul egal înseamnă că valoarea atributului este separată prin spații, dintre care un cuvânt se potrivește exact cu valoarea specificată.

A (...)

...

Selector de atribute |=

Când valoarea atributului este separată mai degrabă de cratime decât de spații, un caracter de linie verticală (|) poate fi folosit în parantezele selectorului între numele atributului și semnul egal. Linie verticalaînseamnă că valoarea atributului poate fi separată printr-o cratimă, dar cuvintele trebuie să înceapă cu valoarea specificată.

A (...)

...

Exemplu de selectoare de atribute

• document PDF
• document Word
• Imagine
• Audio
• Video

Ul ( stil-listă: niciunul; margine: 0; umplutură: 0; ) a ( poziția fundalului: 0 50%; repetare fundal: fără repetare; culoare: #0087cc; padding-left: 22px; text-decor: nici unul; ) a:hover (culoare: #ff7b29; ) a ( imagine de fundal: url("images/pdf.png"); ) a ( imagine de fundal: url("images/doc.png"); ) a ( imagine de fundal: url("imagini/imagine.png"); ) a ( imagine de fundal: url ("imagini/audio.png"); ) a ( imagine de fundal: url("imagine/video.png" );)

Prezentare generală a selectoarelor de atribute

Exemplu	Nume	Descriere
A	Selector de prezență de atribut	Selectează un element dacă atributul dat este prezent.
A	Selector de atribute =	Selectează un element dacă valoarea acestui atribut se potrivește exact cu cea specificată.
A	Selector de atribute *=	Selectează un element dacă valoarea acestui atribut conține cel puțin o instanță a textului specificat.
A	Selector de atribute ^=	Selectează un element dacă valoarea acestui atribut începe cu textul specificat.
A	Selector de atribute $=	Selectează un element dacă valoarea acestui atribut se termină cu textul specificat.
A	Selector de atribute ~=	Selectează un element dacă valoarea atributului dat este separată prin spații și se potrivește exact cu un singur cuvânt specificat.
A	Selector de atribute |=	Selectează un element dacă valoarea atributului dat este separată printr-o cratimă și începe cu cuvântul specificat.

Pseudo-clase

Pseudo-clasele sunt similare cu clasele obișnuite din HTML, cu toate acestea nu sunt specificate direct în markup; în schimb, sunt populate dinamic ca urmare a acțiunilor utilizatorului sau a structurii documentului. Cea mai comună pseudo-clasă, și una pe care probabil ați mai văzut-o înainte, este :hover. Rețineți că această pseudo-clasă începe cu două puncte (:), ca toate celelalte pseudo-clase.

Link Pseudo-Clasuri

Unele pseudo-clase de bază includ două pseudo-clase care gravitează în jurul referințelor. Acestea sunt pseudo-clasele :link și :visited și determină dacă un link a fost sau nu vizitat. Pentru a stila un link care nu a fost încă vizitat, intră în joc pseudo-clasa :link, iar pseudo-clasa :visited stilează link-urile pe care utilizatorul le-a vizitat deja pe baza istoricului său de navigare.

A:link (...) a:vizitat (...)

Pseudo-clase de acțiuni ale utilizatorului

Diverse pseudoclase pot fi aplicate dinamic unui element pe baza acțiunilor utilizatorului, inclusiv :hover, :active și :focus. Pseudoclasa :hover este aplicată unui element atunci când utilizatorul mută cursorul peste element, cel mai frecvent utilizat cu link-uri. Pseudo-clasa:activ este aplicat unui element atunci când utilizatorul activează elementul, cum ar fi făcând clic pe el. În cele din urmă, pseudo-class:focus este aplicat unui element atunci când utilizatorul a făcut elementul în centrul paginii, deseori folosind tasta Tab în timp ce trece de la un element la altul.

A:hover (...) a:activ (...) a:focus (...)

Starea interfeței Pseudo-clase

Similar cu link-urile, există și unele pseudo-clase asociate cu starea elementelor interfața cu utilizatorul, în special, în interiorul formelor. Aceste pseudo-clase includ :enabled, :disabled, :checked și :indeterminate.

Pseudo-clasa :enabled selectează câmpurile care sunt activate și disponibile pentru utilizare, iar pseudo-clasa :disabled selectează câmpurile care au un atribut dezactivat legat de ele. Multe browsere estompează astfel de câmpuri dezactivate în mod implicit pentru a informa utilizatorii că câmpul nu este disponibil pentru interacțiune, dar stilul lor poate fi personalizat după cum se dorește prin pseudo-clasa :disabled.

Intrare: activat (...) intrare: dezactivat (...)

Ultimele două elemente de stare a interfeței, pseudo-clasele :checked și :indeterminate, gravitează în jurul casetelor de selectare și a butoanelor radio. Pseudo-clasa :checked selectează casetele de selectare sau butoanele radio pe care v-ați putea aștepta să fie bifate. Când nu este bifată sau selectată nicio casetă de selectare sau buton radio, acesta trăiește într-o stare nedeterminată, pentru care pseudoclasa :indeterminate poate fi utilizată pentru a viza elemente similare.

Intrare: verificat (...) intrare: nedeterminat (...)

Pseudoclase de structură și poziție

Mai multe pseudo-clase se referă la structură și poziție în funcție de locul în care se găsesc elementele în arborele documentului. Aceste pseudo-clase vin în diferite forme și dimensiuni, fiecare oferind propria sa funcționalitate unică. Unele pseudo-clase au existat mai mult decât altele, dar CSS3 a adus un set complet nou de pseudo-clase pentru a le completa pe cele existente.

:primul-copil, :ultimul-copil și :unicul-copil

Primele pseudoclase structurale pe care le veți întâlni probabil sunt :first-child , :last-child și :only-child . Pseudoclasa :first-child va selecta un element dacă este primul copil din părinte, în timp ce pseudoclasa :last-child va selecta elementul dacă este ultimul copil din părinte. Aceste pseudo-clase sunt ideale pentru selectarea primului sau ultimului element dintr-o listă etc. În plus, :only-child va selecta un element dacă este singurul element din părinte. Alternativ, pseudoclasa :only-child poate fi scrisă ca :first-child:last-child , cu toate acestea :only-child are specificitate mai mică.

Aici selectorul li:first-child specifică primul element din listă, în timp ce li:last-child specifică ultimul element din listă, selectând astfel rândurile 2 și 10. Selectorul div:only-child caută

, care este singurul copil al elementului părinte, fără alte elemente frate. În acest caz, linia 4 este selectată deoarece este singura

în acest articol din listă.

Li:primul copil (...) li:last-child (...) div:only-child (...)

• Acest articol va fi selectat
• Acest div va fi selectat
• ...
  ...
• Acest articol va fi selectat

:primul-de-tip, :ultimul-de-tip și :doar-de-tip

Găsirea primului, ultimului și singurului copil al unui părinte este foarte utilă și adesea tot ceea ce este necesar. Cu toate acestea, uneori doriți să selectați doar primul, ultimul sau singurul copil dintr-un anumit tip de element. De exemplu, doriți să selectați doar primul sau ultimul paragraf dintr-un articol sau poate doar o imagine dintr-un articol. Din fericire, pseudoclasele :first-of-type , :last-of-type și :only-of-type ajută în acest sens.

Pseudo-clasa :first-of-type va selecta primul element de tipul său în cadrul părintelui, în timp ce pseudo-clasa :last-of-type va selecta ultimul element de acel tip în cadrul părintelui. Pseudo-clasa :only-of-type va selecta un element dacă este singurul de tipul său din părinte.

În exemplul de mai jos, pseudoclasele p:first-of-type și p:last-of-type vor selecta, respectiv, primul și ultimul paragraf din articol, indiferent dacă sunt de fapt primii sau ultimii copii din articolul. Liniile 3 și 6 sunt selectate de acești selectori. Selectorul img:only-of-type specifică imaginea de pe linia 5 ca singura imagine care apare în articol.

P:primul-de-tip (...) p:ultimul-de-tip (...) img:numai-de-tip (...)

...

Acest paragraf va fi selectat

Acest paragraf va fi selectat

...

În cele din urmă, există mai multe pseudoclase de structură și poziție care selectează elemente pe baza numărului sau expresiei algebrice. Aceste pseudoclase includ :nth-child(n) , :nth-last-child(n) , :nth-of-type(n) și :nth-last-of-type(n) . Toate aceste pseudo-clase unice încep cu nth și iau un număr sau o expresie în paranteze, care este notat cu simbolul n.

Numărul sau expresia care se află în paranteze specifică exact ce element sau elemente trebuie selectate. Folosind un anumit număr se va calcula elementul individual de la începutul sau sfârșitul arborelui documentului și apoi îl va selecta. Folosirea unei expresii va evalua setul de elemente de la începutul sau sfârșitul arborelui documentului și va selecta un grup sau o repetare a acestora.

Utilizarea numerelor și expresiilor în pseudo-clase

După cum sa menționat, utilizarea unui număr specific într-o pseudo-clasă calculează de la începutul sau sfârșitul arborelui documentului și selectează un element potrivit. De exemplu, selectorul li:nth-child(4) va selecta al patrulea element din listă. Numărarea începe de la primul element din listă și crește cu câte unul pentru fiecare element din listă până când în cele din urmă găsește al patrulea element și îl selectează. Când se specifică un anumit număr, acesta trebuie să fie pozitiv.

Expresiile pentru pseudo-clase vin în formatul an, an+b, an-b, n+b, -n+b și -an+b. Aceeași expresie poate fi tradusă și citită ca (a×n)±b. Variabila a denotă factorul prin care vor fi calculate elementele, în timp ce variabila b indică locul în care va începe sau va avea loc numărătoarea.

De exemplu, selectorul li:nth-child(3n) va specifica fiecare al treilea element al unui element de listă. Folosirea acestei expresii corespunde cu 3x0, 3x1, 3x2 și așa mai departe. După cum puteți vedea, rezultatele acestei expresii selectează al treilea, al șaselea și fiecare element care este un multiplu de trei.

În plus, cuvintele cheie pare și impare pot fi folosite ca valori. După cum v-ați aștepta, ei vor alege elemente impare sau, respectiv, pare. Dacă cuvintele cheie nu sunt atractive, atunci expresia 2n+1 va selecta toate elementele impare, iar expresia 2n va selecta toate elementele pare.

Selectorul li:nth-child(4n+7) va defini fiecare al patrulea element din listă, începând cu al șaptelea element. Din nou, folosirea acestei expresii este echivalentă cu (4x0)+7, (4x1)+7, (4x2)+7 și așa mai departe. Rezultatele acestei expresii vor selecta al șaptelea, al unsprezecelea, al cincisprezecelea și al patrulea element.

Când se utilizează n fără un număr de început, a este evaluat la 1. Selectorul li:nth-child(n+5) va selecta fiecare element din listă începând cu al cincilea, lăsând primele patru elemente din listă neselectate. În expresie, aceasta este analizată ca (1×0)+5, (1×1)+5, (1×2)+5 și așa mai departe.

Numerele negative pot fi folosite pentru a crea lucruri mai complexe. De exemplu, selectorul li:nth-child(6n-4) va număra fiecare al șaselea element din listă, începând cu -4, selectând al doilea, al optulea, al paisprezecelea element din listă și așa mai departe. Același selector li:nth-child(6n-4) poate fi scris și ca li:nth-child(6n+2) , fără a utiliza variabila b negativă.

O variabilă negativă sau un argument negativ n trebuie urmat de o variabilă pozitivă b. Când argumentul n este precedat de o variabilă negativă a, atunci variabila b determină cât de mare va fi atins numărul. De exemplu, selectorul li:nth-child(-3n+12) va selecta fiecare al treilea element din listă din primele douăsprezece elemente. Selectorul li:nth-child(-n+9) va selecta primele nouă elemente din listă, deoarece variabila a fără un număr declarat este implicit -1.

:nth-child(n) și :nth-ultimul-child(n)

Având o înțelegere generală a modului în care funcționează numerele și expresiile în pseudo-clase, să aruncăm o privire la pseudo-clase utile în care aceste numere și expresii pot fi utilizate, primele dintre acestea fiind :nth-child(n) și :nth-last -copil(n) . Aceste pseudo-clase funcționează similar cu :first-child și :last-child , prin aceea că examinează și numără toate elementele din părinte și selectează doar un anumit element. :nth-child(n) funcționează de la începutul arborelui documentelor, iar :nth-last-child(n) funcționează de la sfârșitul arborelui documentelor.

Folosind pseudoclasa :nth-child(n), să aruncăm o privire la selectorul li:nth-child(3n). Acesta definește fiecare al treilea element din listă, astfel încât rândurile 4 și 7 vor fi selectate.

Li:nth-child(3n) (...)

• Acest articol va fi selectat
• Acest articol va fi selectat

Folosirea unei expresii diferite în pseudoclasa :nth-child(n) va produce o selecție diferită. Selectorul li:nth-child(2n+3) , de exemplu, va defini fiecare al doilea element din listă, începând cu al treilea. Ca rezultat, elementele din rândurile 4 și 6 vor fi selectate.

Li:nth-child(2n+3) (...)

• Acest articol va fi selectat
• Acest articol va fi selectat

Schimbarea expresiei din nou, de data aceasta cu o valoare negativă, va oferi o nouă alegere. Aici selectorul li:nth-child(-n+4) specifică primele patru elemente ale listei, lăsând elementele rămase neselectate, astfel încât rândurile de la 1 la 4 vor fi selectate.

Li:nth-child(-n+4) (...)

• Acest articol va fi selectat
• Acest articol va fi selectat
• Acest articol va fi selectat
• Acest articol va fi selectat

Adăugarea unui număr negativ înainte de n schimbă din nou selecția. Aici selectorul li:nth-child(-2n+5) definește fiecare al doilea articol din listă din primele cinci elemente, astfel încât articolele din rândurile 2, 4 și 6 vor fi selectate.

Li:nth-child(-2n+5) (...)

• Acest articol va fi selectat
• Acest articol va fi selectat
• Acest articol va fi selectat

Schimbarea pseudoclasei :nth-child(n) în :nth-last-child(n) schimbă direcția de numărare, astfel încât numărarea să înceapă de la sfârșitul arborelui documentului. Selectorul li:nth-last-child(3n+2), de exemplu, specifică fiecare al treilea element din listă, începând de la al doilea până la ultimul, mergând spre începutul listei. Aici sunt selectate elementele din listă din rândurile 3 și 6.

Li:nth-ultimul-copil(3n+2) (...)

• Acest articol va fi selectat
• Acest articol va fi selectat

:nth-of-type(n) și :nth-ultimul-of-type(n)

Pseudoclasele :nth-of-type(n) și :nth-last-of-type(n) sunt foarte asemănătoare cu :nth-child(n) și :nth-last-child(n) , dar în loc de numărarea fiecărui element În cadrul părintelui, pseudoclasele :nth-of-type(n) și :nth-last-of-type(n) numără doar elemente de tipul lor. De exemplu, când se numără paragrafele dintr-un articol, pseudoclasele :nth-of-type(n) și :nth-last-of-type(n) vor omite orice titluri

sau elemente diferite care nu sunt paragrafe, în timp ce :nth-child(n) și :nth-last-child(n) vor număra fiecare element, indiferent de tipul său, selectându-le doar pe cele care se potrivesc cu elementul din selectorul specificat. În plus, toate aceleași expresii posibile utilizate în :nth-child(n) și :nth-last-child(n) sunt disponibile și în pseudo-ul :nth-of-type(n) și :nth-last-of-type -clasele (n) .

Folosind pseudoclasa :nth-of-type(n) în selectorul p:nth-of-type(3n), putem defini fiecare al treilea paragraf din părinte, indiferent de alte elemente înrudite din părinte. Aici sunt selectate paragrafele de pe rândurile 5 și 9.

P:nth-of-type(3n) (...)

...

Acest paragraf va fi selectat

...

Acest paragraf va fi selectat

Ca și în cazul pseudoclaselor :nth-child(n) și :nth-last-child(n), principala diferență dintre :nth-of-type(n) și :nth-last-of-type(n) este că acel :nth-of-type(n) numără elementele de la începutul arborelui documentului și :nth-last-of-type(n) numără elementele de la sfârșitul arborelui documentului.

Folosind pseudoclasa :nth-last-of-type(n) putem scrie un selector p:nth-last-of-type(2n+1) care specifică fiecare al doilea paragraf de la sfârșitul elementului părinte, începând cu ultimul paragraf. Aici sunt selectate paragrafele de pe rândurile 4, 7 și 9.

P:nth-ultim-de-tip(2n+1) (...)

...

Acest paragraf va fi selectat

...

Acest paragraf va fi selectat

Acest paragraf va fi selectat

Pseudo-clasă:țintă

Pseudoclasa :target este folosită pentru a stila elementele atunci când valoarea atributului id se potrivește cu pointerul fragmentului URI. Această porțiune a URI este recunoscută folosind caracterul hash (#) și ceea ce urmează imediat. Adresa http://example.com/index.html#hello include un indicator de salut. Când se potrivește cu valoarea atributului id al unui element din pagină, de exemplu,

Pseudo-clasa: gol

Pseudo-clasa :empty vă permite să selectați elemente care nu conțin copii sau text. Comentariile, instrucțiunile de procesare și textul gol nu sunt considerate copii și nu vor fi tratate ca atare.

Folosirea pseudo-clasei div:empty va determina

fără copii sau text. Selectat mai jos

în rândurile 2 și 3 pentru că sunt complet goale. Chiar dacă al doilea

conține un comentariu, nu este considerat copil, astfel plecând

gol. Primul

conține text, al treilea conține un singur spațiu, iar ultimul conține un element copil , deci toate sunt excluse și nu selectate.

Div: gol (...)

Buna ziua

Pseudo-clasă: nu

Pseudoclasa :not(x) ia un argument și filtrează selecția care va fi făcută. Selectorul p:not(.intro) folosește pseudoclasa :not pentru a defini fiecare paragraf fără o clasă intro. Elementul paragraf este definit la începutul selectorului, urmat de pseudoclasa :not(x). În interiorul parantezei este un selector de negație, în acest caz clasa de intro.

Mai jos, atât selectoarele div:not(.awesome) cât și :not(div) folosesc pseudoclasa :not(x). Selectorul div:not(.awesome) definește orice

fără clasa awesome , în timp ce selectorul :not(div) specifică un element care nu este

. Ca rezultat, este selectat

pe linia 1, precum și două secțiuni pe rândurile 3 și 4. Singurul articol neselectat este

cu clasa minunată, deoarece depășește două pseudo-clase.

Div:not(.awesome) (...) :not(div) (...)

Acest div va fi selectat

...

Această secțiune va fi selectată Această secțiune va fi selectată

Exemplu cu pseudo-clase

...

Număr	Jucător	Poziţie	Înălţime	Greutate
8	Marco Belinelli	G	6-5	195
5	Carlos Boozer	F	6-9	266

Tabel ( chenar-restrângere: separat; margine-spațiere: 0; lățime: 100%; ) th, td ( padding: 6px 15px; ) th ( fundal: #42444e; culoare: #fff; text-align: left; ) tr :primul copil th:first-child ( chenar-sus-stânga-raza: 6px; ) tr:first-child th:last-child ( chenar-sus-dreapta-raza: 6px; ) td ( chenar-dreapta: 1px solid #c6c9cc; chenar-jos: 1px solid #c6c9cc; ) td:primul copil (chenar-stânga: 1px solid #c6c9cc; ) tr:nth-child(even) td ( fundal: #eaeaed; ) tr:last- copil td:primul-copil ( chenar-raza-jos-stânga: 6px; ) tr:ultimul-copil td:ultimul-copil (chenar-raza-jos-dreapta: 6px; )

Prezentare generală a pseudo-claselor

Exemplu	Nume	Descriere
o legătură	Link pseudo-clasă	Selectează link-uri care nu au fost vizualizate de utilizator.
a: vizitat	Link pseudo-clasă	Selectează link-uri care au fost vizitate de utilizator.
a:hover	Pseudo-clasa de actiune	Selectează un element când utilizatorul trece cu mouse-ul peste el.
a:activ	Pseudo-clasa de actiune	Selectează un element atunci când utilizatorul îl activează.
concentrare	Pseudo-clasa de actiune	Selectează un element atunci când utilizatorul a făcut din el un punct de atenție.
intrare: activat	Pseudo-clasa de stat	Selectează un element într-o stare accesibilă.
intrare: dezactivat	Pseudo-clasa de stat	Selectează un element în stare dezactivată, prin atributul dezactivat.
intrare: verificat	Pseudo-clasa de stat	Selectează o casetă de selectare sau un buton radio care a fost bifat.
intrare: nedeterminat	Pseudo-clasa de stat	Selectează o casetă de selectare sau un buton radio care nu a fost bifat sau debifat, lăsându-l într-o stare nedefinită.
li:primul copil	Pseudoclasă structurală	Selectează primul element din părinte.
li:ultimul-copil	Pseudoclasă structurală	Selectează ultimul element din părinte.
div:copil-unic	Pseudoclasă structurală	Selectează un singur element în părinte.
p: primul de tip	Pseudoclasă structurală	Selectează primul element de tipul său din părinte.
p: ultimul de tip	Pseudoclasă structurală	Selectează ultimul element de tipul său din părinte.
img:numai-de-tip	Pseudoclasă structurală	Selectează singurul element de tipul său din părinte.
li:nth-child(2n+3)	Pseudoclasă structurală	Selectează un element care se potrivește cu un anumit număr sau expresie, numărând toate elementele de la începutul arborelui documentului.
li:nth-ultimul-copil(3n+2)	Pseudoclasă structurală	Selectează un element care se potrivește cu un anumit număr sau expresie, numărând toate elementele de la sfârșitul arborelui documentului.
p:nth-of-type(3n)	Pseudoclasă structurală	Selectează un element care se potrivește cu un anumit număr sau expresie, numărând doar elementele de acest tip de la începutul arborelui documentului.
p:nth-ultim-de-tip (2n+1)	Pseudoclasă structurală	Selectează un element care se potrivește cu un anumit număr sau expresie, numărând doar elementele de acest tip de la sfârșitul arborelui documentului.
secțiune:țintă	Pseudo-clasă:țintă	Selectează un element a cărui valoare a atributului id se potrivește cu identificatorul de fragment URI.
div:gol	Pseudo-clasă: gol	Selectează un element care nu conține copii sau text.
div:nu(.superb)	Pseudo-clasă: nu	Selectează un element care nu este reprezentat de argumentul declarat.

Pseudo-elemente

Pseudo-elementele sunt elemente dinamice care nu există în arborele documentului și atunci când sunt utilizate cu selectoare, aceste pseudo-elemente produc părți unice ale paginii care pot fi stilizate. unu punct important Trebuie remarcat faptul că într-un selector poate fi folosit un singur pseudo-element la un moment dat.

Pseudo-elemente text

Primele pseudo-elemente implementate au fost pseudoelementele :first-letter și :first-line text. Pseudo-elementul :first-letter specifică prima literă de text dintr-un element, în timp ce :first-line specifică prima linie de text dintr-un element.

În demonstrația de mai jos, prima literă a unui paragraf cu clasa alpha este setată la o dimensiune și o culoare mare a fontului, la fel ca și prima linie a unui paragraf cu clasa bravo . Această selecție se face folosind pseudo-clasele text :first-letter și :first-line, respectiv.

Alfa:prima literă, .bravo:prima linie (culoare: #ff7b29; dimensiunea fontului: 18px; )

Lorem ipsum dolor...

Integer eget enim...

Demonstrarea pseudo-elementelor textului

Conținut generat de pseudo-elemente

Pseudo-elementele :before și :after creează noi pseudo-elemente inline numai în cadrul elementului selectat. Cel mai adesea, aceste pseudo-elemente sunt utilizate în combinație cu proprietatea de conținut pentru a adăuga informații minore în pagină, cu toate acestea, acest lucru nu este întotdeauna cazul. Utilizări suplimentare Aceste pseudo-elemente pot adăuga componente UI la o pagină fără a fi nevoie să aglomerați documentul cu elemente non-semantice.

Pseudo-elementul :before creează un pseudo-element înainte sau în fața elementului selectat, în timp ce :after creează un pseudo-element după sau în spatele elementului selectat. Aceste pseudo-elemente apar imbricate în cadrul elementului selectat mai degrabă decât în ​​afara acestuia. Mai jos, pseudo-elementul :after este folosit pentru a afișa valoarea atributului href a linkurilor în paranteze după linkul în sine. Aceste informații sunt utile, dar în cele din urmă, nu orice browser acceptă aceste pseudo-elemente.

A:după (culoare: #9799a7; conținut: " (" attr(href) ")"; dimensiunea fontului: 11px; )

Căutați pe Internet Aflați cum să creați un site web

Demonstrarea pseudo-elementelor generate de conținut

Pseudo-element::selectie

Pseudo-elementul ::selection definește porțiunea selectată de utilizator a documentului. Selecția poate fi apoi stilizată, dar numai folosind proprietățile culoare , fundal , culoare de fundal și umbră text. Este de remarcat faptul că proprietatea imagine de fundal este ignorată. Cu toate acestea, proprietatea scurtă de fundal poate fi folosită pentru a adăuga culoare, dar orice imagine va fi ignorată.

Colon (:) și două puncte (::)

Pseudo-elementul ::selection a fost adăugat la CSS3 într-o încercare de a separa pseudo-clasele de pseudo-elemente folosind două puncte duble care au fost adăugate la pseudo-elemente. Din fericire, cele mai multe browsere vor accepta atât valorile două puncte, cât și cele două puncte pentru pseudo-elemente, dar pseudo-elementul ::selection trebuie să înceapă întotdeauna cu două puncte.

Când selectați orice text din demonstrația de mai jos, fundalul devine portocaliu datorită pseudo-elementului ::selection. Aruncă o privire și la ::-moz-selection. Prefixul Mozilla a fost adăugat pentru a furniza sprijin mai bun pentru toate browserele.

::-moz-selection ( fundal: #ff7b29; ) ::selection ( fundal: #ff7b29; )

Demonstrație de pseudo-elemente

Continuați lectură

Săgeată ( fundal: #2db34a; culoare: #fff; afișare: bloc inline; înălțime: 30px; înălțime linie: 30px; umplutură: 0 12px; poziție: relativă; text-decor: niciunul; ) .săgeată: înainte, . săgeată:după (conținut: „”; înălțime: 0; poziție: absolut; lățime: 0; ) .săgeată:înainte ( chenar-jos: 15px solid #2db34a; chenar-stânga: 15px solid transparent; chenar-sus: 15px solid #2db34a; stânga: -15px; ) .săgeată:după (chenar-jos: 15px continuu transparent; chenar-stânga: 15px solid #2db34a; chenar-sus: 15px continuu transparent; dreapta: -15px; ) .arrow:hover ( fundal: #ff7b29; ) .săgeată:hover:înainte ( chenar-jos: 15px solid #ff7b29; chenar-sus: 15px continu #ff7b29; ) .arrow:hover:după ( chenar-stânga: 15px solid #ff7b29; )

Suport selector de browser

În timp ce acești selectoare oferă capacități diferite și capacitatea de a face lucruri cu adevărat uimitoare folosind CSS, acestea suferă uneori de un suport slab pentru browser. Înainte de a face ceva prea critic, verificați selectoarele pe care doriți să le utilizați în cele mai populare browsere și apoi decideți dacă vi se potrivesc sau nu.

CSS3.info oferă un instrument de testare a selectoarelor CSS3 care vă va informa ce selectoare sunt acceptate de browser. De asemenea, este o idee bună să verificați direct suportul browserului dvs.

Pe Smashing Magazine

Înțelegerea: al n-lea copil Expresii de pseudoclasă pe SitePoint

Îmblanzirea selectoarelor CSS avansate pe Smashing Magazine

Ultima actualizare: 21.04.2016

Definirea unui stil începe cu un selector. De exemplu:

Div( lățime:50px; /* lățime */ înălțime:50px; /* înălțime */ culoarea fundalului:roșu; /* culoarea fundalului */ margine: 10px; /* indentare din alte elemente */ )

În acest caz, selectorul este div . O serie de selectoare moștenesc numele elementelor formatate, de exemplu, div, p, h2 etc. Când un astfel de selector este definit, stilul său va fi aplicat tuturor elementelor care se potrivesc cu acest selector. Adică, stilul definit mai sus va fi aplicat tuturor elementelor

pe pagina web:

selectoare CSS

Există 3 div-uri pe pagină și toate vor fi stilate:

Clase

Uneori, aceleași elemente necesită un stil diferit. Și în acest caz putem folosi clase.

Pentru a defini un selector de clasă în CSS, un punct este plasat înaintea numelui clasei:

RedBlock (culoare de fundal: roșu; )

Numele clasei poate fi arbitrar. De exemplu, în acest caz, numele clasei este „redBlock”. Cu toate acestea, este permisă utilizarea de litere, cifre, cratime și litere de subliniere în numele clasei, iar numele clasei trebuie să înceapă cu o literă.

De asemenea, merită luat în considerare și cazul numelor: denumirile „articol” și „ARTICOL” vor reprezenta clase diferite.

Odată definită o clasă, o putem aplica unui element folosind atributul class. De exemplu:

Să definim și să folosim mai multe clase:

Clasele CSS

Identificatori

Pentru a identifica elementele unice pe o pagină web, se folosesc identificatori, care sunt determinate cu ajutorul atributelor id. De exemplu, o pagină poate avea un bloc de cap sau un antet:

Definirea stilurilor pentru identificatori este similară cu definirea claselor, doar simbolul hash # este folosit în locul unui punct:

Antetul site-ului

Conținut principal

Subsol

Cu toate acestea, este de remarcat faptul că identificatorii au mai mult de-a face cu structura paginii web și mai puțin cu stilul. Clasele sunt folosite pentru stil, mai degrabă decât pentru identificatori.

Selector universal

Pe lângă selectorii de etichete, clase și identificatori, css are și așa-numitul selector universal, care reprezintă asteriscul (*). Se aplică stiluri tuturor elementelor de pe pagina html:

*(culoarea fundalului: roșu; )

Stilizarea unui grup de selectoare

Uneori, anumite stiluri sunt aplicate unei game de selectoare. De exemplu, să presupunem că vrem să aplicăm o subliniere tuturor titlurilor. În acest caz, putem lista selectoarele tuturor elementelor separate prin virgule:

CSS3

Selectoare

Grup de selecție

Un text...

Un grup de selectoare poate conține atât selectori de etichete, cât și selectori de clase și identificatori, de exemplu:

H1, #header, .redBlock(culoare: roșu; )

selectoare CSS definiți elementele cărora li se aplică un set de reguli CSS.

Selectoare de bază

Selector universal Selectează toate elementele. Opțional, poate fi restricționat la un anumit spațiu de nume sau la toate spațiile de nume.
Sintaxă:* ns |* *|*
Exemplu:* se va potrivi cu toate elementele documentului. Selector de tip Selectează toate elementele care au numele de nod dat.
Sintaxă: elementname
Exemplu: intrarea se va potrivi cu orice element este utilizat pentru a crea controale interactive pentru formulare bazate pe web pentru a accepta date de la utilizator; sunt disponibile o mare varietate de tipuri de date de intrare și widget-uri de control, în funcție de dispozitiv și agent de utilizator. „> element. Selector de clasă Selectează toate elementele care au atributul de clasă dat.
Sintaxă:. numele clasei
Exemplu:.index se va potrivi cu orice element care are o clasă de „index”. Selector ID Selectează un element pe baza valorii atributului său id. Într-un document ar trebui să existe un singur element cu un ID dat.
Sintaxă:# idname
Exemplu:#toc se va potrivi cu elementul care are ID-ul „toc”. Selector de atribute Selectează toate elementele care au atributul dat.
Sintaxă:[ attr ] [ attr = valoare ] [ attr ~= valoare ] [ attr |= valoare ] [ attr ^= valoare ] [ attr $= valoare ] [ attr *= valoare ]
Exemplu: va potrivi toate elementele care au setat atributul de redare automată (la orice valoare).

Gruparea selectoarelor

Lista selectoare , este o metodă de grupare, selectează toate nodurile care se potrivesc.
Sintaxă: A, B
Exemplu: div, span se va potrivi cu ambele și ) este containerul generic pentru conținutul fluxului. Nu are niciun efect asupra conținutului sau aspectului până când este stilat folosind CSS.">

elemente.

Combinatoare

Combinatorul descendent Combinatorul (spațiu) selectează nodurile care sunt descendenți ai primului element.
Sintaxă: A B
Exemplu: div span se va potrivi cu toate elementele care se află în interiorul a) este containerul generic pentru conținutul fluxului. Nu are niciun efect asupra conținutului sau aspectului până când este stilat folosind CSS.">

element. Combinator copil Combinatorul > selectează nodurile care sunt copii direcți ai primului element.
Sintaxă: A>B
Exemplu: ul > li va potrivi toate elementele sunt folosite pentru a reprezenta un articol dintr-o listă.">

elementele care sunt imbricate direct în interiorul unui element reprezintă o listă neordonată de elemente, de obicei redată ca o listă cu marcatori.">

element. Combinatorul general de frați Combinatorul ~ selectează frații. Aceasta înseamnă că al doilea element îl urmează pe primul (deși nu neapărat imediat) și ambele au același părinte.
Sintaxă: A~B
Exemplu: p ~ span se va potrivi cu toate elementele care urmează un element reprezintă un paragraf.">

, imediat sau nu. Combinatorul de frați adiacente Combinatorul + selectează frații adiacenți. Aceasta înseamnă că al doilea element îl urmează direct pe primul și ambele au același părinte.
Sintaxă: A+B
Exemplu: h2 + p se vor potrivi cu toate elementele care reprezintă un paragraf.">

elemente care urmează direct an

. Combinator de coloane Cel || combinatorul selectează nodurile care aparțin unei coloane.
Sintaxă: A || B
Exemplu: col || td va potrivi toate elementele definesc o celulă a unui tabel care conține date. Participă la modelul de masă."> elementele care aparțin domeniului elementului definesc o coloană într-un tabel și sunt utilizate pentru definirea semanticii comune pe toate celulele comune. Se găsește în general în cadrul a element."> .

Pseudo

Pseudoclasele: pseudo permit selectarea elementelor pe baza informațiilor de stare care nu sunt conținute în arborele documentului.
Exemplu: a:visited va potrivi toate elementele (sau elementul ancora), cu atributul său href, creează un hyperlink către pagini web, fișiere, adrese de e-mail, locații din aceeași pagină sau orice altceva pe care un URL poate adresa."> elemente care au fost vizitat de utilizator. Pseudoelementele:: pseudo reprezintă entități care nu sunt incluse în HTML.
Exemplu: p::first-line se va potrivi cu prima linie a tuturor elementului care reprezintă un paragraf.">

elemente.

Specificații

Specificație	stare	cometariu

• Programe
• Siguranță
• Știri
• Interesant
• Sfat
• Știri
• Recenzii
• Alăturaţi-ne!

  Peste 6.000 de persoane s-au abonat deja.
  Obțineți cele mai recente articole.

  ABONATI-VA