Ce nu știai despre selectoarele CSS? Selectoare Un exemplu mai realist și mai complex

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

.topic-title (culoare de fundal: galben; )

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

#conținut (lățime: 960px; marjă: 0 automat; )

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ă.

Crom
Firefox
Safari
Operă

3) *

* ( marja: 0; umplutură: 0; )

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.

Crom
Firefox
Safari
Operă

4) X

a ( culoare: verde; ) ol ( margine-stânga: 15px; )

Selector de tip CSS. Cum se selectează toate elementele de același tip dacă nu au nici id, nici clase? Merită să folosiț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.

Crom
Firefox
Safari
Operă

5) X Y

li a (greutate font: bold; text-decor: niciunul; )

Selector de descendenți 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ă o secvență și mai scurtă de selectoare ar putea fi folosită pentru a evidenția un anumit element.

Crom
Firefox
Safari
Operă

6) X + Y

div + p (familie de fonturi: "Helvetica Neue", Arial, sans-serif; dimensiunea fontului: 18px; )

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.

IE7+
Firefox
Crom
Safari
Crom

7) X > Y

#conținut > ul ( chenar: 1px verde continuu; )

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

Element din listă
- Descendent al primului element al listei
Element din listă
Element din listă

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.

Crom
Firefox
Safari
Operă

8) X ~ Y

ol ~ p ( margine-stânga: 10px; )

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.

Crom
Firefox
Safari
Operă

a:link (culoare: verde; ) a:vizitat (culoare: gri; )

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.

Crom
Firefox
Safari
Operă

10)X

a(culoare:roșu;)

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

Crom
Firefox
Safari
Operă

11) X

a (culoare: galben; )

Crom
Firefox
Safari
Operă

12) X

a (culoare: #dfc11f; )

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

Crom
Firefox
Safari
Operă

13)X

a ( fundal: url(path/to/external/icon.png) fără repetare; padding-left: 15px; )

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.

Crom
Firefox
Safari
Operă

14)X

a(culoare:verde;)

Aceasta folosește o expresie regulată și simbolul $ pentru a indica sfârșitul liniei. În acest exemplu, căutăm toate linkurile care se referă la imagini cu extensia .jpg.

Crom
Firefox
Safari
Operă

15) X

a(culoare:verde;)

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.

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. În acest fel puteți indica că linkul este extern și duce la o 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; )

Crom
Firefox
Safari
Operă

17) X:verificat

intrare: bifat ( chenar: 3px la început negru; )

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ă.

Crom
Firefox
Safari
Operă

18) X:după

Pseudo-clasele :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țime: 0; ) .clearfix ( *afișare: bloc inline; _înălțime: 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ă.

Crom
Firefox
Safari
Operă

19) X: hover

div:hover (culoare de fundal: rgba(11,77,130,0.5); )

Aplică un stil specific unui element atunci când cursorul mouse-ului trece peste el. Versiunile mai vechi de Internet Explorer se aplică numai :hover la linkuri.

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

IE6+ (se aplică numai legăturilor din IE6)
Crom
Firefox
Safari
Operă

20) X:nu(selector)

div:not(#conținut) (culoare: gri; )

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; )

Crom
Firefox
Safari
Operă

21) X::pseudoElement

p::prima linie (greutatea fontului: bold; dimensiunea fontului: 24px; )

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; )

Crom
Firefox
Safari
Operă

22) X:primul copil

ul li:primul copil (border-top: none; )

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.

Crom
Firefox
Safari
Opera 3.5+
Android

23) X:ultimul-copil

ul > li:last-child (border-bottom: none; )

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

IE9+ (IE8 acceptă primul copil, dar nu ultimul copil. Microsoft (c))
Crom
Firefox
Safari
Opera 9.6+
Android

24) X:copil singur

div p:copilul singur (culoare: verde; )

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

Crom
Firefox
Safari 3.0+
Opera 9.6+
Android

25) X:nth-child(n)

li:nth-child(3) (culoare: negru; )

Selectează elementul copil după numărul specificat în parametru. selector de al-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.

Crom
Firefox 3.6+
Safari 3.1+
Opera 9.6+
Android 2.1+
iOS 2.0+

26) X:ultimul-copil(n)

li:nth-last-child(2) (culoare: roșu; )

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-lea-ultimul-copil. Această metodă este aceeași cu cea anterioară, dar numărând de la final.

Crom
Firefox 3.6+
Safari 3.1+
Opera 9.6+
Android 2.1+
iOS 2.0+

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

ul:nth-of-type(3) ( chenar: 1px punctat negru; )

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

Crom
Firefox 3.6+
Safari 3.1+
Opera 9.6+
Android 2.1+
iOS 2.0+

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

ul:nth-last-of-type(3) ( chenar: 2px ridge blue; )

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.

Crom
Firefox 3.6+
Safari 3.1+
Opera 9.6+
Android 2.1+
iOS 2.0+

29) X:numai-de-tip

li:numai-de-tip (greutatea fontului: bold; )

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.

Crom
Firefox 3.5+
Safari 3.1+
Opera 9.6+
Android 2.1+
iOS 2.0+

30) X: primul de tip

ul:first-of-type > li:nth-child(3) ( stilul fontului: cursiv; )

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

Crom
Firefox 3.5+
Safari 3.1+
Opera 9.5+
Android 2.1+
iOS 2.0+

Salutare tuturor, Khabrians.
Astăzi, CSS este peste tot în jurul nostru și chiar și un programator mic ar trebui să îl înțeleagă.
Cele mai folosite sunt vechile #id și .class, sunt familiare tuturor celor care au lucrat cu CSS cel puțin o dată.
Desigur, lumea Selectorilor nu se limitează la asta. Lucrez cu CSS de ceva timp și vreau să împărtășesc cât mai mulți selectori utili. Toate determină stilul unui anumit obiect.

Selectoare CSS

Explic mulți selectori care se aplică exemplului de mai sus.

.clasă

(Ex. .main) Acest selector combină toate elementele cu clasa „principal”. S-a născut cu mult timp în urmă și este implicat activ în dezvoltare.

#id

(Ex. #Block_Form) Acest selector combină elemente cu id = „Block_Form” Care este diferența dintre .class și #id - și diferența poate fi înțeleasă cu un exemplu: faptul că NUMĂRUL PASAPORT = id, NUMELE = clasă. De asemenea, este foarte important ca - Identificatorul (id) poate fi apelat dintr-un script folosind funcția GetElementById, spre deosebire de o clasă.
Clasa poate fi folosită de mai multe ori, dar identificatorul trebuie să fie unic.

*

Selectează, combină toate elementele
(Ex. *) (culoare de fundal: galben; ))

element

(Exp p) Combină toate elementele etichetei p.

element

(Ex. div,p) Combină toate elementele div și toate elementele p
.
Selectoare similare pot fi incluse și în acest grup:

element element

(Ex. div p) Selectează toate p elementele din interiorul unui div.

element>element

(Ex. div>p) Unește toate p pentru care părintele este div.

element+element

(Ex. div+p) Combină toate p care sunt situate imediat după div.

(Ex.) Combină toate elementele cu un atribut țintă

(Ex.) Combină toate elementele cu ținta dată="_blank"

(Ex.) Combină toate elementele care conțin „Apple” în titlu

(Ex.) Combină toate elementele cu un atribut de clasă care începe cu „top”

Toate etichetele au fost scrise fără „<>".

În continuare, cred că este absolut necesar să arătăm acești selectori, deoarece sunt foarte importanți și sunt extrem de des folosiți în rezolvarea multor probleme - de la animații simple cu trecerea cursorului, design de linkuri, imagini etc., până la obiectivul mai global de reducere. cod în general.

Se mai numesc și pseudo-clase:

:legătură

(Ex. a:link) Unește toate linkurile care nu au fost încă vizitate (Ex. a:visited) Unește toate linkurile pe care utilizatorul le-a vizitat deja

:activ

(Ex. a:active) Pseudo-clasa:active definește stilul pentru legătura activă. Linkul devine activ atunci când faceți clic pe el.

:planare

(Ex. a:hover) Când mișcați mouse-ul, linkul poate schimba stilul

:concentrare

(Ex. input:focus) Schimbă stilul la focalizare. în practică este adesea folosit pentru a evidenția câmpuri de formular atunci când se concentrează asupra acestuia

:prima literă

(Ex. p:first-letter) Definește stilul pentru primul caracter din textul elementului

:prima linie

(Ex. p:first-line) Specifică stilul primei linii. Îl folosesc pentru a schimba culoarea textului, culoarea fundalului și fontul, dar după cum arată oamenii Habrumel, funcțiile sale nu se limitează la asta

:primul copil

(Exemplu: p:first-child) Pentru a explica simplu, se aplică stilul primului copil al părintelui său. În exemplu, dacă p este primul element al părintelui său
Urmează două clase foarte interesante:

:inainte de

(Exp. p: înainte)

:după

(Exp. p:după)
Sunt folosite în cazurile în care trebuie să afișați conținutul dorit înainte sau după conținutul elementului la care este adăugat. Funcționează împreună cu conținutul: proprietate. De asemenea, le folosesc ca elemente suplimentare în loc de div-uri, caz în care trebuie să scrieți conținut:"";. De asemenea, trebuie să rețineți că atunci când adăugați:before la un element bloc, valoarea proprietății de afișare poate fi doar: bloc, inline, niciunul, element-listă. Toate celelalte valori vor fi tratate ca bloc. Când adăugați: înainte la un element inline, afișarea este limitată la valorile inline și niciunul. Toate celelalte vor fi tratate ca inline.
:before moștenește stilul din elementul la care este adăugat.

:lang(limba)

(Exemplu: p:lang(it)) Un element destul de simplu, dar uneori necesar - de exemplu: Definește stilul fiecărui p cu un atribut lang a cărui valoare începe cu „it”

Selectoare CSS3

Aceste selectoare sunt de mare interes, deoarece puțini oameni îi folosesc și, desigur, vreau să-mi dau seama cum să le folosesc, așa că voi da exemple. De asemenea, în acest grup de selectoare din IE8 îndelungat și anterioare, DOCTYPE trebuie declarat.

element1~element2

(Exp. p~ul)
p~ul ( background:red; ) Setează culoarea de fundal pentru toate elementele ul care preced p cu același părinte. Aproximativ vorbind, în acest exemplu, fundalul va fi roșu doar pentru acele „liste” care apar după părintele etichetei p.

Un element div.

Articol
Articol
Articol

- în acest caz nu se va întâmpla nimic, dar în

Articol
Articol
Articol

iar în acest caz, câmpurile Item vor avea o culoare de spate - roșu.

(Ex. a) Urmând exemplul, definește stilul fiecărui a pentru care valoarea elementului src începând cu „https”. Iată un alt exemplu:

elementul 1

elementul 2

elementul 3

Punctul 4

Mai simplu spus, acest selector face posibilă setarea culorii de fundal pe toate elementele div care au o valoare de atribut de clasă care începe cu „test” - și anume item3, item4.

(Ex. a) Selectează fiecare etichetă pentru care valoarea atributului SRC se termină cu „. PDF. Și iată un alt exemplu vizual:

Punctul 1

Punctul 2

Punctul 3

Punctul 4

În acest exemplu, utilizarea acestui selector va fi foarte clar vizibilă, și anume, Item1 (datorită faptului că clasa se termină cu _test) și item3 va fi revopsit în Roșu.

(Ex. a) Selectează fiecare etichetă pentru care valoarea atributului SRC conține subșirul „w3schools”.

elementul 1

elementul 2

elementul 3

Punctul 4

În acest exemplu, rezultatul va fi rândurile umbrite item1, item3, item4.

:primul de tip

(Exp. p:first-of-type) Specifică regulile de stil pentru primul element din lista de copii a părintelui său.

: ultimul de tip

(Exp. p:last-of-type) Setează, respectiv, regulile de stil pentru ultimul element din lista de copii a părintelui său.

:numai-de-tip

(Exp. p:only-of-type) Dar acesta se aplică unui element copil de tipul specificat numai dacă este singurul element părinte. La fel ca:first-of-type:last-of-type sau:nth-of-type(1):nth-last-of-type(1).

:singurul copil

(Exp. p:only-child) Un astfel de element se aplică, ca în exemplu, elementului copil p, numai dacă este singurul părinte.

Următoarele două pot fi folosite bine și pentru o anumită succesiune - impar (impar), par (par) sau un număr (1,2,3... sau expresii 2n+1) date în (X):

:nth-child(n)

(Ex. p:nth-child(2)) Pentru fiecare

Care este al doilea copil al părintelui.

: al-al-lea-ultimul-copil(n)

(Exp. p:nth-last-child(2)) Același sens ca și precedentul, cu excepția faptului că numărarea nu este de la primul element, ci de la ultimul.

:nth-of-type(n)

(Ex. p:nth-of-type(2)) Folosit pentru a adăuga stil elementelor de tipul specificat pe baza numerotării. De exemplu, pentru imaginile din apropierea titlului, utilizați valoarea Float: -left sau -right.

:nth-ultimul-de-tip(n)

(Exp. p:nth-last-of-type(2)) La fel ca și precedentul, dar numărarea se efectuează nu de la primul element, ci de la ultimul.

:ultimul copil

(Exemplu: p:last-child) Acest selector specifică stilul ultimului element al părintelui său.

De asemenea, merită subliniat:

:rădăcină

(Exemplu:rădăcină) Acest selector definește elementul rădăcină al documentului, cu alte cuvinte - .

:gol

(Exp. p:empty) Definește elementele goale - fără elemente secundare, text sau spații albe.

:ţintă

(Exemplu #news:target) În general, aceasta este o definiție bazată pe elementul țintă. În exemplu, definiția ID-ului curent este #news element. Folosit pentru URL.

:activat

(Ex. input:enabled) Se aplică formularelor ca acces la elemente de formular accesibile (nu dezactivate - dezactivate), iartă tautologia.

:dezactivat

(Ex. input:disabled) Cu alte cuvinte, se aplică stilului elementelor de formular dezactivate.

:verificat

(Ex. input:checked) Această pseudo-clasă se aplică elementelor de interfață, cum ar fi casetele de selectare și radiourile, atunci când sunt activate, desigur.

:nu(selector)

(Ex. :not(p)) În exemplu, stilul este aplicat tuturor elementelor care nu sunt p. Selectorul poate fi pseudo-clase, etichete, identificatori, clase și selectori de atribute.

În acest articol vom vorbi despre selectoare CSS. Ne vom uita atât la selectoarele CSS vechi, pe care chiar și IE6 le acceptă, cât și la selectoarele CSS3 complet noi, care acceptă doar cele mai recente versiuni de browsere. Deci, să începem.

1.

* ( marja: 0; umplutură: 0; )

Să începem cu cele mai simple lucruri și apoi să trecem la lucruri mai avansate.

Acest selector CSS selectează fiecare element de pe pagină. Mulți dezvoltatori îl folosesc pentru a reseta marjele și valorile de umplutură ale tuturor elementelor. La prima vedere, acest lucru este convenabil, dar este totuși mai bine să nu faceți acest lucru în codul de producție. Acest selector CSS este prea greu pentru browser.

* poate fi folosit și pentru a evidenția elemente copil.

#container * ( chenar: 1px negru solid; )

În acest caz, toate elementele copil ale #containerului sunt selectate. Din nou, încercați să nu îl folosiți excesiv.

Compatibilitate

IE6+
Firefox
Crom
Safari
Operă

2. #X

container (lățime: 960 px; margine: auto; )

Un semn hash înainte de selectorul CSS X va evidenția elementul cu id = X. Este foarte simplu, dar aveți grijă când utilizați id.

Întrebați-vă: trebuie neapărat să evidențiez după id?

Valorile id blochează stilul strâns pe element și nu sunt reutilizabile. Ar fi de preferat să folosiți clase, nume de etichete sau chiar pseudo-clase.

Compatibilitate

IE6+
Firefox
Crom
Safari
Operă

3.X

eroare (culoare: roșu; )

Acesta este un selector CSS al clasei X. Diferența dintre id și clasă este că o clasă poate deține mai multe elemente pe o pagină. Folosiți clase atunci când doriți să aplicați un stil mai multor elemente de același tip. Când utilizați id, va trebui să scrieți un stil pentru fiecare element individual.

Compatibilitate

IE6+
Firefox
Crom
Safari
Crom

4. X Y

li a ( text-decor: niciuna; )

Selectorul de elemente copil CSS este cel mai comun. Dacă trebuie să selectați elemente de un anumit tip din mai multe elemente copil, utilizați acest selector. De exemplu, trebuie să selectați toate legăturile care se află în elementul li. În acest caz, utilizați acest selector.

Nu ar trebui să faceți selectoare CSS caX Y Z A B.eroare. Întrebați-vă întotdeauna dacă este necesar să scrieți un selector CSS atât de greoi pentru a selecta un anumit element.

Compatibilitate

IE6+
Firefox
Crom
Safari
Crom

5.X

a (culoare: roșu; ) ul ( margine-stânga: 0; )

Ce se întâmplă dacă doriți să acoperiți toate elementele unui anumit tip pe o pagină? Păstrați-o simplu, utilizați un selector de tip CSS. Dacă trebuie să selectați toate listele neordonate, utilizați ul().

Compatibilitate

IE6+
Firefox
Crom
Safari
Operă

a:link ( culoare: roșu; ) a:visted ( culoare: violet; )

Folosim pseudo-class:link pentru a evidenția toate linkurile care nu au fost încă făcute clic.

Dacă trebuie să aplicăm un anumit stil link-urilor deja vizitate, atunci folosim pseudoclasa: vizitat.

Compatibilitate

IE7+
Firefox
Crom
Safari
Operă

7. X+Y

ul + p (culoare: roșu; )

Selectează următorul element. El va alege numai un element de tip Y care vine imediat după elementul X În exemplu, textul primului paragraf după fiecare ul va fi roșu.

Compatibilitate

IE7+
Firefox
Crom
Safari
Crom

8. X>Y

div#container > ul ( chenar: 1px negru solid; )

Diferența dintre standardul X Y și X > Y este că selectorul CSS în cauză va selecta doar elementele secundare imediate. De exemplu, luați în considerare următorul cod.

Element din listă
- Element copil
Element din listă
Element din listă
Element din listă

Selectorul CSS #container > ul va selecta numai uls care sunt copii imediati ai div-urilor cu id = container . Nu va selecta, de exemplu, uls care sunt copii ai primelor li s.

Prin urmare, puteți obține beneficii de performanță folosind acest selector CSS. De fapt, acest lucru este recomandat în special atunci când lucrați cu jQuery sau alte biblioteci care selectează elemente pe baza regulilor selectorului CSS.

Compatibilitate

IE7+
Firefox
Crom
Safari
Operă

9. X ~ Y

ul ~ p (culoare: roșu; )

Acest selector CSS este foarte asemănător cu X+Y, cu toate acestea, este mai puțin restrictiv. Folosind ul + p se va selecta doar primul element după X. În acest caz, toate p elementele care merg la ul vor fi selectate.

Compatibilitate

IE7+
Firefox
Crom
Safari
Operă

10.X

a(culoare:verde;)

Selectorii CSS pot folosi, de asemenea, atribute. De exemplu, în acest exemplu am selectat toate linkurile care au atributul title. Alte link-uri vor rămâne neafectate.

Compatibilitate

IE7+
Firefox
Crom
Safari
Operă

11.X

a (culoare: #ffde00; )

Vă rugăm să rețineți că există citate. Nu uitați să faceți același lucru în jQuery și alte biblioteci JavaScript în care elementele sunt selectate folosind selectoare CSS. Ori de câte ori este posibil, utilizați întotdeauna selectoare CSS3 CSS.

O regulă bună, dar prea strictă. Ce să faci dacă linkul nu duce direct la, ci spre exemplu? În aceste cazuri putem folosi expresii regulate.

Compatibilitate

IE7+
Firefox
Crom
Safari
Crom

12.X

a (culoare: #1f6053; )

Compatibilitate

IE7+
Firefox
Crom
Safari
Operă

13.X

a ( fundal: url(path/to/external/icon.png) fără repetare; padding-left: 10px; )

V-ați întrebat vreodată cum unele site-uri web pot afișa o pictogramă mică lângă link-urile externe? Sunt sigur că le-ai mai văzut, sunt foarte memorabile.

„^” este caracterul cel mai des folosit în expresiile regulate. Este folosit pentru a marca începutul unei linii. Dacă vrem să acoperim toate etichetele al căror href începe cu http, trebuie să folosim selectorul CSS de mai sus.

Vă rugăm să rețineți că nu căutăm „http://”. Acest lucru nu este corect deoarece adresele care încep cu https:// nu sunt luate în considerare

Ce se întâmplă dacă vrem să setăm un stil numai pentru link-urile care duc la o fotografie? Trebuie să găsești Sfârşit linii.

Compatibilitate

IE7+
Firefox
Safari
Operă

14.X

a(culoare:roșu;)

Din nou, folosim caracterul expresiei regulate „$” pentru a indica sfârșitul liniei. În aceasta, căutăm link-uri care se referă la fișiere jpg sau URL-uri care au „.jpg” la sfârșit.

Compatibilitate

IE7+
Firefox
Safari
Operă

15.X

a( culoare: roșu; )

Cum putem scrie acum un selector CSS care va evidenția link-uri către toate tipurile de imagini? De exemplu, am putea scrie astfel:

A, a, a, a (culoare: roșu; )

Dar acest lucru este ineficient. O altă soluție posibilă este utilizarea atributelor personalizate. De ce nu adăugăm propriul nostru atribut tip de fișier de date in fiecare link?

Link imagine

A (culoare: roșu; )

Compatibilitate

IE7+
Firefox
Safari
Operă

16.X

a (culoare: roșu; ) a ( chenar: 1px negru solid; )

Iată ceva special. Nu toată lumea știe despre acest selector CSS. Tilul (~) vă permite să evidențiați un anumit atribut dintr-o listă de atribute separate prin virgulă.

De exemplu, ne putem seta propriul atribut data-info, care include mai multe cuvinte cheie separate prin spații. Deci, putem indica că linkul este extern și că se leagă la o imagine.

Faceți clic pe Mine

Aici, codul HTML este în vigoare, acum să scriem stilurile.

Nu-i rău, nu?

Compatibilitate

IE7+
Firefox
Safari
Operă

17. X:verificat

intrare: bifat ( chenar: 1px negru solid; )

Această pseudo-clasă evidențiază doar elementele UI, cum ar fi un buton radio sau o casetă de selectare. Mai mult, cele care sunt marcate/selectate. Foarte simplu.

Compatibilitate

IE9+
Firefox
Safari
Operă

18. X:dupa

Pseudo-clasele :before și :after sunt foarte cool. Se pare că în fiecare zi există noi modalități de a le folosi eficient. Pur și simplu generează conținut în jurul elementului selectat.

Mulți oameni s-au familiarizat cu aceste pseudo-clase în timp ce lucrau cu hack-ul clear-fix.

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

Acest hack folosește :after pentru a adăuga un spațiu după un element și pentru a preveni împachetarea acestuia.

Conform specificației CSS3, trebuie să utilizați două puncte (::). Cu toate acestea, puteți utiliza un singur două puncte pentru compatibilitate.

Compatibilitate

IE8+
Firefox
Safari
Operă

19. X:hover

div:hover ( fundal: #e3e3e3; )

Doriți să aplicați un stil unui element când treceți cu mouse-ul peste el? Apoi acesta CSS-selector pentru tine.

Vă rugăm să rețineți că versiunile mai vechi de Internet Explorer utilizează: planare doar pentru linkuri.

Acest CSS-selectorul este adesea folosit pentru a pune marginea-de jos la link-uri atunci când sunt trecute cu mouse-ul.

A:hover (chenar-jos: 1px negru solid; )

chenar-jos: 1px negru solid; arata mai bine decat text-decor: subliniere;

Compatibilitate

IE6+ (În IE6: hover trebuie aplicat linkului)
Firefox
Safari
Operă

20. X:nu(selector)

div:not(#container) (culoare: albastru; )

Pseudoclasa de negație poate fi foarte utilă. Să presupunem că trebuie să selectați toate div-urile, cu excepția celui cu id = recipient. Codul de mai sus se va ocupa de asta!

Sau, dacă trebuie să selectați toate elementele, cu excepția p.

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

Compatibilitate

IE9+
Firefox
Safari
Operă

21. X::pseudo element

Putem folosi pseudo-elemente pentru a stila fragmente de elemente, cum ar fi prima linie sau prima literă. Rețineți că acestea trebuie aplicate elementelor la nivel de bloc pentru a avea efect.

Un pseudo-element este specificat prin două puncte: ::

Selectați prima literă din paragraf

P::prima literă ( float: stânga; dimensiunea fontului: 2em; greutatea fontului: bold; familia de fonturi: cursiva; padding-right: 2px; )

Acest cod va selecta toate paragrafele și, la rândul său, va selecta primele litere din ele și le va aplica acest stil.

Selectați primul rând dintr-un paragraf

P::prima linie (greutatea fontului: bold; dimensiunea fontului: 1.2em; )

În mod similar, cu ::first-line stilăm prima linie dintr-un paragraf.

„Pentru compatibilitatea cu foile de stil existente, browserul trebuie să înțeleagă denumirile anterioare de pseudo-element cu un singur punct introduse în CSS 1, 2 ( :prima linie, :prima-litera, :inainte si:dupa). Această compatibilitate nu este permisă pentru pseudo-elemente noi introduse în această specificație"

Compatibilitate

IE6+
Firefox
Safari
Operă

22. X:nth-child(n)

li:nth-child(3) (culoare: roșu; )

Anterior, nu am putut selecta, de exemplu, al treilea element copil? nth-child rezolvă asta!

Rețineți că al-lea copil ia un număr întreg ca parametru, dar nu contează de la 0. Dacă doriți să selectați al doilea element din listă, utilizați li:nth-child(2) .

Putem chiar selecta fiecare al patrulea element al listei prin simpla scriere (0)li:nth-child(4n)(/0).

Compatibilitate

IE9+
Firefox 3.5+
Safari

23. X:ultimul-copil(n)

li:nth-last-child(2) (culoare: roșu; )

Ce să faci dacă ai o listă uriașă de articole ulși trebuie să selecteze al treilea element de la sfârșit? În loc să scrieți li:nth-child(397), puteți utiliza al-al-lea-ultimul-copil.

Această metodă este aproape identică cu cea de mai sus, dar începe de la capăt.

Compatibilitate

IE9+
Firefox 3.5+
Safari
Operă

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

ul:nth-of-type(3) ( chenar: 1px negru solid; )

Se întâmplă că trebuie să selectați nu un element copil, ci un element de un anumit tip.

Imaginează-ți că există cinci liste neordonate pe o pagină. . Dacă doriți să aplicați stilul doar celui de-al treilea ul, care nu are un unic id, trebuie folosit al n-lea de tip.

Compatibilitate

IE9+
Firefox 3.5+
Safari

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

ul:nth-last-of-type(3) ( chenar: 1px negru solid; )

Putem folosi, de asemenea ultimul-de-tip, numărând elementele de la capăt.

Compatibilitate

IE9+
Firefox 3.5+
Safari
Operă

26. X:primul copil

ul li:primul copil (border-top: none; )

Această pseudo-clasă selectează primul element copil. Adesea folosit pentru a elimina chenarele din primul și ultimul element al unei liste.

Compatibilitate

IE7+
Firefox
Safari
Operă

27. X:ultimul-copil

ul > li:last-child (culoare: verde; )

În contrast :primul-copil:ultimul-copil selectează ultimul element copil.

Compatibilitate

IE9 + (Da, da, IE8 acceptă:first-child, dar nu acceptă:last-child. Salut Microsoft!)
Firefox
Safari
Operă

28. X:copil singur

div p:copilul singur (culoare: roșu; )

Nu vezi această pseudo-clasă foarte des, dar ea există totuși.

Vă permite să selectați elemente care sunt singurii copii. De exemplu, aplicați stilul de mai sus acestui cod html:

Un paragraf.

Două paragrafe

Doar p din primul div va fi selectat deoarece este singurul element copil.

Compatibilitate

IE9+
Firefox
Safari
Operă

29. X:numai-de-tip

O pseudo-clasă foarte interesantă. Afectează elementele care nu au vecini în cadrul elementului părinte. De exemplu, să selectăm un ul cu un singur element din listă.

Singura soluție este folosirea numai de tip .

Ul > li:numai-de-tip (greutatea fontului: bold; )

Compatibilitate

IE9+
Firefox 3.5+
Safari
Operă

30. X:primul de tip

first-of-type selectează primul element al tipului dat.

Pentru a înțelege mai bine, să dăm

Paragraf

Paragraful 1
Punctul 2

Punctul 3
Punctul 4

Acum încercați să înțelegeți cum să evidențiați punctul 2.

Soluția 1

Ul:first-of-type > li:nth-child(2) (greutatea fontului: bold; )

Soluția 2

P + ul li:last-child (greutatea fontului: bold; )

Soluția 3

Ul:first-of-type li:nth-last-child(1) (greutatea fontului: bold; )

Compatibilitate

IE9+
Firefox 3.5+
Safari
Operă

// echo get_the_post_thumbnail(get_the_ID(), "related thumbnail"); // afișează dimensiunea miniaturii mele?>

Să vorbim despre selectoarele CSS. Pe lângă accesul obișnuit la elemente prin numele clasei, id și numele etichetelor html, puteți folosi combinații și comenzi speciale. Să le privim mai detaliat în articol. Unele selectoare sunt acceptate de toate browserele, altele doar de cele mai noi versiuni de browsere.

1. * — selectarea tuturor elementelor

* ( marja: 0; umplutură: 0; )

Să începem cu selectoare simple și apoi să ne uităm la altele mai complexe. Mulți dezvoltatori îl folosesc pentru a reseta marjele și valorile de umplutură ale tuturor elementelor. La prima vedere, acest lucru este convenabil, dar este totuși mai bine să nu faceți acest lucru în codul de producție. Acest selector CSS este prea greu pentru browser.

Poate fi folosit și pentru a evidenția toți copiii dintr-un anumit recipient.

#container * ( chenar: 1px negru solid; )

În acest caz, toate elementele copil ale blocului #container sunt selectate. Încercați să nu abuzați de el.

Compatibilitate

IE6+
Firefox
Crom
Safari
Operă

2. #X

#container ( lățime: 960px; margine: auto; )

Semnul hash din fața selectorului CSS va evidenția elementul cu id="container" . Este foarte simplu, dar ai grijă când folosești id-ul.

Întrebați-vă: trebuie neapărat să evidențiez după id?

Valorile id blochează stilul strâns pe element și nu sunt reutilizabile. Ar fi de preferat să folosiți clase class="", nume de etichete sau chiar pseudo-clase.

Compatibilitate

IE6+
Firefox
Crom
Safari
Operă

3.X

.error (culoare: roșu; )

Compatibilitate

IE6+
Firefox
Crom
Safari
Crom

4. XY

li a ( text-decor: niciuna; )

Selectorul de elemente copil CSS este cel mai comun. Dacă trebuie să selectați elemente de un anumit tip din mai multe elemente copil, utilizați acest selector. De exemplu, trebuie să evidențiați toate legăturile care sunt în elementul li. În acest caz, utilizați acest selector.

Nu ar trebui să faceți selectoare CSS ca X Y Z A B.eroare . Întrebați-vă întotdeauna dacă este necesar să scrieți un selector CSS atât de greoi pentru a selecta un anumit element.

Compatibilitate

IE6+
Firefox
Crom
Safari
Crom

5.X

a (culoare: roșu; ) ul ( margine-stânga: 0; )

Ce se întâmplă dacă doriți să acoperiți toate elementele unui anumit tip pe o pagină? Păstrați-o simplu, utilizați un selector de tip CSS. Dacă trebuie să evidențiați toate listele neordonate, utilizați ul()

Compatibilitate

IE6+
Firefox
Crom
Safari
Operă

a:link ( culoare: roșu; ) a:visted ( culoare: violet; )

Folosim pseudo-class:link pentru a evidenția toate linkurile care nu au fost încă făcute clic.

Dacă trebuie să aplicăm un anumit stil link-urilor deja vizitate, atunci folosim pseudoclasa: vizitat.

Compatibilitate

IE7+
Firefox
Crom
Safari
Operă

7. X+Y

ul + p (culoare: roșu; )

Selectează următorul element. El va alege numai un element de tip Y care vine imediat după elementul X În exemplu, textul primului paragraf după fiecare ul va fi roșu.

Compatibilitate

IE7+
Firefox
Crom
Safari
Crom

8. X>Y

div#container > ul ( chenar: 1pxsolidblack; )

Diferența dintre standardul X Y și X > Y este că selectorul CSS în cauză va selecta doar elementele secundare imediate. De exemplu, luați în considerare următorul cod.

Element din listă
- Element copil
Element din listă
Element din listă
Element din listă

Selectorul CSS #container > ul va selecta numai uls care sunt copii imediati ai div-ului cu id =container . Nu va selecta, de exemplu, uls care sunt copii ai primelor li s.

Compatibilitate

IE7+
Firefox
Crom
Safari
Operă

9. X~Y

ul ~ p (culoare: roșu; )

Compatibilitate

IE7+
Firefox
Crom
Safari
Operă

10. X

a(culoare:verde;)

Selectorii CSS pot folosi, de asemenea, atribute. De exemplu, în acest exemplu am selectat toate linkurile care au atributul title. Alte link-uri vor rămâne neafectate.

Compatibilitate

IE7+
Firefox
Crom
Safari
Operă

11. X

a (culoare: #ffde00; )

Vă rugăm să rețineți că există citate. Nu uitați să faceți același lucru în jQuery și alte biblioteci JavaScript în care elementele sunt selectate folosind selectoare CSS. Ori de câte ori este posibil, utilizați întotdeauna selectoare CSS3 CSS.

O regulă bună, dar prea strictă. Ce să faci dacă linkul nu duce direct la yandex.ru, ci de exemplu la http://yandex.ru/page1? În aceste cazuri putem folosi expresii regulate.

Compatibilitate

IE7+
Firefox
Crom
Safari
Crom

12. X

a (culoare: #1f6053; )

De asta avem nevoie. O stea indică faptul că ar trebui să apară valoarea pe care o căutați undevaîn atribut. Deci selectorul CSS acoperă yandex.ru, http://yandex.ru/somepage etc.

Compatibilitate

IE7+
Firefox
Crom
Safari
Operă

13. X

a ( fundal: url(path/to/external/icon.png) fără repetare; padding-left: 10px; )

V-ați întrebat vreodată cum unele site-uri web pot afișa o pictogramă mică lângă link-urile externe? Sunt sigur că le-ai mai văzut, sunt foarte memorabile.

Rețineți că nu căutăm „http://”. Acest lucru nu este corect deoarece adresele care încep cu https:// nu sunt luate în considerare

Ce se întâmplă dacă vrem să setăm un stil numai pentru link-urile care duc la o fotografie? Trebuie să găsești Sfârşit linii.

Compatibilitate

IE7+
Firefox
Safari
Operă

14. X

a(culoare:roșu;)

Din nou, folosim caracterul expresiei regulate „$” pentru a indica sfârșitul liniei. În aceasta, căutăm link-uri care se referă la fișiere jpg sau URL-uri care au „.jpg” la sfârșit.

Compatibilitate

IE7+
Firefox
Safari
Operă

15. X

a( culoare: roșu; )

Cum putem scrie acum un selector CSS care va evidenția link-uri către toate tipurile de imagini? De exemplu, am putea scrie astfel:

A, a, a, a (culoare: roșu; )

Dar acest lucru este hemoroizi și ineficient. O altă soluție posibilă este utilizarea atributelor personalizate. De ce nu adăugăm propriul atribut data-filetype la fiecare link?

Link imagine

A (culoare: roșu; )

Compatibilitate

IE7+
Firefox
Safari
Operă

16. X

a ( culoare: roșu; ) a ( chenar: 1pxsolidnegru; )

Iată ceva special. Nu toată lumea știe despre acest selector CSS. Tilul (~) vă permite să evidențiați un anumit atribut dintr-o listă de atribute separate prin virgulă.

De exemplu, ne putem seta propriul atribut data-info, care include mai multe cuvinte cheie separate prin spații. Deci, putem indica că linkul este extern și că se leagă la o imagine.

„Clic pe mine

Aici, codul HTML este în vigoare, acum să scriem stilurile.

Nu-i rău, nu?

Compatibilitate

IE7+
Firefox
Safari
Operă

17. X: verificat

intrare: bifat ( chenar: 1pxsolidblack; )

Această pseudo-clasă evidențiază doar elementele UI, cum ar fi un buton radio sau o casetă de selectare. Mai mult, cele care sunt marcate/selectate. Foarte simplu.

Compatibilitate

IE9+
Firefox
Safari
Operă

18. X:dupa

Pseudo-clasele :before și :after sunt foarte cool. Se pare că în fiecare zi există noi modalități de a le folosi eficient. Pur și simplu generează conținut în jurul elementului selectat.

Mulți oameni s-au familiarizat cu aceste pseudo-clase în timp ce lucrau cu hack-ul clear-fix.

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

Acest hack folosește :after pentru a adăuga un spațiu după un element și pentru a preveni împachetarea acestuia.

Conform specificației CSS3, trebuie să utilizați două puncte (::). Cu toate acestea, puteți utiliza un singur două puncte pentru compatibilitate.

Compatibilitate

IE8+
Firefox
Safari
Operă

19. X: hover

div:hover ( fundal: #e3e3e3; )

Doriți să aplicați un stil unui element când treceți cu mouse-ul peste el? Atunci acest selector CSS este pentru tine.

Rețineți că versiunile mai vechi de Internet Explorer se aplică numai :hover la linkuri.

Acest selector CSS este adesea folosit pentru a pune o margine de jos pe link-uri atunci când sunt trecute cu mouse-ul peste.

A:hover (chenar-jos: 1pxsolidblack; )

chenar-jos: 1px negru solid; arată mai bine decât textul-decor: subliniază;

Compatibilitate

IE6+ (În IE6: hover trebuie aplicat linkului)
Firefox
Safari
Operă

20. X:nu(selector)

div:not(#container) (culoare: albastru; )

Pseudoclasa de negație poate fi foarte utilă. Să presupunem că vreau să selectez toate div-urile, cu excepția celui care are id = container . Codul de mai sus se va ocupa de asta!

Sau dacă aș dori să selectez toate elementele cu excepția p.

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

Compatibilitate

IE9+
Firefox
Safari
Operă

21. X::pseudoelement

Putem folosi pseudo-elemente pentru a stila fragmente de elemente, cum ar fi prima linie sau prima literă. Rețineți că acestea trebuie aplicate elementelor la nivel de bloc pentru a avea efect.

Un pseudo-element este specificat prin două puncte: ::

Selectați prima literă din paragraf

P::prima literă ( float: stânga; dimensiunea fontului: 2em; greutatea fontului: bold; familia de fonturi: cursiva; padding-right: 2px; )

Acest cod va selecta toate paragrafele și, la rândul său, va selecta primele litere din ele și le va aplica acest stil.

Selectați primul rând dintr-un paragraf

P::prima linie (greutatea fontului: bold; dimensiunea fontului: 1.2em; )

În mod similar, cu ::first-line stilăm prima linie dintr-un paragraf.

„Pentru compatibilitatea cu foile de stil existente, browserul trebuie să înțeleagă denumirile anterioare de pseudo-element cu un singur punct introduse în CSS 1, 2 (:first-line, :first-letter, :before și:after). Această compatibilitate nu este permisă pentru pseudo-elemente noi introduse în această specificație"

Compatibilitate

IE6+
Firefox
Safari
Operă

22. X:al-al-lea copil(n)

li:nth-child(3) (culoare: roșu; )

Anterior, nu am putut selecta, de exemplu, al treilea element copil? nth-child rezolvă asta!

Rețineți că nth-child ia un număr întreg ca parametru, dar nu începe de la 0. Dacă doriți să selectați al doilea element din listă, utilizați li:nth-child(2) .

Putem chiar selecta fiecare al patrulea element al listei prin simpla scriere (0)li:nth-child(4n)(/0).

Compatibilitate

IE9+
Firefox 3.5+
Safari

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

li:nth-last-child(2) (culoare: roșu; )

Ce se întâmplă dacă aveți o listă uriașă 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(397), puteți folosi nth-last-child.

Această metodă este aproape identică cu cea de mai sus, dar începe de la capăt.

Compatibilitate

IE9+
Firefox 3.5+
Safari
Operă

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

ul:nth-of-type(3) ( chenar: 1pxsolidblack; )

Se întâmplă că trebuie să selectați nu un element copil, ci un element de un anumit tip.

Imaginează-ți că există cinci liste neordonate pe o pagină. . Dacă doriți să stilați doar al treilea ul care nu are un id unic, trebuie să utilizați nth-of-type.

Compatibilitate

IE9+
Firefox 3.5+
Safari

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

ul:nth-last-of-type(3) ( chenar: 1pxsolidblack; )

De asemenea, putem folosi nth-last-of-type, elemente de numărare de la sfârșit.

Compatibilitate

IE9+
Firefox 3.5+
Safari
Operă

26. X: primul copil

ul li:primul copil (border-top: none; )

Această pseudo-clasă selectează primul element copil. Adesea folosit pentru a elimina chenarele din primul și ultimul element al unei liste.

Compatibilitate

IE7+
Firefox
Safari
Operă

27. X: ultimul copil

ul > li:last-child (culoare: verde; )

În schimb, :first-child:last-child selectează ultimul element copil.

Compatibilitate

IE9 + (Da, da, IE8 acceptă:first-child, dar nu acceptă:last-child. Bună ziua Microsoft!)
Firefox
Safari
Operă

28. X:copil singur

div p:copilul singur (culoare: roșu; )

Nu vezi această pseudo-clasă foarte des, dar ea există totuși.

Vă permite să selectați elemente care sunt singurii copii. De exemplu, aplicați stilul de mai sus acestui cod html:

Un paragraf.

Două paragrafe

Doar p din primul div va fi selectat deoarece este singurul element copil.

Compatibilitate

IE9+
Firefox
Safari
Operă

29. X:numai-de-tip

O pseudo-clasă foarte interesantă. Afectează elementele care nu au vecini în cadrul elementului părinte. De exemplu, să selectăm un ul cu un singur element din listă.

Singura soluție este să folosiți only-of-type .

Ul > li:numai-de-tip (greutatea fontului: bold; )

Compatibilitate

IE9+
Firefox 3.5+
Safari
Operă

30. X: primul de tip

first-of-type selectează primul element al tipului dat. Pentru a înțelege mai bine, să ne uităm la un exemplu.

Paragraf

Paragraful 1
Punctul 2

Punctul 3
Punctul 4

Acum încercați să înțelegeți cum să evidențiați punctul 2.

Soluţie 1

Ul:first-of-type > li:nth-child(2) (greutatea fontului: bold; )

Soluţie 2

P + ul li:last-child (greutatea fontului: bold; )

Soluţie 3

Ul:first-of-type li:nth-last-child(1) (greutatea fontului: bold; )

Compatibilitate

IE9+
Firefox 3.5+
Safari
Operă

Un selector este o parte a unei reguli CSS care spune browserului la ce element (sau elemente) dintr-o pagină web va fi aplicat stilul.

Termenul selector se poate referi la un selector simplu, un selector compus, un selector complex sau o listă de selectori.

LA selectoare simple raporta:

selector de tip
selector universal
selectoare de atribute
selector de identificare
selector de clasă
pseudo clase

Selector CSS	Exemplu	Descriere	CSS
.clasă	.clasa mea	Selectează toate elementele cu clasa myClass (class="myClass").	1
#id	#principal	Selectează elementul cu id main (id="main").	1
	*	Selectarea tuturor elementelor.	2
element	span	Selectarea tuturor elementelor .	1
element, element	div, span	Selectarea tuturor elementelor și toate elementele .	1
[atribut]		Selectează toate elementele cu un atribut titlu.	2
[atribut="valoare"]		Selectează toate elementele cu un atribut titlu a cărui valoare se potrivește exact cu valoarea specificată în selector (title="cost)"). !}	2
[atribut~="valoare"]		Selectează toate elementele cu un atribut title a căror valoare conține (oriunde) subșirul (ca un singur cuvânt) „one” (title="one and two)"). !}	2
[atribut\|="valoare"]		Selectează toate elementele cu un atribut lang a căror valoare începe cu „ru”.	2
[atribut^="valoare"]	A	Selectarea fiecărui element cu un atribut href a cărui valoare începe cu „https”.	3
[atribut$="valoare"]		Selectează toate elementele cu un atribut src a căror valoare se termină în „.png” (src="some_img.png").	3
[atribut*="valoare"]		Selectează toate elementele cu un atribut titlu a cărui valoare (oriunde) conține subșirul (ca un singur cuvânt sau parte a acestuia) „one” (title="one and two)"). !}	3

Selector compozit este o succesiune de selectori simpli care nu sunt separate prin combinatoare, adică un selector este urmat imediat de următorul. Selectează un element care se potrivește cu toți selectorii simpli pe care îi conține. Selectorul de tip sau selectorul universal inclus într-un selector compus trebuie să apară primul în această secvență. Într-un selector compus, este permis un singur selector de tip sau selector universal.

Span.className p.className1.className2#someId:hover

Selector complex este o succesiune de selectoare care sunt separate prin combinatoare.

Lista selectoarelor sunt selectoare separate prin virgule.

Combinatoare

Pentru a combina selectoare simple CSS, combinatoarele sunt folosite pentru a indica relația dintre selectoarele simple. Există mai multe combinatoare diferite în CSS2 și unul suplimentar în CSS3, atunci când le utilizați, acestea schimbă natura selectorului în sine.

Pseudo-clase

O pseudo-clasă este un selector simplu care este folosit pentru a selecta ceva care nu poate fi selectat folosind alți selectori sau poate fi selectat într-un mod destul de dificil.

Pseudo-clasa	Exemplu	Descriere	CSS
:legătură	o legătură	Selectează toate linkurile nevizitate.	1
:vizitat	a: vizitat	Selectați toate linkurile vizitate.	1
:activ	a:activ	Selectarea unui link activ.	1
:planare	a:hover	Selectarea unui link atunci când treceți cursorul mouse-ului.	1
:concentrare	intrare: focus	Selectarea elementelor , care este în centrul atenției.	2
:primul copil	p:primul copil	Selectarea fiecărui element Care este primul copil al părintelui său.	2
:lang(limba)	p:lang(ro)	Selectarea fiecărui element Cu un atribut lang a cărui valoare începe cu „ru”.	2
:primul de tip	p: primul de tip	Selectarea fiecărui element Care este primul dintre elemente	3
: ultimul de tip	p: ultimul de tip	Selectarea fiecărui element Care este ultimul dintre elemente Elementul său părinte.	3
:numai-de-tip	p:numai-de-tip	Selectarea fiecărui element Care este singurul element Elementul său părinte.	3
:singurul copil	p:copil-unic	Selectarea fiecărui element Care este singurul element copil al elementului său părinte.	3
:nth-child(n)	p:nth-child(2)	Selectarea fiecărui element Elementul său părinte.	3
: al-al-lea-ultimul-copil(n)	p:al-al-al-lea-ultimul-copil(2)	Selectarea fiecărui element Care este al doilea copil al elementului său părinte, numărând de la ultimul copil.	3
:nth-of-type(n)	p:nth-of-type(2)	Selectarea fiecărui element Care este al doilea copil Elementul său părinte.	3
:nth-ultimul-de-tip(n)	p:nth-ultimul-de-tip(2)	Selectarea fiecărui element Care este al doilea copil Elementul său părinte, numărând de la ultimul element copil.	3
	3
:nu(selector)	:nu(p)	Selectarea tuturor elementelor cu excepția elementului .	3

Pseudo-elemente

Un pseudo-element este un element virtual care nu există în mod explicit în arborele elementelor documentului. Pseudo-elementele sunt folosite pentru a selecta părți ale unui element care nu pot fi selectate folosind alți selectori și pentru a stila părți ale unui element, mai degrabă decât întregul element.