Jak funguje n-té dítě - Webové standardy. Jak funguje selektor n-tého potomka CSS

Pseudotřída :nth-child se používá k přidání stylu k prvkům na základě číslování ve stromu prvků.

Označení

	Popis	Příklad
<тип>	Označuje typ hodnoty.	<размер>
A && B	Hodnoty musí být na výstupu v uvedeném pořadí.	<размер> && <цвет>
A | B	Označuje, že musíte vybrat pouze jednu z navržených hodnot (A nebo B).	normální | malokapitálky
A || B	Každá hodnota může být použita samostatně nebo společně s ostatními v libovolném pořadí.	šířka || počítat
	Hodnoty skupin.	[ plodina || křížek]
*	Opakujte nula nebo vícekrát.	[,<время>]*
+	Opakujte jednou nebo vícekrát.	<число>+
?	Zadaný typ, slovo nebo skupina je volitelný.	vložka?
(A, B)	Opakujte alespoň A, ale ne více než Bkrát.	<радиус>{1,4}
#	Opakujte jednou nebo vícekrát odděleně čárkami.	<время>#

×

Hodnoty

odd Všechna lichá čísla prvků. sudý Všechny sudé prvky.<число>Pořadové číslo podřízeného prvku vzhledem k jeho nadřazenému prvku. Číslování začíná od 1, bude to první prvek v seznamu.<выражение>Zadává se ve tvaru an±b, kde aab jsou celá čísla a n je čítač, který automaticky nabývá hodnoty 0, 1, 2...

Je-li a nula, pak se nepíše a zápis se zkrátí na b . Pokud je b nula, pak se také neuvádí a výraz se zapisuje ve tvaru an . aab mohou být záporná čísla, v takovém případě se znaménko plus změní na znaménko mínus, například: 5n-1.

Při použití záporných hodnot aab mohou být některé výsledky také záporné nebo nulové. Prvky jsou však ovlivněny pouze kladnými hodnotami kvůli číslování prvků začínajícím na 1.

V tabulce 1 ukazuje některé možné výrazy a klíčová slova a také ukazuje, která čísla prvků budou použita.

Tabulka 1. Výsledek pro různé hodnoty pseudotříd

Význam	Čísla položek	Popis
1	1	První prvek je synonymem pro pseudotřídu :first-child.
5	5	Pátý element.
2n	2, 4, 6, 8, 10,…	Všechny sudé prvky, analogicky k hodnotě sudé .
2n+1	1, 3, 5, 7, 9,…	Všechny liché prvky, analogické k liché hodnotě.
3n	3, 6, 9, 12, 15,…	Každý třetí prvek.
3n+2	2, 5, 8, 11, 14,…	Každý třetí prvek, počínaje druhým.
n+4	4, 5, 6, 7, 8,…	Všechny prvky kromě prvních tří.
-n+3	3, 2, 1	První tři prvky.
5n-2	3, 8, 13, 18, 23,…	—
dokonce	2, 4, 6, 8, 10,…	Všechny sudé prvky.
zvláštní	1, 3, 5, 7, 9,…	Všechny liché prvky.

Je možné kombinovat dvě pseudotřídy :nth-child pro výběr řady prvků. Zde budou vybrány všechny položky dva až pět.

:n-té-dítě(n+2):nté-dítě(-n+5) ( … )

Příklad

	2134	2135	2136	2137	2138
Olej	16	34	62	74	57
Zlato	4	69	72	56	47
Strom	7	73	79	34	86
Kameny	23	34	88	53	103

V tomto příkladu je pseudotřída :nth-child použita ke změně stylu prvního řádku tabulky a také ke zvýraznění všech sudých řádků (obr. 1).

Rýže. 1. Použití pseudotřídy:n-tého potomka na řádky tabulky

Specifikace

Každá specifikace prochází několika fázemi schvalování.

• Doporučení – Specifikace byla schválena W3C a je doporučena jako standard.
• Doporučení kandidáta ( Možné doporučení) - skupina odpovědná za standard je spokojena, že splňuje své cíle, ale vyžaduje pomoc od vývojářské komunity při implementaci standardu.
• Navrhované doporučení Doporučené doporučení) - v této fázi je dokument předložen poradní radě W3C ke konečnému schválení.
• Working Draft – Vyspělejší verze návrhu, která byla prodiskutována a upravena pro komunitní recenzi.
• Předloha editora ( Redakční návrh) - návrhová verze normy po změnách, které provedli redaktoři projektu.
• Koncept ( Návrh specifikace) - první verze návrhu normy.

×

Pseudotřída prvního potomka v CSS se používá k výběru prvního prvku v kontejneru. V tomto případě se nebere v úvahu konkrétní typ prvku, pouze jeho poloha vzhledem k nadřazené záležitosti. Provoz tohoto selektoru má několik jemností, kterým je třeba porozumět, abyste jej mohli správně používat.

Pseudotřídy CSS

Spolu s identifikátory, třídami, značkami a atributy jsou pseudotřídy typem selektoru CSS. Jejich zvláštností je, že je nelze nainstalovat přímo v HTML.

Příklady pseudotříd jsou "první řádek v kontejneru", "první písmeno ve slově", "první potomek rodiče". Prohlížeč může takové prvky detekovat až poté, co analyzuje stránku a zkompiluje strom DOM, a v některých případech až po vykreslení.

Přítomnost podobného mechanismu v CSS umožňuje definovat design, který není svázán s kódem HTML, což otevírá velké možnosti návrhu.

Výběr prvního prvku

Pseudotřída prvního potomka v CSS je zodpovědná za výběr úplně prvního prvku v nadřazeném kontejneru. Textové uzly jsou ignorovány, počítají se pouze plnohodnotné tagy.

Pojďme najít první prvky ve dvou jednoduchých HTML strukturách.

• První bod
• Druhý bod
• Třetí bod

Existují pouze dvěma způsobyžít život. První- jako by zázraky neexistovaly. Druhý- jako by všude kolem byly jen zázraky. Albert Einstein

V důsledku toho bude vybrána první položka v seznamu a značka, která určuje tučný styl písma.

První bod

dvěma způsoby

Syntax

Všechny pseudotřídy v CSS jsou definovány podle určitého vzoru. Nejprve je specifikován hlavní selektor a poté požadovaná pseudotřída oddělená dvojtečkou.

B:první dítě (text-decoration: underline; )

Toto pravidlo podtrhne text prvního prvku b uvnitř každého kontejneru.

• Každý se chce změnit svět já sám. Lev Tolstoj
• Ten, kdo ví jak dělá kdo neví jak - učí ostatní. Bernard Shaw

Na snímku obrazovky je zřejmé, že jsou vybrány pouze prvky odpovídající jak selektoru tagu b, tak selektoru pseudotřídy: first-child. Styl byl použit uvnitř každého kontejneru, v tomto případě uvnitř všech položek seznamu.

Kromě značky můžete jako hlavní selektor použít jakýkoli jiný selektor CSS, například:

Třída:první dítě () :první dítě () *:první dítě ()

Časté chyby

Pseudotřída prvního potomka v CSS přísně vybírá značku, která je v nadřazeném kontejneru první. I když prvek plně odpovídá selektoru, ale není prvním potomkem, nebude vybrán.

Vezměme například předchozí seznam citací a přesuneme autory na začátek.

• Lev Tolstoj Každý se chce změnit svět ale nikdo se nechce měnit já sám.
• Bernard Shaw Ten, kdo ví jak dělá kdo neví jak - učí ostatní.

Přestože selektor prvku zůstává stejný, styl CSS se nepoužije, protože prvním prvkem v kontejneru je nyní i.

Další chybou je ignorování Toto je stejný HTML element jako ostatní. Pokud skončí v kontejneru před blokem, který hledáte, selektor prvního potomka CSS nebude fungovat.

Účtování pro typ prvku

Abyste se takovým situacím vyhnuli, můžete použít pseudotřídu prvního typu. Funguje stejně jako selektor prvního potomka CSS, ale zohledňuje typ prvku.

B:první typ (text-decoration: underline; )

Nyní se počítají pouze prvky odpovídající selektoru b.

Výběr posledního prvku

Existuje také pseudotřída last-child, která funguje podobně jako CSS first-child selector, ale začíná počítat prvky od konce kontejneru.

Vítám vás na svém blogu. Dnes bych rád napsal na téma, jak vybrat první nadřazený prvek v CSS, protože to umožňuje používat méně tříd stylů.

Pseudotřídy: prvorozené a prvotřídní, jaký je rozdíl?

Pro přístup k prvnímu prvku z nadřazeného kontejneru v CSS byly vynalezeny dvě pseudotřídy. Okamžitě navrhuji podívat se na vše na příkladu, abyste pochopili:

Řekněme, že máme následující označení. Cílem je vzít první odstavec a stylizovat jej odděleně od ostatních, aniž byste do něj přidávali třídy. To lze provést takto:

#wrapper p:první dítě( Barva: červená; )

Barva prvního odstavce se změní na červenou, můžete to zkontrolovat.

#wrapper p:first-of-type( barva: červená; )

Stane se to samé. Jaký je tedy rozdíl? A spočívá v tom, že pseudotřída prvního typu hledá a najde první prvek rodiče s ohledem na jeho typ a první dítě nehledá nic - prostě vezme první prvek rodič, který narazí, a pokud se jedná o odstavec, použije na něj styly. Pokud ne, nebude nic vybráno ani použito.

Nyní přemýšlejte: bude v tomto případě fungovat první typ? Ano, protože bere v úvahu typ prvku a vybere první odstavec, nikoli první ze všech prvků. Bude první dítě pracovat? Zkuste to. Nebude to fungovat, protože odstavec není prvním prvkem v nadřazeném prvku.

Osobně jsem hned nepochopil rozdíl mezi těmito pseudotřídami a byl jsem nějakou dobu zmatený, ale teď jsem vám to, doufám, řádně vysvětlil.

Další důležitý detail

Prvky se počítají přesně od nadřazeného prvku, takže pokud jste jej zadali takto:

Li:první typu (…)

Poté budou vybrány první položky seznamu v tagu body (tedy na celé stránce). V každém seznamu bude tedy první položka naformátována jinak.
Když to napíšeš takto:

#sidebar li:first-of-type( …)

Poté se vyberou pouze první položky seznamů v postranním panelu, tedy postranním sloupci na našem webu.

Pomocí různých selektorů, o kterých jsem psal, můžete dosáhnout téměř jakéhokoli prvku na webové stránce.

Mimochodem, zapomněl jsem zmínit opačné pseudotřídy - last-child (resp. last-of-type). Umožňují vám vybrat poslední prvek z nadřazeného kontejneru.

Kde se dá v praxi využít?

O těchto pseudotřídách mluvíme proto, že se aktivně používají při kódování pomocí css. Na své stránce máte například blok podobných příspěvků, komentářů nebo něčeho jiného. A vás napadlo nějak zvláštním způsobem navrhnout jeho první prvek. Nebo možná poslední. A obecně platí, že každý je možný.

Stačí zjistit název bloku, ve kterém je požadovaný prvek uložen. Řekněme, že máme co do činění s populárními příspěvky. Nadřazený kontejner má třídu populární. Pak píšeme takto:

Populární li:first-of-type (Padding-top: 20px; )

To je vše, první položka seznamu v něm dostala odsazení nahoře, ale do stylu si můžete přidat, co chcete.

Zde je další příklad. Mám pouze tři stejné šedé bloky ve štítku těla.
Napišme to takto:

Div:first-of-type( transform: rotation(7deg); ) div:last-of-type( transform: rotation(-7deg); )

První blok byl nakloněn doprava a poslední doleva.

A to jsou jen příklady toho, kde a jak lze naše pseudotřídy využít.

Sečteno a podtrženo

Toto je článek, který jsem dnes vymyslel. Je důležité pochopit podstatu výběru prvků a tyto techniky budete moci bez problémů používat ve své práci.

CSS (Cascading Style Sheets), neboli kaskádové styly, se používají k popisu vzhledu dokumentu napsaného ve značkovacím jazyce. Styly CSS se obvykle používají k vytváření a stylování prvků webových stránek a uživatelských rozhraní napsaných v HTML a XHTML, ale lze je také použít na jakýkoli druh dokumentu XML, včetně XML, SVG a XUL.

Kaskádové styly popisují pravidla pro formátování prvků pomocí vlastností a povolené hodnoty pro tyto vlastnosti. Pro každý prvek můžete použít omezenou sadu vlastností, ostatní vlastnosti na něj nebudou mít žádný vliv.

Deklarace stylu se skládá ze dvou částí: prvku webové stránky − volič a příkazy pro formátování - reklamní blok. Selektor říká prohlížeči, který prvek má formátovat, a deklarační blok (kód ve složených závorkách) uvádí formátovací příkazy – vlastnosti a jejich hodnoty.

Rýže. 1. Struktura deklarace stylu CSS

Typy kaskádových stylů a jejich specifika

1. Typy stylů

1.1. Externí šablona stylů

Externí šablona stylů je textový soubor s příponou .css, který obsahuje sadu stylů CSS pro prvky. Soubor je vytvořen v editoru kódu, stejně jako stránka HTML. Soubor může obsahovat pouze styly bez značek HTML. Externí šablona stylů je připojena k webové stránce pomocí značky , který se nachází uvnitř sekce . Tyto styly fungují pro všechny stránky webu.

Ke každé webové stránce můžete připojit více šablon stylů přidáním více značek za sebou , označující účel této šablony stylů v atributu media tag. rel="stylesheet" určuje typ odkazu (odkaz na šablonu stylů).

Atribut type="text/css" standard HTML5 nevyžaduje, lze jej tedy vynechat. Pokud atribut chybí, výchozí hodnota je type="text/css" .

1.2. Vnitřní styly

Vnitřní styly vložené do sekce HTML dokumentu a jsou definovány uvnitř značky. Interní styly mají přednost před externími, ale jsou horší než vložené styly (určené pomocí atributu style).

...

1.3. Vestavěné styly

Když píšeme inline styly, zapíšeme kód CSS do souboru HTML přímo do značky prvku pomocí atributu style:

Věnujte pozornost tomuto textu.

Takové styly ovlivňují pouze prvek, pro který jsou nastaveny.

1.4. @import pravidlo

@import pravidlo Umožňuje načíst externí šablony stylů. Aby direktiva @import fungovala, musí se objevit v šabloně stylů (externí nebo interní) před všemi ostatními pravidly:

Pravidlo @import se také používá k zahrnutí webových písem:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Typy selektorů

Selektory představují strukturu webové stránky. Pomáhají vytvářet pravidla pro formátování prvků webové stránky. Selektory mohou být prvky, jejich třídy a identifikátory, stejně jako pseudotřídy a pseudoprvky.

2.1. Univerzální volič

Odpovídá jakémukoli prvku HTML. Například * (margin: 0;) obnoví okraje pro všechny prvky webu. Selektor lze také použít v kombinaci s pseudotřídou nebo pseudoprvkem: *:after (CSS styly) , *:checked (CSS styly) .

2.2. Selektor prvku

Selektory prvků umožňují formátovat všechny prvky daného typu na všech stránkách webu. Například h1 (rodina písem: Humr, kurzíva;) nastaví celkový styl formátování pro všechny nadpisy h1.

2.3. Výběr třídy

Selektory tříd umožňují nastavit styly pro jeden nebo více prvků se stejným názvem třídy, které jsou umístěny na různých místech na stránce nebo na různých stránkách webu. Chcete-li například vytvořit nadpis s třídou nadpisu, musíte do úvodní značky přidat atribut třídy s nadpisem hodnoty

a nastavte styl pro zadanou třídu. Styly vytvořené pomocí třídy lze aplikovat na jiné prvky, ne nutně tohoto typu.

Pokyny pro používání osobního počítače

.headline ( text-transform: velká písmena; barva: světle modrá; )

2.4. Volič ID

Volič ID umožňuje formátování jeden konkrétní prvek. ID musí být jedinečné a může se objevit pouze jednou na jedné stránce.

#sidebar ( šířka: 300px; plovoucí: vlevo; )

2.5. Selektor potomků

Potomkové selektory aplikují styly na prvky v prvku kontejneru. Například ul li (text-transform: velká písmena;) vybere všechny prvky li, které jsou potomky všech prvků ul.

Pokud chcete formátovat potomky určitého prvku, musíte tomuto prvku přiřadit třídu stylu:

p.first a (barva: zelená;) - tento styl bude aplikován na všechny odkazy potomky odstavce s první třídou;

p .first a (barva: zelená;) – pokud přidáte mezeru, budou stylizovány odkazy umístěné uvnitř jakékoli značky .first class, která je potomkem prvku

First a (color: green;) - tento styl bude aplikován na jakýkoli odkaz umístěný uvnitř jiného prvku, označeného class.first .

2.6. Dětský volič

Podřízený prvek je přímým potomkem svého obsahujícího prvku. Jeden prvek může mít několik podřízených prvků, ale každý prvek může mít pouze jeden nadřazený prvek. Podřízený selektor umožňuje použít styly pouze v případě, že podřízený prvek následuje bezprostředně za nadřazeným prvkem a mezi nimi nejsou žádné další prvky, to znamená, že podřízený prvek není vnořen do ničeho jiného.
Například p > silný vybere všechny silné prvky, které jsou potomky prvku p.

2.7. Sestra volič

K sesterství dochází mezi prvky, které sdílejí společného rodiče. Sourozenecké selektory umožňují vybrat prvky ze skupiny prvků stejné úrovně.

h1 + p - vybere všechny první odstavce bezprostředně za libovolnou značkou

aniž by byly dotčeny zbývající odstavce;

h1 ~ p - vybere všechny odstavce, které jsou sesterské k jakémukoli nadpisu h1 a bezprostředně za ním.

2.8. Volič atributů

Selektory atributů vybírají prvky na základě názvu atributu nebo hodnoty atributu:

[attribute] - všechny prvky obsahující zadaný atribut - všechny prvky, pro které je zadán atribut alt;

selector[attribute] - prvky tohoto typu obsahující zadaný atribut, img - pouze obrázky, pro které je zadán atribut alt;

selector[attribute="value"] - prvky tohoto typu obsahující zadaný atribut s konkrétní hodnotou, img - všechny obrázky, jejichž název obsahuje slovo květina;

selector[attribute~="value"] - prvky částečně obsahující danou hodnotu, například pokud je pro prvek specifikováno několik tříd oddělených mezerou, p - odstavce, jejichž název třídy obsahuje feature ;

selector[attribute|="value"] - prvky, jejichž seznam hodnot atributů začíná zadaným slovem, p - odstavce, jejichž název třídy je feature nebo začíná feature ;

selector[attribute^="value"] - prvky, jejichž hodnota atributu začíná zadanou hodnotou, a - všechny odkazy začínající http:// ;

selector[attribute$="value"] - prvky, jejichž hodnota atributu končí zadanou hodnotou, img - všechny obrázky ve formátu png;

selector[attribute*="value"] - prvky, jejichž hodnota atributu obsahuje zadané slovo kdekoli, a - všechny odkazy, jejichž název obsahuje knihu .

2.9. Selektor pseudotřídy

Pseudotřídy jsou třídy, které ve skutečnosti nejsou připojeny ke značkám HTML. Umožňují vám aplikovat pravidla CSS na prvky, když dojde k události nebo se podřídí konkrétnímu pravidlu. Pseudotřídy charakterizují prvky s následujícími vlastnostmi:

:hover - jakýkoli prvek, nad kterým je umístěn kurzor myši;

:focus - interaktivní prvek, ke kterému bylo navigováno pomocí klávesnice nebo aktivováno pomocí myši;

:active - prvek, který byl aktivován uživatelem;

:valid - pole formuláře, jejichž obsah byl v prohlížeči zkontrolován, zda odpovídá zadanému datovému typu;

:invalid — pole formuláře, jejichž obsah neodpovídá zadanému datovému typu;

:enabled - všechna aktivní pole formuláře;

:disabled - blokovaná pole formuláře, tj. v neaktivním stavu;

:in-range - pole formuláře, jejichž hodnoty jsou v určeném rozsahu;

:out-of-range - pole formuláře, jejichž hodnoty nejsou v určeném rozsahu;

:lang() - prvky s textem v určeném jazyce;

:not(selektor) - prvky, které neobsahují zadaný selektor - třída, identifikátor, název nebo typ pole formuláře - :not() ;

:target je prvek se symbolem #, na který se v dokumentu odkazuje;

:checked — vybrané (uživatelem vybrané) prvky formuláře.

2.10. Strukturální selektor pseudotříd

Strukturální pseudotřídy vybírají podřízené prvky podle parametru uvedeného v závorkách:

:nth-child(liché) - liché podřízené prvky;

:n-té dítě(sudé) - sudé podřízené prvky;

:nth-child(3n) - každý třetí prvek mezi dětmi;

:nth-child(3n+2) - vybere každý třetí prvek, počínaje druhým potomkem (+2) ;

:nth-child(n+2) - vybere všechny prvky počínaje druhým;

:nth-child(3) - vybere třetí podřízený prvek;

:nth-last-child() - v seznamu podřízených prvků vybere prvek se zadaným umístěním, podobně jako :nth-child() , ale začíná od posledního v opačném směru;

:first-child - umožňuje stylizovat pouze úplně první podřízený prvek značky;

:last-child - umožňuje formátovat poslední podřízený prvek značky;

:only-child - vybere prvek, který je jediným podřízeným prvkem;

:empty - vybere prvky, které nemají žádné potomky;

:root - vybere prvek, který je kořenem dokumentu - prvek html.

2.11. Selektor pseudotříd strukturního typu

Označuje konkrétní typ podřízené značky:

:nth-of-type() - vybírá prvky podobné :nth-child() , ale bere v úvahu pouze typ prvku;

:first-of-type - vybere prvního potomka daného typu;

:last-of-type - vybere poslední prvek tohoto typu;

:nth-last-of-type() - vybere prvek daného typu v seznamu prvků podle zadaného umístění, počínaje od konce;

:only-of-type - vybere jediný prvek zadaného typu mezi podřízenými prvky nadřazeného prvku.

2.12. Selektor pseudoprvků

Pseudoelementy se používají k přidávání obsahu, který je generován pomocí vlastnosti content:

:first-letter - vybere první písmeno každého odstavce, platí pouze pro prvky bloku;

:first-line - vybere první řádek textu prvku, vztahuje se pouze na prvky bloku;

:before - vloží vygenerovaný obsah před prvek;

:after - přidá vygenerovaný obsah za prvek.

3. Kombinace voličů

Chcete-li přesněji vybrat prvky pro formátování, můžete použít kombinace selektorů:

img:nth-of-type(even) - vybere všechny sudé obrázky, jejichž alternativní text obsahuje slovo css .

4. Selektory seskupení

Stejný styl lze použít na více prvků současně. Chcete-li to provést, musíte na levé straně deklarace uvést požadované selektory oddělené čárkami:

H1, h2, p, span ( barva: rajče; pozadí: bílá; )

5. Dědičnost a kaskáda

Dědičnost a kaskáda jsou dva základní pojmy v CSS, které spolu úzce souvisí. Dědičnost je místo, kde prvky dědí vlastnosti od svého rodiče (prvku, který je obsahuje). Kaskáda se projevuje v tom, jak jsou na dokument aplikovány různé druhy stylů a jak se navzájem konfliktní pravidla potlačují.

5.1. Dědictví

Dědictví je mechanismus, kterým se určité vlastnosti přenášejí z předka na jeho potomky. Specifikace CSS poskytuje dědění vlastností souvisejících s textovým obsahem stránky, jako je barva, písmo, mezery mezi písmeny, výška řádku, styl seznamu, zarovnání textu, odsazení textu, transformace textu, viditelnost, bílá -mezera a mezera mezi slovy. V mnoha případech je to výhodné, protože nemusíte nastavovat velikost písma a rodinu písem pro každý prvek na webové stránce.

Vlastnosti související s formátováním bloku se nedědí. Jsou to pozadí , ohraničení , zobrazení , plovoucí a jasné , výška a šířka , okraj , min-max-výška a -šířka , obrys , přetečení , odsazení , pozice , zdobení textu , svislé zarovnání a z-index.

Nucené dědictví

Klíčové slovo inherit můžete použít k vynucení toho, aby prvek zdědil jakoukoli hodnotu vlastnosti svého nadřazeného prvku. To funguje i pro vlastnosti, které se ve výchozím nastavení nedědí.

Jak se nastavují a fungují styly CSS

1) Styly lze zdědit z nadřazeného prvku (zděděné vlastnosti nebo pomocí dědičné hodnoty);

2) Styly umístěné v tabulce stylů níže přepisují styly umístěné v tabulce výše;

3) Na jeden prvek lze použít styly z různých zdrojů. V režimu vývojáře prohlížeče můžete zkontrolovat, které styly jsou použity. Chcete-li to provést, klikněte pravým tlačítkem myši na prvek a vyberte „Zobrazit kód“ (nebo něco podobného). V pravém sloupci budou uvedeny všechny vlastnosti, které jsou nastaveny na tomto prvku nebo zděděny z nadřazeného prvku, spolu se soubory stylů, ve kterých jsou specifikovány, a pořadovým řádkem kódu.

Rýže. 2. Vývojářský režim v prohlížeči Google Chrome

4) Při definování stylu můžete použít libovolnou kombinaci selektorů - selektor prvku, pseudotřídu prvku, třídu nebo identifikátor prvku.

div (border: 1px solid #eee;) #wrap (width: 500px;).box (float: left;).clear (clear: both;)

5.2. Kaskáda

Kaskádové je mechanismus, který řídí konečný výsledek v situaci, kdy jsou na stejný prvek aplikována různá pravidla CSS. Existují tři kritéria, která určují pořadí, ve kterém jsou vlastnosti aplikovány – důležité pravidlo, specifičnost a pořadí, ve kterém jsou zahrnuty šablony stylů.

Pravidlo! důležité

Váhu pravidla lze určit pomocí klíčového slova!important, které se přidá bezprostředně za hodnotu vlastnosti, například span (váha písma: bold!important;) . Pravidlo musí být umístěno na konec deklarace před uzavírací závorku, bez mezery. Takové oznámení bude mít přednost před všemi ostatními pravidly. Toto pravidlo umožňuje zrušit hodnotu vlastnosti a nastavit novou pro prvek ze skupiny prvků v případě, že neexistuje přímý přístup k souboru stylu.

Specifičnost

Pro každé pravidlo prohlížeč vypočítá specifičnost selektoru a pokud má prvek konfliktní deklarace vlastností, vezme se v úvahu pravidlo, které má největší specifičnost. Hodnota specificity má čtyři části: 0, 0, 0, 0. Specifičnost selektoru je definována takto:

pro id se přidá 0, 1, 0, 0;
pro třídu 0 se přidává 0, 1, 0;
pro každý prvek a pseudoprvek se přidá 0, 0, 0, 1;
pro inline styl přidaný přímo k prvku - 1, 0, 0, 0 ;
Univerzální volič nemá žádné specifikum.

H1 (barva: světle modrá;) /*specifičnost 0, 0, 0, 1*/ em (barva: stříbrná;) /*specifičnost 0, 0, 0, 1*/ h1 em (barva: zlatá;) /*specifičnost: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (barva: modrá;) /*specifičnost: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (barva: šedá;) /*specifičnost 0, 0, 1, 0 */ #sidebar (barva: oranžová;) /*specifičnost 0, 1, 0, 0*/ li#sidebar (color: aqua;) /*specifičnost: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

V důsledku toho budou na prvek aplikována ta pravidla, která jsou konkrétnější. Pokud má například prvek dvě specifika s hodnotami 0, 0, 0, 2 a 0, 1, 0, 1, vyhraje druhé pravidlo.

Pořadí spojených tabulek

Můžete vytvořit více externích šablon stylů a připojit je k jedné webové stránce. Pokud jsou v různých tabulkách nalezeny různé hodnoty vlastností pro jeden prvek, v důsledku toho se na prvek použije pravidlo uvedené v níže uvedené šabloně stylů.

Dosáhli jste třetí části této kapitoly. Zde se dozvíte, jak používat selektory podřízených prvků v CSS, a také některé další pseudotřídy pro přesnější výběr.

Podřízené selektory CSS

V předchozím článku jsme hovořili o vztazích mezi prvky dokumentu HTML, včetně podřízených prvků. Podívejme se na příklad, jak lze tyto vztahy využít v CSS.

Představte si, že stačí upravit styl těchto značek

Které jsou dceřinými společnostmi aniž by to ovlivnilo ostatní

(Například,

Dceřiné společnosti