Selektor sa používa na jedinečnú identifikáciu prvku v html dokument, na ktorý chceme použiť konkrétny štýl CSS.

• Selektor podľa prvku;
• Selektor podľa triedy;
• Selektor podľa ID;
• Kontextový selektor;

Selektor prvkov

Až do tohto bodu sme pracovali s týmto selektorom. ako selektor bol použitý samotný názov html prvok, do ktorej sme sa chceli prihlásiť tento štýl. Tie. Po napísaní triedy napríklad pre odsek (P) všetky odseky na stránke nadobudli štýl tejto triedy.

P(
veľkosť písma: 12px
}

Teraz si predstavte situáciu, že potrebujete urobiť prvý odsek v jednom štýle, druhý v inom, tretí v treťom atď. Tu nám príde na pomoc selektor podľa triedy.

Výber podľa triedy

Pozrime sa, ako vytvoriť generickú triedu v CSS. A je to veľmi jednoduché: najprv dáme bodku, potom hneď, bez medzery, napíšeme názov triedy a potom štýl v zložených zátvorkách. Napríklad:

.zelená(
rodina písiem: arial, verdana, bezpätkové;
veľkosť písma: 12px; farba:zelená;
}

Ako aplikovať tento štýl?

Povedzme, že chceme použiť tento štýl na konkrétny odsek v dokumente. Takto to bude vyzerať v html:

Text odseku...

Ako vidíte, atribút sa používa trieda s významom názvu štýlu.

PRÍKLAD:

Toto je normálny odsek, používa selektor prvkov

Tento odsek je zelený, pretože naň bola aplikovaná trieda

A tento odsek je väčším písmom a červenou farbou

Tento odsek je opäť normálny, podľa triedy selektora prvkov

p(
font-family:arial,verdana,sans-serif;
font-size:18px;
}
.zelená (farba:zelená;)
.velký červený(
font-size:28px;
farba:červená;
}

Najprv určíme základný štýl pre všetky odseky (selektor podľa prvku) a potom, ak chceme v ktoromkoľvek odseku niečo zmeniť, vytvoríme preň špeciálny štýl (selektor podľa triedy) a priradíme ho k tomuto odseku. Keď vytvoríme túto veľmi špeciálnu triedu, musíme tam napísať len tie vlastnosti, ktoré chceme pridať alebo zmeniť vo vzťahu k základnému štýlu pre tento prvok.

Triedy z príkladu vyššie sa dajú aplikovať nielen na odsek, ale napríklad aj na nadpisy, alebo napríklad na bunku tabuľky, alebo na celú tabuľku, skrátka sa dajú aplikovať všade tam, kde sa dá ovplyvniť niečo (v v tomto prípade všade tam, kde je parameter farby a textu).

Triedu môžete prinútiť pôsobiť iba na konkrétny prvok (napríklad odsek) zadaním názvu prvku pred bodku:

P.green (farba:zelená;)

Teraz zelená trieda nebude pôsobiť na nič iné ako na prvok P.

Výber podľa ID

Tento selektor sa používa, ak potrebujete vybrať jeden jediný prvok, jedinečný, odlišný od všetkých ostatných v dokumente. Napríklad zvýraznite prvý nadpis na stránke určitým spôsobom:

html časť:

<Н1 id="firstheader">Prvý nadpis na stránke

css - časť:

H1#firstheader ( farba: červená; hrúbka písma: tučné; zarovnanie textu: na stred )

Ako vidíte, v html časti je namiesto atribútu class použitý atribút id a v css namiesto bodky znak #.

V zásade to isté možno urobiť pomocou selektora triedy J

Kontextový selektor

Toto je veľmi užitočná vec. Povedzme, že máme stránku s tabuľkami a odsekmi textu a v tabuľke aj v odsekoch sú slová vytlačené tučným písmom. Je potrebné zabezpečiť, aby slová v odseku, ktoré sú zvýraznené tučným písmom, zozelenali. Takže tu je:

p silný (farba:zelená)

Tie. najprv P potom medzera, potom SILNÝ, a až potom štýl. Tento riadok znie asi takto: Ak je vnútri prvku P je tam prvok SILNÝ potom silnému prvku priraďte zelený štýl.

Hniezdenie môže mať akúkoľvek úroveň. Tu je ďalší príklad: „Ak sa náhle v bunke tabuľky ( td) , odsek ( P), vnútri ktorého bude slovo zvýraznené tučným písmom ( SILNÝ), potom nech sa toto slovo zmení na červenú! "

td p silný (farba:červená;)

Selektor je súčasťou pravidla CSS, ktoré informuje prehliadač, ktorý prvok (alebo prvky) na webovej stránke bude mať štýl.

Pojem selektor môže označovať jednoduchý selektor, zložený selektor, komplexný selektor alebo zoznam selektorov.

TO jednoduché selektory týkať sa:

• selektor typu
• univerzálny volič
• selektory atribútov
• selektor identifikátora
• selektor triedy
• pseudo triedy

Selektor CSS	Príklad	Popis	CSS
.trieda	.moja trieda	Vyberie všetky prvky s triedou mojaTrieda (class="myClass").	1
#id	#Hlavná	Vyberie prvok s id main (id="main").	1
	*	Výber všetkých prvkov.	2
element	rozpätie	Výber všetkých prvkov .	1
prvok, prvok	div,span	Výber všetkých prvkov a všetky prvky .	1
[atribút]		Vyberie všetky prvky s atribútom title.	2
[attribute="value"]		Vyberie všetky prvky s atribútom title, ktorých hodnota sa presne zhoduje s hodnotou zadanou v selektore (title="cost"). !}	2
[attribute~="value"]		Vyberie všetky prvky s atribútom title, ktorých hodnota (kdekoľvek) obsahuje podreťazec (ako jedno slovo) "one" (title="one and two"). !}	2
[attribute|="value"]		Vyberie všetky prvky s atribútom lang, ktorých hodnota začína na „ru“.	2
[attribute^="value"]	a	Výber každého prvku s atribútom href, ktorého hodnota začína „https“.	3
[attribute$="value"]		Vyberie všetky prvky s atribútom src, ktorých hodnota končí na ".png" (src="nejaký_obrázok.png").	3
[attribute*="value"]		Vyberie všetky prvky s atribútom title, ktorých hodnota (kdekoľvek) obsahuje podreťazec (ako jedno slovo alebo jeho časť) "one" (title="one and two)"). !}	3

Kompozitný selektor je postupnosť jednoduchých selektorov, ktoré nie sú oddelené kombinátormi, t.j. za jedným selektorom bezprostredne nasleduje ďalší. Vyberie prvok, ktorý sa zhoduje so všetkými jednoduchými selektormi, ktoré obsahuje. Prepínač typu alebo univerzálny selektor zahrnutý v zloženom selektore sa musí objaviť ako prvý v tomto poradí. V zloženom selektore je povolený len jeden selektor typu alebo univerzálny selektor.

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

Komplexný volič je postupnosť selektorov, ktoré sú oddelené kombinátormi.

Zoznam selektorov sú selektory oddelené čiarkami.

Kombinátory

Na kombinovanie jednoduchých selektorov CSS sa používajú kombinátory na označenie vzťahu medzi jednoduchými selektormi. V CSS2 je niekoľko rôznych kombinátorov a jeden dodatočný v CSS3, keď ich použijete, zmenia povahu samotného selektora.

Pseudotriedy

Pseudotrieda je jednoduchý selektor, ktorý sa používa na výber niečoho, čo sa nedá vybrať pomocou iných selektorov alebo sa dá vybrať pomerne zložitým spôsobom.

Pseudotrieda	Príklad	Popis	CSS
:odkaz	odkaz	Vyberie všetky nenavštívené odkazy.	1
:navštívené	a:navštívené	Vyberte všetky navštívené odkazy.	1
:aktívny	a:aktívny	Výber aktívneho odkazu.	1
:vznášať sa	a:vznášať sa	Výber odkazu pri umiestnení kurzora myši.	1
:zamerajte sa	input:focus	Výber prvku , ktorý je zaostrený.	2
:prvorodenec	p:prvorodenec	Výber každého prvku Čo je prvé dieťa svojho rodiča.	2
:lang(jazyk)	p:lang(ru)	Výber každého prvku S atribútom lang, ktorého hodnota začína na „ru“.	2
:prvého typu	p:prvý typ	Výber každého prvku Čo je prvý z prvkov	3
:posledný typ	p:posledný typ	Výber každého prvku Čo je posledný z prvkov Jeho rodičovský prvok.	3
:iba typu	p:jediný typ	Výber každého prvku Čo je jediný prvok Jeho rodičovský prvok.	3
:len dieťa	p:jediné dieťa	Výber každého prvku Čo je jediný podriadený prvok jeho nadradeného prvku.	3
:n-té dieťa(n)	p:n-té dieťa(2)	Výber každého prvku Jeho rodičovský prvok.	3
:n-té-posledné-dieťa(n)	p:n-té-posledné-dieťa(2)	Výber každého prvku Ktorý je druhým potomkom jeho rodičovského prvku, počítajúc od posledného potomka.	3
:n-tý typ(n)	p:n-tý typ(2)	Výber každého prvku Čo je druhé dieťa Jeho rodičovský prvok.	3
:n-tý-posledný-typ(n)	p:n-tý-posledný-typ(2)	Výber každého prvku Čo je druhé dieťa Jeho nadradený prvok, ktorý sa počíta od posledného podriadeného prvku.	3
	3
:nie (výber)	:nie (p)	Výber všetkých prvkov okrem prvku .	3

Pseudoprvky

Pseudoprvok je virtuálny prvok, ktorý v strome prvkov dokumentu explicitne neexistuje. Pseudoprvky sa používajú na výber častí prvku, ktoré nie je možné vybrať pomocou iných selektorov, a tiež na štýlovanie častí prvku namiesto celého prvku.

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 určenie konkrétnych 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.

Iba na rozdiel od bežné texty v kaskádových štýloch je 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 zodpovedajúce značky určitý typ. Určené názvom značky. Používa sa na úlohu všeobecné pravidlá 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 Selektor CSS záviselo 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 stránku, potom na dizajn použite triedy.

Zhrnutie

Selektory v CSS- Toto najmocnejší nástroj identifikácia určitých prvkov stránky alebo skupiny prvkov spojených špecifickou charakteristikou pre ďalšiu aplikáciu štýlov dizajnu na ne 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 HTML rozloženie stránky.

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.

Vlad Merževič

Identifikátor (nazývaný aj „selektor ID“) definuje jedinečný názov prvku, ktorý sa používa na zmenu jeho štýlu a odkazovanie naň prostredníctvom skriptov.

Syntax na použitie identifikátora je nasledovná.

Univerzálny volič

Vlad Merževič

Niekedy je potrebné nastaviť jeden štýl pre všetky prvky webovej stránky súčasne, napríklad nastaviť štýl písma alebo textu. V tomto prípade pomôže univerzálny selektor, ktorý sa zhoduje s akýmkoľvek prvkom webovej stránky.

Symbol hviezdičky (*) sa používa na označenie univerzálneho selektora a vo všeobecnosti je syntax nasledovná.

* (Popis pravidiel štýlu)

Selektory atribútov

Vlad Merževič

Mnohé značky sa líšia svojim účinkom v závislosti od toho, aké atribúty používajú. Napríklad tag môžete vytvoriť tlačidlo, textové pole a ďalšie prvky formulára len zmenou hodnoty atribútu type. Pridanie pravidiel štýlu do selektora INPUT však použije štýl súčasne na všetky prvky vytvorené pomocou tejto značky. Na flexibilné ovládanie štýlu takýchto prvkov boli do CSS zavedené selektory atribútov.

Detské selektory

Vlad Merževič

Podradený prvok je prvok, ktorý sa nachádza priamo vo vnútri nadradeného prvku. Aby sme lepšie porozumeli vzťahom medzi prvkami dokumentu, pozrime sa na malý kód (príklad 12.1).

Príklad 12.1. Vkladanie prvkov do dokumentu

HTML5 CSS 2.1 IE Cr Op Sa Fx

Susedné voliče

Vlad Merževič

Prvky webovej stránky sa nazývajú susediace, keď za sebou bezprostredne nasledujú v kóde dokumentu. Pozrime sa na niekoľko príkladov vzťahov prvkov.

Lorem ipsum dolor sedieť amet.

V tomto príklade značka je potomkom značky

Pretože je vo vnútri tohto kontajnera. Respektíve

Pôsobí ako rodič .

Kontextové selektory

Vlad Merževič

Pri vytváraní webovej stránky často musíte vnoriť niektoré značky do iných. Ak chcete zabezpečiť, aby sa štýly pre tieto značky používali správne, pomôžu vám selektory, ktoré fungujú len v určitom kontexte. Nastavte napríklad štýl značky iba vtedy, keď sa nachádza vo vnútri nádoby

Týmto spôsobom môžete súčasne nastaviť štýl pre jednotlivú značku, ako aj pre značku, ktorá sa nachádza v inej.

Tento materiál je venovaný základom stylingu na internetovom zdroji pomocou selektorov.

Selektory v CSS sa používajú na definovanie špecifických
prvok na html stránke, o ktorý sa musíte uchádzať
alebo zmeniť štýl CSS.

Typy selektorov v CSS

Selektor prvkov

Na poskytnutie potrebného štýlu CSS je v tomto prípade názov prvku html napísaný ako selektor. Stačí napríklad zadať požadovaný štýl pre nadpis H1, potom tieto nadpisy nadobudnú nami požadovanú podobu. Takto bude kód vyzerať:

H1 (
veľkosť písma: 11pt;
}

Často sú chvíle, keď potrebujete urobiť nadpisy rôzne štýly. Tu tento problém pomôže vyriešiť výber triedy.

Výber podľa triedy

Selektor triedy je v CSS univerzálny. Môžete to napísať takto: pred názvom triedy napíšeme bodku a až potom v zložených zátvorkách uvedieme štýl, ktorý potrebujeme:

.red (
font-family: tahoma, sans-serif;
farba:červená;
veľkosť písma: 11pt;
}

Príklad použitia selektora triedy. Aplikujme tento štýl na hlavičku H1 na stránke html:

Názov stránky

Z vyššie uvedeného príkladu môžete vidieť, že je použitý atribút „class“ s daným názvom CSS štýl "červená".
Ďalší príklad. V html časti píšeme:

Táto hlavička je modrá, pretože je na ňu aplikovaná zodpovedajúca trieda

id".

V html dokumente to bude vyzerať takto:

Nastavíme štýl tohto odseku

V dokumente CSS:

p#newstyle ( farba: modrá; veľkosť písma: 12px;)

V dôsledku toho sa pre tento odsek použije modré písmo s veľkosťou 12px.

Kontextový selektor

Rovnako nevyhnutným komponentom je kontextový selektor.
Napríklad na webovej stránke boli potrebné nadpisy „H1“ priložené k štítku tučný zvýrazniť červenou farbou:

H1 tučné (farba:červená; )

Ako vidíte, najskôr sa píše nadpis H1, pridáva sa medzera, značka tučný a potom v zátvorkách štýl, ktorý sme zadali. Dá sa to vyjadriť slovami takto: „Ak je v hlavičke H1 tučný štítok, text by mal byť červený.“

Týmto spôsobom môžete tiež nastaviť štýly pre položky v zoznamoch s odrážkami, tabuľkách a dokonca aj ich bunkách s rôznymi úrovňami vnorenia.

Ďalšia strana -