Najpotrebnejšie selektory v css. CSS selektory – čo sú, prečo sú potrebné a čo sú. Ako aplikovať tento štýl

Súbor pravidiel dizajnu (ktoré zase pozostávajú zo selektorov s reklamným blokom) aplikovaných na určité html značky, vďaka ktorým sa formuje vzhľad stránky.

Selektor CSS- Toto komponent CSS pravidlá zodpovedné za definovanie špecifických html tagy, na ktoré sa použijú štýly dizajnu uvedené v tomto pravidle.

Vďaka selektorom teda prehliadač rozumie, ktoré prvky kódu stránky musia použiť špecifické štýly dizajnu.

Nástroj na výber prvkov CSS je mimoriadne flexibilný a pohodlný na výber jednotlivých prvkov kódu aj celých skupín prvkov definovaných určitými charakteristikami.

Typy selektorov CSS

Rovnako ako vety v texte, aj selektory CSS môžu byť jednoduché alebo zložité. Rozdiel medzi nimi je v tom, že zložité sa získavajú kombináciou niekoľkých jednoduchých a používajú sa na presnejšie prispôsobenie konečného dizajnu zdroja.

Len na rozdiel od bežných textov je v kaskádových štýloch dôležité, v akom poradí a aké selektory použijeme. Okrem toho to určí nielen to, ktoré prvky si vyberieme a na základe akých kritérií, ale aj rýchlosť spracovania nášho kódu ako celku, ale o jemnostiach budeme hovoriť v ďalších článkoch.

Jednoduché selektory

Univerzálny selektor – zodpovedá za výber všetkých prvkov v dokumente. Určené hviezdičkou. Zvyčajne sa používa na resetovanie predvolených štýlov prehliadačov, aby každý, kto navštívi stránku, neprišiel o svoj dizajn, ak použije nejaké vlastné nastavenia prehliadača alebo rôzne pluginy...
* (niejaký štýl ;)
Výber typu – vyberie všetky značky, ktoré zodpovedajú konkrétnemu typu. Určené názvom značky. Používa sa na nastavenie všeobecných pravidiel pre dizajn dokumentu, napríklad nastavenie rôznych typov písma pre nadpisy a obyčajný text dokumentu.
h1 (nejaký štýl; )
– použije pravidlo css na všetky značky s konkrétne meno trieda. Určené bodkou s názvom triedy napísaným bezprostredne za ňou. Možno najbežnejší selektor v rozložení. Zvyčajne sa používa na nastavenie rôznych štýlov dizajnu pre značky rovnakého typu, ktoré sa však líšia funkčnosťou.
Ľavý stĺpec (niektorý štýl;)
ID selektor – používa sa na navrhovanie jedinečných prvkov na stránke. Je špecifikovaný hashom, za ktorým nasleduje meno id. Používa sa, ak potrebujete navrhnúť jeden konkrétny prvok stránky.
#alertButton (niektorý štýl; )
– vyberie značky, ktoré majú atribút. Určené názvom atribútu v hranatých zátvorkách. Dá sa použiť ako na návrh skupiny značiek, v ktorých je daný atribút jednoducho prítomný, tak aj na skupinu značiek, v ktorých je prítomný daný atribút so špecifickou hodnotou.
[ typ] ( nejaký štýl; ) [ typ= "odoslať" ] ( nejaký štýl; ) vstup[ typ= "odoslať" ] ( nejaký štýl; )

Komplexné selektory

Selektor potomkov – vyberie prvky potomka (značky umiestnené v inej značke). Špecifikované oddelené medzerou (rodič - medzera - dieťa).
div p (nejaký štýl; )
Selektor podriadeného prvku – vyberie prvok priamo vnorený do iného prvku. Určené symbolom ">" (rodič-kontrola-dieťa). Podradený prvok sa líši od podriadeného prvku tým, že prichádza bezprostredne za rodičom (prvá úroveň vnorenia). Zatiaľ čo dieťa sa považuje za akúkoľvek značku v inom, bez ohľadu na úroveň vnorenia.
Bočný panel>ul (nejaký štýl;)
Selektor sesterského prvku – vyberie značku, ktorá nasleduje hneď za inou značkou (nie je uzavretá vo vnútri, ale ide ďalej). Určené plusom (prvý prvok – plus – sesterský prvok). V praxi sa používa zriedka. Predpokladom na použitie je prítomnosť spoločného rodiča pre všetky prvky s kombinovaným znamienkom „+“.
h1+ p (nejaký štýl; )

Pseudotriedy a pseudoprvky

Vyššie uvedená klasifikácia selektorov CSS závisela výlučne od označenia dokumentu. Ak chceme nastaviť zmenu vzhľad prvkov v závislosti od zmien jeho stavu na stránke (napríklad zmena farby tlačidla pri prechode myšou), potom môžeme použiť selektory pseudotried a pseudoprvkov.

Pamätajte, že na rozdiel od html sa v CSS rozlišujú malé a veľké písmená. To znamená, že class.active a .Active nie sú to isté! Použijú sa na rôzne prvky, ak nejaké v dokumente sú.
Pomenujte selektory pre dizajn, aby ste sa s nimi neskôr nemýlili: .leftColumn je dobrý názov, .left závisí od situácie, ale v skutočnosti nie, .llll je nejaký odpad, sami to zistíte bez toho, aby ste sa naň pozreli kód odkiaľ pochádza táto trieda?
Ešte raz vám pripomeniem – ak je na stránke len jeden prvok a je to všetko jedinečné, tak preň použijeme id, ale ak existuje možnosť, že sa objaví ďalší, alebo je na stránke jednoducho viacero podobných prvkov a potom použite triedy na návrh.

Zhrnutie

Selektory v CSS– ide o výkonný nástroj na identifikáciu určitých prvkov stránky alebo skupiny prvkov spojených špecifickou charakteristikou pre ďalšiu aplikáciu štýlov dizajnu z reklamného bloku súvisiaceho s týmto selektorom.

Po zvládnutí všeobecné zásady interakcie a vytváraní selektorov, zabudnete na problémy s dizajnom webových dokumentov. Dobrá znalosť selektorov môže výrazne skrátiť čas rozloženia HTML stránok.

Hoci téma na prvý pohľad pôsobí mimoriadne mätúco, po období praxe, podporenej kvalitatívnou teóriou, sa stáva jednoduchou a zrozumiteľnou.

Čo je to selektor v css je popis tohto prvku alebo skupiny prvkov, ktorý informuje prehliadač, ktorý prvok má vybrať, aby naň použil štýl. Pozrime sa na základné selektory CSS.

1) .X

.topic-title ( farba pozadia: žltá; )

Selektor CSS podľa triedy X. Rozdiel medzi id a class je v tom, že niekoľko prvkov na stránke môže mať rovnakú triedu, ale id je vždy jedinečné. Triedy by sa mali používať na aplikovanie rovnakého štýlu na viaceré prvky.

Chrome
Firefox
Safari
Opera

2) #X

#content ( šírka: 960px; okraj: 0 auto; )

Selektor ID CSS. Znak hash pred CSS selektorom X vyberá prvok, ktorého id = X. Pri priraďovaní štýlov podľa id by ste mali vždy pamätať na to, že musí byť jedinečný – na stránke by malo byť iba jedno takéto id. Preto je lepšie používať selektory podľa tried, kombinácií tried alebo názvov značiek. Avšak selektory ID sú skvelé pre automatické testovanie, pretože... Umožňujú vám okamžite interagovať s presne požadovaným prvkom a mať istotu, že na stránke je len jeden svojho druhu.

Chrome
Firefox
Safari
Opera

3) *

* ( okraj: 0; výplň: 0; )

Selektor CSS pre všetky prvky. Symbol hviezdičky označuje všetky prvky, ktoré sú na stránke. Mnoho vývojárov ho používa na odstránenie (nulovanie) hodnôt okraja a výplne všetkých prvkov stránky. V praxi je však lepšie to nerobiť, pretože tento CSS selektor značne zaťažuje prehliadač prehľadávaním všetkých prvkov na stránke.

Symbol * možno použiť aj na výber všetkých podradených prvkov:

#header * ( orámovanie: 5px plná sivá farba; )

Tento príklad vyberie všetkých potomkov (potomkov) prvku s #header . Vždy je však potrebné pamätať na to, že tento selektor je pre prehliadač dosť ťažký.

Chrome
Firefox
Safari
Opera

4) X

a ( farba: zelená; ) ol ( ľavý okraj: 15px; )

Selektor typu CSS. Ako vybrať všetky prvky rovnakého typu, ak nemajú ani id, ani triedy? Vyplatí sa použiť selektor typu prvku CSS. Ak chcete napríklad vybrať všetky usporiadané zoznamy na stránke, použite ol(...), ako je uvedené vyššie.

Chrome
Firefox
Safari
Opera

5) X Y

li a (hmotnosť písma: tučné; výzdoba textu: žiadna; )

Selektor potomkov CSS alebo Selektor CSS detské prvky sa používa najčastejšie. Používa sa, ak je potrebné vybrať prvky určitého typu z mnohých podradených prvkov. Napríklad musíte vybrať všetky odkazy, ktoré sa nachádzajú v prvku li. V tomto prípade použite tento volič. Pri použití reťazí takýchto selektorov si vždy položte otázku, či by sa na zvýraznenie daného prvku nedala použiť ešte kratšia sekvencia selektorov.

Chrome
Firefox
Safari
Opera

6) X + Y

div + p ( rodina písma: "Helvetica Neue", Arial, bezpätkové; veľkosť písma: 18px; )

Selektor susedných prvkov vyberá iba prvok typu Y, ktorý nasleduje hneď za prvkom X. V tomto prípade dostane každý odsek bezprostredne za každým prvkom div špeciálny typ a veľkosť písma.

IE7+
Firefox
Chrome
Safari
Chrome

7) X > Y

#content > ul ( orámovanie: 1px plná zelená; )

Selektor potomkov CSS. Rozdiel medzi selektormi X Y a X > Y je v tom, že príslušný selektor CSS vyberie iba bezprostredných potomkov prvkov (vyberie iba priamych potomkov). Napr.:

Položka zoznamu
- Potomok prvého prvku zoznamu
Položka zoznamu
Položka zoznamu

Selektor CSS #content > ul vyberie iba ul, ktorá je priamym potomkom prvku div s id="container" . Nevyberie ul, ktorá je potomkom prvej li. Toto je pomerne rýchly selektor CSS.

Chrome
Firefox
Safari
Opera

8) X ~ Y

ol ~ p ( ľavý okraj: 10px; )

Selektor sesterských (podradených) prvkov menej prísny ako X + Y. Vyberie nielen prvý, ale aj všetky ostatné p prvky nasledujúce po ol.

Chrome
Firefox
Safari
Opera

a:link ( farba: zelená; ) a:navštívené ( farba: šedá; )

Pseudotrieda:odkaz slúži na výber všetkých odkazov, na ktoré sa ešte nekliklo. Ak potrebujete použiť určitý štýl na už navštívené odkazy, použite pseudotrieda:navštívená.

Chrome
Firefox
Safari
Opera

10) X

a(farba:červená ;)

Selektor atribútov CSS. Tento príklad vyberie iba tie odkazy, ktoré majú atribút title.

Chrome
Firefox
Safari
Opera

11) X

a (farba: žltá; )

Chrome
Firefox
Safari
Opera

12) X

a ( farba: #dfc11f; )

Hviezdička znamená, že hodnota, ktorú hľadáte, musí byť niekde v atribúte (akákoľvek časť atribútu href). Takto sa vyberú aj odkazy z https://www..stijit.. Zlatá farba sa použije na všetky vybrané odkazy.

Chrome
Firefox
Safari
Opera

13) X

a ( pozadie: url(cesta/k/externej/ikona.png) bez opakovania; padding-left: 15px; )

Na niektorých stránkach sú vedľa odkazov vedúcich na iné stránky umiestnené malé ikony šípok, ktoré označujú, o čo ide. vonkajšie odkazy. Karat „^“ je symbol označujúci začiatok riadku. Ak teda chcete vybrať všetky značky, ktorých href začína http, musíte použiť selektor CSS s karat, ako je uvedené v príklade vyššie.

Chrome
Firefox
Safari
Opera

14) X

a(farba:zelená;)

Tu sa používa regulárny výraz a symbol $ označujúci koniec riadku. IN v tomto príklade hľadáme všetky odkazy, ktoré odkazujú na obrázky s príponou .jpg.

Chrome
Firefox
Safari
Opera

15) X

a(farba:zelená;)

Tu podávame žiadosť Selektor vlastných atribútov CSS. Ku každému odkazu pridávame vlastný atribút data-filetype:

odkaz

Teraz pomocou vyššie uvedeného selektora CSS môžete vybrať všetky odkazy vedúce k obrázkom s ľubovoľným rozšírením.

Chrome
Firefox
Safari
Opera

16) X

Vlnovka (~) vám umožňuje zvýrazniť konkrétny atribút zo zoznamu atribútov oddelených medzerou. Môžete si napísať vlastný atribút data-info, v ktorom ich môžete zadať viacero Kľúčové slová cez priestor. Týmto spôsobom môžete označiť, že odkaz je externý a vedie k obrázku.

odkaz

Pomocou tejto techniky môžeme vybrať prvky s kombináciami atribútov, ktoré potrebujeme:

/* Vyberte prvok, ktorého atribút data-info obsahuje hodnotu external */ a ( color: green; ) /* Vyberte prvok, ktorého atribút data-info obsahuje hodnotu image */ a ( border: 2px prerušovaná čierna; )

Chrome
Firefox
Safari
Opera

17) X: začiarknuté

input:checked ( orámovanie: 3px začiatok čierne; )

Táto pseudotrieda zvýrazňuje iba prvky, ako je začiarkavacie políčko alebo prepínač, a to iba vtedy, keď sú už v začiarknutom stave.

Chrome
Firefox
Safari
Opera

18) X: po

Pseudotriedy :before a :after sú veľmi užitočné – vytvárajú obsah pred a za vybraným prvkom.

Clearfix:after ( content: ""; display: block; clear: both; viditeľnosť: skryté; font-size: 0; height: 0; ) .clearfix ( *display: inline-block; _height: 1%; )

Tu pomocou pseudotriedy:after, po bloku s class.clearfix, a prázdny riadok, po ktorom sa vyčistí. Tento prístup sa používa, ak nie je možné použiť pretečenie: skryté vlastnosti.

Chrome
Firefox
Safari
Opera

19) X: vznášať sa

div:hover ( farba pozadia: rgba(11,77,130,0,5); )

Použije špecifický štýl na prvok, keď sa nad ním umiestni kurzor myši. Staré verzie internet Explorer apply:uveď len na odkazy.

A:hover ( border-bottom: 1px bodkovaná modrá; )

IE6+ (platí len pre odkazy v IE6)
Chrome
Firefox
Safari
Opera

20) X:not (selektor)

div:not(#content) ( farba: šedá; )

Pseudotrieda nie (negácie) To je užitočné, keď napríklad potrebujete vybrať všetky divy okrem toho s id="content" .

Rovnakým princípom môžete vybrať všetky prvky okrem p:

*:not(p) (farba: modrá; )

Chrome
Firefox
Safari
Opera

21) X::pseudoprvok

p::first-line ( font-weight: bold; font-size: 24px; )

Pseudoprvky možno použiť na aplikovanie štýlov na časti prvkov, napríklad na prvý riadok odseku alebo prvé písmeno slova. Vzťahuje sa len na prvky bloku.

Výber prvého písmena odseku:

P::first-letter ( font-family: cursive; font-size: 30px; font-weight: bold; padding-right: 1px; )

Výber prvého riadku v odseku:

P:prvý riadok (veľkosť písma: 28px; váha písma: tučné; )

Chrome
Firefox
Safari
Opera

22) X:prvé dieťa

ul li:first-child ( border-top: none; )

Pseudotriedne prvodieťa vyberie iba prvého potomka nadradeného prvku. Často sa používa na odstránenie orámovania z prvého prvku zoznamu. Táto pseudotrieda existuje odvtedy CSS 1.

Chrome
Firefox
Safari
Opera 3.5+
Android

23) X: posledné dieťa

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

Pseudotriedne posledné dieťa vyberie posledného potomka nadradeného prvku. Objavil sa až odvtedy CSS 3.

IE9+ (IE8 podporuje prvé dieťa, ale nie posledné dieťa. Microsoft (c))
Chrome
Firefox
Safari
Opera 9.6+
Android

24) X: jediné-dieťa

div p:iba-dieťa ( farba: zelená; )

Jedine-dieťa pseudotriedy umožňuje vybrať tie prvky, ktoré sú jedinými deťmi ich rodičov.

Chrome
Firefox
Safari 3.0+
Opera 9.6+
Android

25) X:n-té dieťa(n)

li:nth-child(3) ( farba: čierna; )

Vyberie podradený prvok podľa čísla zadaného v parametri. selektor n-tého dieťaťa berie ako parameter celé číslo, ale počíta od 1, t.j. ak potrebujete vybrať druhú položku zoznamu, použite li:nth-child(2) . Všetky pseudotriedy používajúce n-té dieťa sa objavili len počnúc CSS 3.

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

26) X:n-té-posledné-dieťa(n)

li:nth-last-child(2) ( farba: červená; )

Ak máte veľký zoznam prvkov v ul a potrebujete vybrať tretí prvok od konca? Namiesto písania li:nth-child(109) môžete použiť selektor posledného dieťaťa n-té-posledné-dieťa. Táto metóda je rovnaká ako predchádzajúca, ale počíta sa od konca.

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

27) X:n-tý typ(n)

ul:nth-of-type(3) ( orámovanie: 1px bodkovaná čierna; )

Ak sú na stránke štyri nezoradené zoznamy a potrebujete upraviť iba tretí zoznam, ktorý nemá jedinečné ID, mali by ste použiť n-tého typu.

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

28) X:n-tý-posledný-typ(n)

ul:nth-last-of-type(3) ( orámovanie: 2px hrebeňová modrá; )

Pseudotrieda n-tého posledného typu (n) je určený na výber n-tého prvku určitého typu od konca.

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

29) X: iba typu

li:only-of-type ( font-weight: bold; )

Pseudotrieda iba typu vyberie prvky, ktoré nemajú susedov v rámci nadradeného prvku. Môžete napríklad vybrať všetky uls, ktoré obsahujú iba osamelé zoznamy.

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

30) X: prvý typ

ul:first-of-type > li:nth-child(3) ( štýl písma: kurzíva; )

Pseudotrieda prvého typu vyberie prvý prvok daného typu.

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

Celkovo existuje sedem typov selektorov. toto:

Selektor značiek
Výber triedy
volič ID
Univerzálny volič
Selektor atribútov
Selektor pseudotried
Selektor pseudoprvkov

Najjednoduchší je napísaný ako názov značky bez lomených zátvoriek. Napríklad div.

Týmto záznamom hovoríme, že celý obsah všetkých značiek

nášho dokumentu alebo dokumentov budú napísané červeným písmom.

Ak potrebujeme dať jednému odseku nejaké, povedzme, pozadie. Potom môžeme použiť selektor triedy. Pred napísaním pravidiel však potrebujeme značku

Napíšte atribút tohto odseku trieda, v zmysle ktorej môžete napísať čokoľvek chcete (okrem latinských písmen môžete použiť pomlčku a čísla), ale nášmu selektoru musíte dať meno, aby ste neskôr pochopili, na čo sa vzťahuje. Potom v šablóne štýlov alebo v značke nášho dokumentu medzi napíšeme bodku a za ňou hodnotu atribútu trieda a v zložených zátvorkách určujeme pravidlá pre tento odsek.
Ak v dokumente:

To
v šablóne štýlov:

Pravilo (
…
}

Súčasne môžu mať rôzne prvky dokumentu rovnaké hodnoty atribútov triedy. To znamená, že tej istej triede môžeme priradiť viacero značiek a ich obsah bude nejakým spôsobom formalizovaný. To nám umožňuje vytvárať univerzálne pravidlo, napríklad zvýrazniť dôležité časti textu a jednoducho pridať atribút do dokumentu trieda v značkách.

Prvá vec, ktorú stojí za zmienku, je, že hodnota atribútu id v HTML je jedinečná. Na rozdiel od triedy ju nemôžeme priradiť k žiadnej značke, ale iba k jednej! V šablóne štýlov je znázornená ako znak hash a v dokumente musíte do značky pridať atribút id s nejakou hodnotou.
Ak v dokumente:

To
v šablóne štýlov:
#pravilo(
…
}

Univerzálny volič je napísaný ako hviezdička. Ak nastavíte pravidlá pre tento selektor v tabuľke, potom sa toto pravidlo bude vzťahovať na obsah všetkých značiek.
*{
…
}

Všetky štyri tieto typy selektorov dnes fungujú vo všetkých prehliadačoch. Existujú však selektory, ktoré nefungujú všade, napríklad v prehliadači Internet Explorer verzie 7.6 a nižšej.

Sú napísané takto:

{
…
}

Týmto záznamom hovoríme, že všetko, čo obsahujú značky, ktoré majú atribút titul, bude mať tvar, ktorý je napísaný v zložených zátvorkách. Navyše vôbec nezáleží na tom, či má tento atribút nejaký význam. Môže byť prázdny a napísaný takto:

Každopádne k tagu

Použijú sa pravidlá, ktoré sú napísané v selektore.
Ak chcete, aby sa pravidlá aplikovali na atribút (napr. titul) s určitou hodnotou, potom by ste to mali napísať takto:

{
…
}

Ak chcete, aby sa pravidlá aplikovali na obsah konkrétnej značky s nejakým atribútom (napr. titul), ktorý má určitý význam, mal by byť napísaný takto:

p(
…
}

Ak chceme, aby sa pravidlá aplikovali na obsah značiek s atribútom titul(alebo nejaké iné), ktorého význam obsahuje nejaké celé slovo, potom ho musíte napísať takto:

{
…
}

titul(alebo iný), vo význame ktorého nie je celé slovo, ale jednoducho nejaký text (napríklad slovo Kaspický obsahuje kaspický jazyk). Potom to musíte napísať takto:

{
…
}

Ak chceme, aby sa pravidlá aplikovali na obsah značky, ktorá má atribút titul(alebo iný), ktorého význam sa začína niektorými symbolmi (písmenami). Potom to musíte napísať takto:

{
…
}

Ak chceme, aby sa pravidlá aplikovali na obsah značky, ktorá má atribút titul(alebo iný), ktorého význam sa končí niektorými symbolmi (písmenami). Potom to musíte napísať takto:

{
…
}

Selektory atribútov sú veľmi výkonným nástrojom, ktorý sa dnes, žiaľ, až tak nevyužíva, a to „vďaka“ Microsoftu a jeho IE 6.7 a nižším. Ale čoskoro, keď IE verzie 6.7 a nižšie konečne vymrú, tieto selektory sa pevne stanú súčasťou CSS a budú široko používané.

Selektory pseudotried sú zodpovedné za vzhľad obsahu prvkov, keď je v nejakom stave.
Tieto selektory sú :link, :visited, :active, :hover, :focus a :first-child. Prvé dva sa týkajú len odkazov, t.j. k obsahu značiek a zvyšok možno použiť na akúkoľvek značku, ktorá má obsah.

:link formátuje odkazy dotknuté používateľom.

a:link (color:blue)

Týmto záznamom hovoríme, že všetky odkazy v dokumente alebo dokumenty, ktorých sa používateľ nedotkne, budú zafarbené modrou farbou.

a:navštívené (farba:červená;)

:active zdobí aktívny prvok (v momente kliknutia myšou). Dá sa použiť na akýkoľvek prvok, ale v IE 6 funguje iba pre hypertextové odkazy.

p:aktívne (farba:červená)

Týmto záznamom hovoríme, že všetky odseky v momente kliknutia myšou budú zafarbené na červeno (písmená).

:hover – zdobí prvok, keď naň používateľ prejde myšou. Dá sa použiť aj na akýkoľvek prvok, ale v IE 6 funguje iba pre hypertextové odkazy.

p:zameranie (farba:červená;)

Keď stlačíte Tab, text v prvkoch bude červený

:first-child – stanovuje pravidlá pre prvé „deti“ všetkých prvkov. Nefunguje v IE 6.
O tom, čo sú deti a rodičia, si povieme viac v inom článku, ale zatiaľ poviem len to, že štítok, ktorý je v inom štítku, je jeho „dieťa“. Napríklad máme kód:

Pri zobrazení v prehliadači obsah prvej značky

Sfarbí sa do červena.

Existujú len dva selektory pseudoprvkov. Sú to: prvý riadok a: prvé písmeno
:prvý riadok – prvý riadok (riadok)
:first-letter – prvý znak
Ak napíšeme:

p:prvý riadok (farba:modrá), potom

Vo všetkých odsekoch dokumentu alebo dokumentov budú prvé riadky zafarbené modrou farbou.

Ak napíšeme:

p:prvé písmeno (farba:modrá), potom

vo všetkých odsekoch budú prvé písmená zafarbené modrou farbou.
Oba tieto selektory nefungujú v IE 6.

Zdá sa, že to je všetko o selektoroch; ak ste niečo vynechali alebo ste niekde urobili chybu, napíšte do komentárov k materiálu.

Selektor v CSS − toto je ukazovateľ na prvku alebo skupine prvkov, na ktoré sa použijú pravidlá štýlu. Existujú nasledujúce typy selektorov:

1. Selektory podľa značiek: h1

2. Selektor podľa ID: #Hlavná

3. Selektory podľa triedy: .skrytý

4. Volič viacerých tried

Píšu sa spolu bez medzier. Selektory, ktoré spĺňajú niekoľko podmienok súčasne (logické „AND“). Štýly sa použijú na všetky prvky, ktoré majú súčasne class.hidden aj class.closed.

Skryté.zatvorené

5. Kontextové selektory

Oddelené medzerou. Tieto selektory sa používajú na aplikovanie štýlov na prvok, iba ak je vnorené na požadovaný prvok.

P silný ul .zvolená .hlavička .menu a

6. Susedné voliče

Vyberie nasledujúci prvok. Zapisujú sa pomocou znamienka +. Znie ako: aplikujte vlastnosti na selektor2, čo by malo byť hneď po volič1.

Štýly sa aplikujú na prvok, ktorý sa zhoduje so selektorom2, iba ak mu predchádza prvok, ktorý sa zhoduje so selektorom1.

....zelená + .selected()

V príklade .green + .selected použije štýly na druhý prvok, pretože pred ním je prvok s triedou .zelená . Selektor .green + li použije štýly aj na druhý prvok, ale selektor .selected + .green nebude fungovať.

7. Súvisiace selektory

Vyberie nasledujúce prvky. Podobné ako predchádzajúce, ale s tým rozdielom sú vybrané všetky nasledujúce prvky, nielen prvý prvok.

položka

Tiež vybrané

Nevybraté...ul~p()

V tomto príklade budú vybrané všetky p prvky nasledujúce po ul. Zatiaľ čo pri použití voliča ul + p sa vyberie iba prvý prvok.

8. Detské voliče

Zapisujú sa pomocou znamienka > a vzťahujú sa len na prvky prvej úrovne vnorenia. Prvky vnorené do iných prvkov nie sú ovplyvnené.

Ul > li ( }

V prípade kontextových selektorov ovplyvňujú všetkých potomkov (napríklad ak nastavíte ul li), čo nie je vždy vhodné. Podradené selektory vám umožňujú nastaviť štýly len pre prvky prvej úrovne vnorenia.

ul > li znamená to isté ako ul li , no vyberú sa len li prvej úrovne vnorenia, ktoré sú priamo vnorené do ul. Pre li vnorené v rámci iných dcérskych li prvkov už pravidlá nebudú platiť.

9. Selektory atribútov

Najčastejšie sa používa pri práci s formulármi. Selektory atribútov sa píšu pomocou hranatých zátvoriek element[atribút] .

Príklady selektorov atribútov:

Vstupný vstup div a a a a

Vo vyššie uvedenom príklade vám ~ umožňuje vybrať konkrétny atribút zo zoznamu atribútov oddelených čiarkami, ako napríklad:

10. Globálny volič

Selektor * vyberie Všetky prvkov. Môže sa použiť aj na zvýraznenie podradených prvkov:

* ( okraj: 0; výplň: 0; ).obsah * ( obrys: žiadny; )

11. Pseudotriedy

Príklady pseudotried:

A:link a:visited a:active a:hover input:checked .clearfix:after () div:not(#container) p::first-line p::first-letter

Negačná pseudotrieda:not môže byť veľmi užitočná. Napríklad, keď potrebujete vybrať všetky divy okrem tej s id kontajnerom.

Selektory CSS sú špecifickou štruktúrou CSS, ktorá vám umožňuje vybrať konkrétny prvok v kóde HTML a upraviť ho. Každý z nich má svoju špecifickosť, to znamená, že môže prekrývať vlastnosti iných, „slabších“.

Selektor CSS podľa značky a triedy

Najjednoduchšie selektory sú podľa značky a podľa triedy. Selektor tagu je najvšeobecnejší a vyberá všetky prvky s konkrétnym tagom. Môžete napríklad napísať CSS vlastnosti-kód v nasledujúcom tvare: „p (farba: modrá)“, kde „p“ je značka odseku a vlastnosť „color: blue“ označuje farbu textu. V dôsledku toho sa text vo všetkých odsekoch zmení na modrý. Selektory podľa značky môžu byť uvedené oddelené čiarkami, potom nebude potrebné písať vlastnosť dvakrát.

Ak majú niektoré odseky triedu, napríklad „modrú“, spustenie selektora CSS môže byť ešte jemnejšie. Ale jeho zápis vo vlastnostiach bude iný - pred názvom triedy sa objaví bodka. To znamená, že ak chcete vybrať všetky odseky, ktoré majú priradenú triedu „modrá“ a zafarbiť ich na modro, musíte do vlastností CSS napísať nasledujúci kód: „.blue: (color: blue)“. Tento selektor je špecifickejší a silnejší ako selektor značiek CSS, ale je jedným z najjednoduchších. Existujú aj zložitejšie pravidlá, ktoré vám umožňujú vybrať malé skupiny prvkov.

Vlastnosti selektorov podľa ID

Selektory podľa id alebo identifikátora sú špecifickejšie ako podľa triedy a atribútu. To znamená, že pri použití v kaskáde „prevážia“ iné podobné selektory. Identifikátory tiež pomáhajú presne vybrať konkrétny prvok v kóde, ale ich použitie pri návrhu stránky sa medzi dizajnérmi rozloženia považuje za zlý postup. Iba vo veľmi zriedkavých prípadoch, napríklad pri vytváraní posúvača pomocou CSS, je tento postup prijateľný. Faktom je, že na jednej stránke môže byť iba jeden prvok so špecifickým ID. Z dôvodu jedinečnosti selektora ID CSS ho preto možno použiť iba na jeden prvok. V tomto prípade má oveľa väčší zmysel používať triedy namiesto identifikátorov.

Rôzne názory na selektor ID

Existuje však aj opačný názor, že identifikátor pomáha určiť ten kúsok kódu na stránke, ktorý by mal byť v jedinej kópii. To znamená, že selektory tried to môžu nahradiť, ale mali by sa používať pre veľké skupiny prvkov a na miestach, kde sa vyžaduje presnosť, je lepšie použiť id. Každý návrhár layoutu má právo vytvoriť si svoj vlastný názor na túto problematiku a napísať kód vo svojom vlastnom štýle. Pri písaní selektora podľa id sa pred ním používa symbol „#“. To znamená, že riadok kódu bude vyzerať takto: „#blue: (color: blue)“. Pri tejto položke bude prvok s identifikátorom „#blue“ zafarbený modrou farbou.

Pomocou kaskády

Pri používaní selektorov ID CSS v HTML môžete použiť aj vlastnosť kaskády. Napríklad, ak vo vnútri značky s identifikátorom potrebujete vybrať nejakú podradenú značku a zmeniť jej vlastnosti, musíte si najprv zapísať názov identifikátora so značkou hash, potom podradenú značku a jej vlastnosti. Takéto selektory sa nazývajú vnorené. To znamená, že riadok kódu bude vyzerať asi takto: „#id p (farba: modrá).“ Potom vo vnútri nadradeného prvku s týmto identifikátorom sa farba textu podriadeného odseku zmení na modrú.

Používanie selektorov podradených prvkov

Ďalšou možnosťou použitia kaskády na zmenu vlastností podradených prvkov je, ak potrebujete vybrať iba konkrétnu časť kódu. Nazýva sa aj selektor potomkov. Napríklad na výber odseku v riadku tabuľky sa použije nasledujúca položka selektora CSS: „ul li > p: (farba: modrá)“. Je potrebné venovať pozornosť skutočnosti, že čím dlhší je záznam, tým vyššia je pravdepodobnosť, že bude možné zmeniť nejakú špecifickú vlastnosť prvku, pretože sa stáva vyššou prioritou pre kaskádu. Napríklad prvky s nejakou inou vlastnosťou selektora CSS v triede, ktorá je rodičom, nezmenia svoje vlastnosti úplne. Prefarbí sa iba určitá časť textu v zozname.

Selektor súrodeneckého prvku

Ďalším zaujímavým spôsobom použitia kaskádovania sú priľahlé selektory CSS. Sú zapísané ako súčet selektorov: „rozpätie + a (modrá farba)“. Za suseda sa v tomto prípade považuje ten, pod ktorým je iný, ktorý vyhovuje požadovaným parametrom. Ak sú teda v kóde tri prvky, tak sa vlastnosť nebude vzťahovať na prvý z nich, pretože nemá suseda, ale na všetky nasledujúce - áno. Stáva sa to kvôli ikone súčtu, keď sa namiesto predchádzajúcich pridávajú nasledujúce selektory. Tento zápis pomáha skrátiť kód a vyhnúť sa písaniu niekoľkých selektorov CSS pre rôzne značky, pričom sa na ne vzťahujú rovnaké vlastnosti. Ak sa druhému prvku zoznamu dodatočne pridelí trieda a záznam sa zmení na „.class + a(farba modrá)“, odpočítavanie sa začne od neho a vlastnosti sa zmenia pre nasledujúce prvky, ktoré zodpovedajú pravidlu, ale prvé dve zostanú rovnaké.

Teraz predpokladajme, že v našom kóde sú tri identické značky s rôznymi triedami a musíme vybrať všetky prvky za nejakým konkrétnym. V tomto prípade nepomôže samotné použitie selektorov značiek CSS. Na to použite nasledujúci selektor: „.class ~ div“. Týmto sa vyberú prvky s tagom div, ktoré nasledujú po danej triede. Ak chceme vybrať nielen prvky so značkou div, ale aj všetky nasledujúce, namiesto značky za znakom vlnovky musíme vložiť symbol hviezdičky - „*“. Takýto záznam bude znamenať, že je potrebné vybrať všetko, čo nasleduje po danej triede. Ak ako selektor ponecháte iba hviezdičku, môžete vybrať všetky prvky na stránke.

Selektory podľa atribútu CSS

Povedzme, že v našom kóde sú prvky s niektorými atribútmi, ale všetky sa od seba líšia a sú napísané pomlčkou a musíme vybrať všetky tie, ktorých názov triedy začína určitým slovom, napríklad „selektor“ a triedy sú oddelené znakom "-". Čo by ste mali robiť v tomto prípade? Vstup selektora začína hranatými zátvorkami, kde sa najprv napíše názov atribútu, potom zvislá lomka, znak „=“ a „selektor“: „selektor údajov- |=“. Ďalej napíšte požadovanú vlastnosť, ktorú chcete zmeniť. V dôsledku toho sa vyberie prvok so zadanými parametrami. Zmenou tried môžete zmeniť vlastnosti určitých častí kódu. Ak sa názvy tried nepíšu so spojovníkom, ale ako jedno slovo, potom sa dajú vybrať aj, ale s použitím trochu iného zápisu. V tomto prípade je zvislá lomka nahradená symbolom „^“: „údaje^ = selektor“. Tento selektor vyberie podreťazec so začiatkom názvu triedy.

Ako vybrať prvok so špecifickým koncom v názve triedy

Teraz to urobme inak a nevyberme časti kódu podľa začiatku popisu triedy, ale podľa posledných písmen v jej názve. Na to potrebujeme znak dolára. Vložíme ho na miesto zaškrtávacieho políčka a za znak rovnosti napíšeme koniec názvu triedy: „data$ = ctor“. Teraz sa vyberú prvky s touto kombináciou písmen a použijú sa na ne určité vlastnosti. Môžete si vybrať ľubovoľný atribút. Poďme zistiť, čo robiť, ak potrebujeme nájsť prvok s nejakou kombináciou písmen v strede slova. V tomto prípade zmeníme znak dolára na hviezdičku a za znak rovnosti napíšeme potrebné písmená: „data* = ct“.

Pseudotriedy - špeciálne selektory

Pre odkazy sa zvyčajne používajú špeciálne selektory štýlov CSS, ktoré zobrazujú ich rôzne stavy: tichý, zaostrený, aktívny, dokončený – nazývajú sa pseudotriedy. Pseudotrieda pre aktívny odkaz, nad ktorým sa nachádza kurzor, je napísaná takto: „a:active“. Ďalej prichádzajú niektoré vlastnosti, najčastejšie sa mení pozadie alebo sa pridáva tieň. Ak pridáte túto vlastnosť do odkazu a kliknete naň, zmení svoju farbu na zadanú. Ďalšia pseudotrieda - vznášanie ukazuje, že odkaz už bol navštívený. Píše sa takto: „a:hover“.

Vlastnosti aktívnych a zaostrených stavov

Aktívny sa často zamieňa s iným stavom – ohniskom. Píše sa takto: „a:focus“ a označuje aktívny stav tlačidla pri práci z klávesnice. To znamená, že ak použijete kláves TAB, aktívny odkaz bude zvýraznený špeciálnou farbou. Túto vlastnosť je potrebné použiť, pretože nie všetci používatelia môžu na navigáciu na stránke používať myš. Niektorí môžu mať slabý zrak alebo iné zdravotné obmedzenia, preto sa po stránke pohybujú pomocou kláves alebo špeciálnych zariadení. Ignorovanie stavu zaostreného tlačidla je veľkou nevýhodou pre taký parameter v dizajne stránky, akým je dostupnosť, a má výrazný vplyv na jej návštevnosť pre špeciálnu kategóriu používateľov. Počas normálnej navigácie myšou sa odkaz stane aktívnym aj zaostreným. Preto je dôležité dbať na to pri stylingu prvkov.

Pseudoprvky

Pseudoprvky vám umožňujú definovať špecifické štýly bez toho, aby ste ich definovali v skutočnom jazyku. HTML štruktúra. Zapisujú sa takto: názov selektora, znak „::“, názov pseudoprvku. Najbežnejšie prvky sú „pred“ a „po“. Majú vlastnosť „obsah“ a nemožno ich použiť na interné štýly. „Po“ je potrebné na pridanie nejakého obsahu za obsah určitého prvku. Čo presne treba vložiť, je zaznamenané vo vlastnosti „obsah“. Podobne pseudoprvok „pred“ pridáva obsah pred obsah prvku. Použitie týchto špeciálnych selektorov vám umožňuje skrátiť kód a nepísať novú štruktúru pre niektorú jeho časť zakaždým, ak potrebujete pridať malý detail na určité miesto v kontajneri. Veľmi často sa používajú pri úprave stránok a pridávaní niektorých dekoratívnych prvkov. Kombinácie všetkých týchto možností pomáhajú vytvárať nezvyčajné efekty na stránke a výrazne pomáhajú návrhárovi rozloženia.