), pak se styl p:first-child již nebude zobrazovat, protože

Už to nebude první podřízená značka. V tomto případě bude prvním podřízeným prvkem h2.

Totéž se děje s pravidlem p:last-child – na značku se použije styl CSS

Až když se objeví poslední dítě svého rodiče. Přidat po

Jakákoli jiná značka jiného typu a uvidíte, že pravidlo p:last-child již nebude platit.

Pravidlo p:nth-child(3) funguje pro třetí dětská značka

(to je označeno číslem 3 v závorce). Barva písma tohoto odstavce se změní na červenou. Můžete změnit číslo 3 (například na 2) a uvidíte výsledek.

Pravidla tr:nth-child(liché) a tr:nth-child(sudé) fungují pro liché a sudé prvky tr. Výsledek můžete vidět na snímku obrazovky a také zkopírujte veškerý kód a sami experimentujte se styly.

Příklad použití: first-of-type, :last-of-type, :nth-of-type a :only-of-type

/* CSS */ p:first-of-type ( barva: fialová; text-transform: velká písmena; ) p:last-of-type ( styl písma: kurzíva; velikost písma: 0,8 em; ) p:nth- of-type(3) ( color: red; ) p:nth-of-type (liché) ( background-color: #A2DED0; ) p:nth-of-type (sudé) ( background-color: #C8F7C5; ) h3:only-of-type (text-decoration: underline; )
Snímek obrazovky: použití :first-of-type, :last-of-type, :nth-of-type a :only-of-type

První CSS pravidlo, který vidíte, je p:first-of-type . co to dělá? Vybere podřízený prvek typu p which první nalezený v rodiči. A nezáleží na tom, jaké je místo mezi prvky jiných typů. tato značka- na prvním, druhém nebo desátém. To je rozdíl mezi pseudotřídami:první dítě a:první-typu.

Druhé pravidlo - p:last-of-type - aplikuje styl na poslední na podřízený prvek typu p. Jak můžete vidět z HTML kódu, za posledním tagem

Je tam i visačka

, jehož přítomnost žádným způsobem neovlivňuje provedení pravidla CSS (na rozdíl od možnosti s:last-of-child).

Další pravidlo - p:nth-of-type(3) - změní barvu písma na červenou. Tento styl se použije na značku

Což je třetí podle prvku svého typu v nadřazeném prvku. Na snímku obrazovky můžete vidět, že na značku je použita červená barva

Což je ve skutečnosti páté dítě tagu

. Pokud ale nebereme v úvahu prvky jiných typů, ukazuje se, že tag

S červeným písmem je na třetím místě (mezi tagy svého typu). Toto pravidlo funguje takto.

Pravidla p:n-tého typu (sudá) a p:n-tého typu (lichá) fungují podobně: protože jméno p je uvedeno před dvojtečkou, jsou sudé a liché potomky typu p vybrány a vymalovány v dané barvy. Zbývající prvky jsou přeskočeny.

Poslední pravidlo – h3:only-of-type – platí pro obsah tagu

, čímž se text podtrhne. Tento styl funguje pouze díky tagu

je jediný podřízený prvek svého typu. Pokud do HTML kódu přidáte další značku

, styl nebude použit.

Závěry

Selektor potomka CSS vám umožňuje změnit styl podřízeného prvku dokumentu HTML na základě toho, kdo je jeho rodičem.

Pomocí dalších pseudotříd: first-child, :last-child, :nth-child, :only-child, můžete stylovat podřízené prvky dokumentu HTML se zaměřením na jejich umístění a číslování ve stromu prvků.

Pseudotřídy: first-of-type, :last-of-type, :nth-of-type, :only-of-type vám umožňují aplikovat styl na podřízené prvky dokumentu HTML na základě jejich typu. jako číslování ve stromu prvků .

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:

Toto je odstavec

Toto je odstavec

Toto je odstavec

Toto je odstavec

Toto je odstavec

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

Toto je odstavec

Toto je odstavec

Toto je odstavec

Toto je odstavec

Toto je odstavec

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ů představuje 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í atribut stylu:

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;) se vynuluje 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 tohoto 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 vám umožňují stylovat jeden nebo více prvků se stejným názvem třídy různá místa stránkách nebo na různé stránky místo. Chcete-li například vytvořit nadpis s třídou nadpisu, musíte přidat atribut třídy s nadpisem hodnoty v úvodní značce

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

Návod k použití osobní počítač

.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 potřebujete formátovat potomky konkrétní prvek, tomuto prvku je třeba přiřadit třídu stylu:

p.first a (barva: zelená;) — tento styl bude platit pro všechny odkazy potomky odstavce s třídou jako první;

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. Selektory sesterské prvky 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:

[atribut] - 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í daná hodnota, pokud je například prvku uvedeno 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čí specifikovaná hodnota, img - všechny obrázky ve formátu png;

selector[attribute*="value"] - prvky, jejichž hodnota atributu obsahuje kdekoli určené slovo, 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;

:zaměření — interaktivní prvek, který byl zpřístupněn pomocí klávesnice nebo aktivován 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 s zadané místo, 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 v dokumentu - html prvek.

2.11. Selektor pseudotříd strukturního typu

Označuje konkrétní typ dětská značka:

: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ů

Pseudo prvky 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, alternativní text který obsahuje slovo css.

4. Seskupení voličů

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 různé typyšablony stylů se aplikují na dokument a jak se vzájemně přepisují konfliktní pravidla.

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í

Použitím klíčové slovo dědit může donutit prvek, aby 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) Lze použít styly z jednoho prvku různé zdroje. V režimu vývojáře prohlížeče můžete zkontrolovat, které styly jsou použity. Chcete-li to provést, klikněte na prvek klikněte pravým tlačítkem myši 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 sériové číslořádky kódu.

Rýže. 2. Zapněte režim vývojáře Prohlížeč 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 jeden 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 zadat 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 jich vytvořit několik externí stoly styly a připojit je k jedné webové stránce. Pokud v různé tabulky se sejde různé významy vlastnosti jednoho prvku, v důsledku toho bude na prvek použito pravidlo v níže uvedeném seznamu stylů.

Oblíbené v kategorii:

Jak sloučit vrstvy ve Photoshopu do jedné nebo je spojit do skupiny...

číst

Přeneste kontakty do nového telefonu Android

číst

Samsung Galaxy se sám restartuje – řešení Galaxy Note...

číst

Klíčové vlastnosti Kaspersky Rescue Disk

číst