Un CSS pseudo-element este un cuvânt cheie adăugat la un selector care vă permite să stilați o anumită parte a elementului(elor) selectat(e). De exemplu, ::first-line poate fi folosit pentru a schimba fontul primului rând al unui paragraf.

/* Prima linie din fiecare

Element. */ p::prima linie (culoare: albastru; text-transform: majuscule; )

Sintaxă

Puteți utiliza doar un pseudo-element într-un selector. Trebuie să apară după selectoarele simple din enunț.

Nota: De regulă, două două puncte (::) ar trebui folosite în loc de două două puncte (:). Aceasta distinge pseudo-clase de pseudo-elemente. Cu toate acestea, deoarece această distincție nu a fost prezentă în versiunile mai vechi ale specificației W3C, majoritatea browserelor acceptă ambele sintaxe pentru pseudo-elementele originale.

Indexul pseudo-elementelor standard

De la autor: Specificația Modulului Pseudo-elemente CSS Nivelul 4 pune în lumină comportamentul pseudo-elementelor existente și introduce altele noi. Cu toate acestea, doar câteva dintre noile pseudo-elemente au vreun suport în browserele recente.

Astăzi vom vorbi despre următoarele pseudo-elemente:

::before - inserează conținutul generat înainte de conținutul elementului

::after - inserează conținutul generat după conținutul elementului

::first-letter - selectează prima literă a elementului

::first-line - selectează prima linie a unui element

::selection - stilează textul selectat de cursor

Dintre acestea, elementele::first–letter, ::first–line și::selection afectează conținutul care este inclus în surse. Pseudo-elemente::înainte și::după, dimpotrivă, inserați în document conținut care nu se află în codul sursă. Să aruncăm o privire mai atentă la toate pseudo-elementele.

Notă: sintaxă cu un singur punct

Este posibil să fi văzut versiunile cu un singur punct de ::first–letter, ::first–line, ::before și ::after în vechiul CSS. În CSS2, aceste pseudo-elemente au fost specificate folosind două puncte unice:. IE8 necesită o sintaxă de două puncte, deși majoritatea celorlalte browsere acceptă ambele. Este mai bine să utilizați sintaxa două puncte.

Pseudo-elemente::inainte si::dupa

Majoritatea pseudo-elementelor vă permit să selectați conținut care este deja prezent în sursa documentului, dar care nu este specificat de limbă (cu alte cuvinte, HTML-ul dvs.). Totuși, ::înainte și::după muncă diferit. Aceste pseudo-elemente adaugă conținutul generat în arborele documentului. Conținutul generat nu există în sursa HTML, dar este afișat.

De ce să folosiți conținutul generat? De exemplu, puteți marca câmpurile obligatorii de formular adăugând conținut după etichete:

/* Se aplică etichetei asociate câmpului obligatoriu */ .required::after ( conținut: " (Obligatoriu) "; culoare: #c00; dimensiunea fontului: .8em; )

În câmpul de formular obligatoriu, trebuie să utilizați proprietatea HTML necesară. Deoarece aceste informații sunt deja disponibile în DOM, :: înainte și:: după acționează ca ajutoare. Acesta nu este conținut critic, așa că este posibil să nu fie inclus în codul sursă.

Notă: conținut generat și accesibilitate

Unele cititoare de ecran și browsere recunosc și citesc conținutul generat, dar majoritatea nu. Nu utilizați pseudo-elementele ::before și ::after pentru a oferi conținut generat utilizatorilor cu dizabilități. Puteți explora această problemă mai detaliat în articolul lui Leonie Watson „Suport pentru accesibilitate pentru conținutul generat de CSS”.

O altă modalitate de a folosi::before și::after este să adăugați un prefix sau sufix la conținut. Formularul de mai sus poate folosi text de ajutor, așa cum se arată mai jos:

Să anexăm textul nostru auxiliar între paranteze pereche folosind ::before și ::after.

Helptext::before ( conținut: "("; ) .helptext::after (conținut: ")"; )

Rezultat.

Poate cel mai util mod de a folosi ::before și ::after este curățarea elementelor plutitoare. Nicolas Gallagher a introdus această tehnică (care se bazează pe munca lui Thierry Koblentz) în postarea sa „noul hack micro clearfix”:

/* Pentru suport IE<= 9 используйте:before и:after */ .clearfix::before, .clearfix::after { content: " "; /* Обратите внимание на пробел между кавычек. */ display: table; } .clearfix::after { clear: both; }

Adăugați clasa clearfix la orice element care trebuie șters după elementul plutit.

Pseudo-clasele ::before și ::after se comportă în întregime ca copii ai etichetei la care sunt atașate. Ele moștenesc toate proprietățile posibile ale părintelui și sunt situate în interiorul blocului părinte. De asemenea, interacționează cu alte elemente de bloc ca și cum ar fi etichete reale. Afișarea: bloc sau afișarea: proprietățile tabelului pe ::before și::after funcționează exact la fel ca pe alte elemente.

Avertisment: un pseudo-element per selector

În prezent, un singur pseudo-element este permis pentru fiecare selector. Adică, intrarea ca p::first-line::before este incorectă.

Crearea de efecte tipografice cu:prima-litera

Pseudo-elementele ::before și ::after inserează conținut, iar ::first-litera funcționează cu conținut deja scris în surse. Cu ajutorul acestuia, puteți crea efectul primei litere sau al primei litere, pe care este posibil să le fi văzut în reviste și cărți.

Notă: prima literă și majuscule

Efectul primei litere este o literă majusculă la începutul textului căreia i se oferă o dimensiune mai mare a fontului față de restul textului. O literă este similară cu prima literă, dar este introdusă în primul paragraf de cel puțin două rânduri.

Stilurile de mai jos adaugă prima literă majusculă la toate p paragrafele din document:

p::prima literă (familie font: serif; greutate font: bold; dimensiune font: 3em; stil font: cursiv; culoare: #3f51b5; )

Din captură de ecran puteți vedea că ::first-letter modifică înălțimea liniei primei linii dacă elementului i s-a dat o valoare a înălțimii liniei fără unități. În acest caz, toate etichetele p moștenesc valoarea înălțimii liniei de 1,5 din eticheta body.

Există trei moduri de a atenua această problemă:

micșorați valoarea înălțimii liniei pentru pseudo-elementul ::prima literă, o valoare de .5 va funcționa aproape întotdeauna;

setați înălțimea liniei cu unități pentru pseudo-element::first–litera;

setați înălțimea liniei cu unități pentru corp sau părinte::prima-litera.

Prima opțiune păstrează ritmul vertical, așa cum este cazul valorii înălțimii liniei fără unități. A doua opțiune limitează efectele secundare ale înălțimii liniei fixe la pseudo-elementele în sine. A treia opțiune este cea mai proastă, există o probabilitate mare ca veți crea un efect secundar care va trebui rescris folosind cod CSS suplimentar.

În cazul nostru, să reducem valoarea înălțimii liniei pentru p::first-letter la .5 (și să rescriem proprietățile în fișier, vom folosi proprietatea fontului scurt):

p::prima literă ( font: bold italic 3em / .5 serif; culoare: #3f51b5; )

Rezultatul poate fi văzut mai jos. Rețineți că, de asemenea, trebuia să ajustam marginea de jos a fiecărui paragraf p pentru a compensa valoarea redusă a înălțimii liniei pe p::prima literă.

Pentru a crea majuscule, veți avea nevoie de puțin mai multe linii de CSS. Spre deosebire de primele litere majuscule, textul alăturat al unei minuscule se înfășoară în jurul acestuia. Adică trebuie să adăugăm float: left; în stilurile noastre. Vom adăuga, de asemenea, marginile de sus, din dreapta și de jos:

p::prima literă ( font: bold italic 3em / .5 serif; font-style: italic; culoare: #607d8b; float: stânga; margine: 0.2em 0.25em .01em 0; )

Un element plutit, sau în cazul nostru un pseudo element, face ca restul textului să se înfășoare în jurul lui, așa cum se arată mai jos.

Dacă nu folosiți px sau rem pentru a seta dimensiunile, marginea și înălțimea liniei, va fi foarte dificil să stilați perfect ::prima literă în toate browserele.

Uneori, prima literă a unui element de text este un semn de punctuație. De exemplu, știri care încep cu un citat:

„Lorem ipsum dolor sit amet, consectetur adipiscing elit.” Fusce odio leo, sollicitudin vel mattis eget, ...

În acest caz, stilurile pentru ::first-letter vor fi aplicate atât citatului de deschidere, cât și primei litere, așa cum se arată mai jos. Stilurile sunt aplicate la fel în toate browserele.

Cu toate acestea, rezultatul va fi diferit atunci când punctuația este generată de element. Luați în considerare următorul marcaj:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce odio leo, sollicitudin vel mattis eget, iaculis sit...

În prezent, browserele redă eticheta q ca ghilimele specifice limbii, care se vor deschide și se vor închide. Cu toate acestea, nu toate browserele recunosc astfel de ghilimele în același mod. În Firefox 42 (vezi mai jos), Safari 8 și versiunile anterioare, ::first-letter modifică doar citatul de deschidere.

În Chrome, Opera și Yandex, citatul de deschidere al etichetei q și prima literă a paragrafului nu sunt stilizate. Mai jos este o captură de ecran în Chrome.

IE aplică stiluri atât citatului de deschidere, cât și primei litere a unui paragraf. Vezi mai jos.

Specificația Modulului Pseudo-elemente CSS Nivelul 4 afirmă că semnele de punctuație care precede sau imediat după prima literă sau caracter ar trebui să fie stilate. Cu toate acestea, specificația nu este explicită cu privire la aplicarea stilurilor semnelor de punctuație generate.

Erori de browser la utilizarea::first-letter

În cea mai mare parte, ::first-litera funcționează exact așa cum v-ați aștepta în toate browserele. Ca și în cazul tuturor proprietăților CSS, acest pseudo-element are câteva erori și utilizări greșite de care trebuie să fii conștient.

În Firefox 39 și versiunile anterioare, anumite caractere determină Firefox să ignore regula::prima literă: ‑,$,^,_,+,`,~,>,<.>

Acest lucru se aplică cazurilor în care primul caracter este specificat prin ::before și proprietatea conținut, precum și dacă este specificat în sursele documentului. Nu există nicio remediere pentru acest bug. Dacă utilizați ::prima literă, va trebui să evadați aceste caractere la începutul paragrafului.

Notă: erori în browserele Blink

Unele versiuni ale browserelor Blink nu vor aplica regula ::prima literă dacă părintele are proprietatea de afișare setată la inline sau la tabel. Eroarea există în Chrome 42, Opera 29 și Yandex 15. Eroarea a fost remediată în Chrome 44, dar lansarea nu va vedea lumina zilei până când această carte va fi în mâinile tale. Cea mai ușoară modalitate de a ocoli eroarea este să adăugați o proprietate display: inline-block, display: block sau display: table-cell proprietate părinte.

Crearea de efecte tipografice cu::first-line

Pseudoclasa ::first-line funcționează aproape ca ::prima literă, doar efectul este aplicat întregii prime rânduri a elementului. Puteți, de exemplu, să măriți primul rând al fiecărui paragraf și să schimbați culoarea textului:

Puteți forța sfârșitul primei rânduri folosind br sau hr, așa cum se arată mai jos. Din păcate, acest lucru nu funcționează întotdeauna. Dacă elementul dvs. poate conține doar 72 de caractere, atunci eticheta br după cel de-al 80-lea caracter nu va avea niciun efect asupra pseudo-elementului de primă linie ::. Vei primi doar o pauză ciudată de linie.

Același lucru este valabil și pentru spațiul neîntrerupt (), care este inserat pentru a evita întreruperea cuvintelor între rânduri. Acest lucru nu va avea niciun efect asupra::first-line. Cuvântul care vine înainte va fi forțat să se deplaseze pe linia în care se află textul după spațiul care nu se întrerupe.

Conținutul generat adăugat prin ::before va apărea pe prima linie, așa cum se arată mai jos.

Dacă textul generat este suficient de lung, va umple complet prima linie. Cu toate acestea, dacă adăugați display: block (de exemplu, p::before (conținut: '!!!'; display: block;)), atunci conținutul va ocupa întreaga primă linie.

Din păcate, această eroare încă mai există în Firefox 40 și în versiunile anterioare. Firefox ignoră complet regula.

Interfețe distractive cu::selection

Pseudo-elementul ::selection este unul dintre așa-numitele pseudo-elemente de „evidențiere” specificate în specificația Modulului Pseudo-Elemente CSS Nivelul 4 Acest pseudo-element de evidențiere a fost inclus anterior în specificația Selectors Level 3, singura acceptat în browsere.

Cu ::selection puteți aplica stiluri CSS conținutului selectat cu mouse-ul. În mod implicit, fundalul și culoarea textului conținutului evidențiat sunt setate de sistem. Cu toate acestea, dezvoltatorii pot modifica aceste setări, așa cum se arată mai jos.

Nu toate proprietățile pot fi utilizate cu::selection. Specificația conține doar următoarele proprietăți:

Țineți cont de accesibilitate atunci când alegeți culorile de prim-plan și de fundal pentru ::selection. Unele combinații de culori oferă un contrast slab pentru persoanele cu vedere scăzută. Alte combinații pot fi ilizibile pentru persoanele daltoniste. Utilizați Verificatorul de contrast și Simulatorul de colorism înainte de a finaliza alegerile de culoare.

Modulul Pseudo-Elemente conține, de asemenea, pseudo-clase::error-ortografie și::eroare-gramatică. Odată ce acestea sunt implementate, vom putea să stilăm textul cu erori verificate în dicționarul browserului.

Ultima actualizare: 21.04.2016

Pseudo-elementele au o serie de capabilități suplimentare pentru selectarea elementelor unei pagini web și sunt similare pseudo-claselor. Lista pseudo-elementelor disponibile:

::prima literă : vă permite să selectați prima literă din text

::first-line : stilează prima linie de text

::before : adaugă un mesaj înaintea unui anumit element

::după : adaugă un mesaj după un anumit element

::selection : selecteaza elementele selectate de utilizator

În CSS2, pseudo-elementele, precum pseudo-clasele, au fost precedate de un singur două puncte. În CSS3, pentru a le distinge de pseudo-clase, pseudo-elementele au început să fie precedate de două puncte. Cu toate acestea, pentru compatibilitatea cu browserele mai vechi care nu acceptă CSS3, este acceptată un singur două puncte: :before .

Stilăm textul folosind pseudo-elementele de prima literă și prima linie:

Dar nu a văzut nimic. Deasupra lui nu mai era nimic în afară de cer – un cer înalt, nu limpede, dar încă nemăsurat de înalt, cu nori gri care se târau liniștiți peste el.

Folosim pseudoelementele înainte și după:

Nu încerca să bagi limba într-o priză electrică.

Aici pseudoelementele sunt aplicate unui element cu avertisment de clasă. Ambele pseudo-elemente acceptă o proprietate de conținut, care stochează textul de inserat. Și, de asemenea, pentru a crește atenția, pseudo-elementele folosesc text îngroșat folosind proprietatea font-weight: bold; .

Folosim pseudo-elementul de selecție pentru a stila elementele selectate:

Pseudoelementele din CSS3 vă permit să formatați text.

Pseudo-elementele CSS sunt un fel de componente condiționate ale etichetelor HTML existente.

Din punct de vedere al sintaxei, ele nu sunt diferite de pseudo-clase. Asemănarea lor se manifestă și într-un anumit „fantomism” a ceea ce sunt aplicate, doar că, spre deosebire de pseudo-clase, pseudo-elementele nu reacționează la modificările stării anumitor etichete de pe pagină, ci creează un fel de părți componente fantomă. a etichetelor deja existente.

Cum se folosesc selectoarele de pseudo-element CSS?

Sarcina unui selector de pseudo-element CSS este de a selecta din structura documentului părțile componente ale elementelor care se încadrează în caracteristicile selectorului și specificația pseudo-elementului.

Este specificat folosind două puncte urmate de numele pseudo-elementului utilizat.

De exemplu, să tipărim prima literă din paragrafe în culoare roșie mai mare:

p: prima literă (dimensiunea fontului: 150%; culoare: roșu; )

Avertismentul la utilizarea pseudo-elementelor CSS este că acestea trebuie să apară la sfârșitul selectorului. Adică, această intrare nu va funcționa:

p: prima linie span (culoare: roșu; )

Ce sunt pseudo-elementele?

Rezumând

Pseudo-elementele CSS sunt folosite pentru a simplifica proiectarea unui document HTML în unele cazuri speciale. Ele ne oferă posibilitatea de a nu adăuga etichete suplimentare, ci de a adăuga design etichetelor existente în CSS.

Cel mai adesea în practică: după și:înainte sunt folosite (de exemplu, pentru a adăuga marcatori la liste, design mai complex al unui meniu derulant), puțin mai rar: prima literă și: prima linie. Domeniile de aplicare ale pseudo-elementelor rămase sunt destul de exotice și sunt extrem de rare în practică.

Și nu uitați că doar acești 4 selectoare au fost acceptate de toate browserele de destul de mult timp. Alte pseudo-elemente au început să intre în utilizare odată cu apariția standardului CSS3, ceea ce înseamnă că nu mai sunt acceptate în browserele mai vechi.

Secțiunea anterioară a acestui capitol a discutat patru tipuri de selectoare — selectoare de etichetă, de clasă, de ID și de grup. În această parte, vom trece la selectatorii descendenți (numiți și selectori de context) și, de asemenea, vă vom prezenta pseudoclasele și pseudoelementele CSS.

Selector de descendenți

Când trebuie să stilați anumite etichete de-a lungul unei pagini web, se folosesc selectoare de etichete. De exemplu, pentru a face fiecare link nesubliniat, trebuie să scrieți o regulă simplă:

A ( text-decor: niciuna; )

Ce ar trebui să facem dacă avem nevoie de linkuri subliniate, dar numai atunci când sunt într-o etichetă?

Am putea crea o clasă separată și să o atribuim legăturilor necesare, dar aceasta nu este o metodă complet corectă, care necesită atât timp cât și spațiu suplimentar în codul HTML. Este mult mai ușor să folosești selectori descendenți (selectori de context) și să scrii:

P a (decor text: subliniere; )

În termeni simpli, am indicat acum că toate linkurile , care sunt în etichete

Trebuie subliniat. Această regulă nu se aplică tuturor celorlalte link-uri.