Speciální selektory pro atributy značek. CSS selektory – co to je, proč jsou potřeba a co to je. Hodnota atributu obsahuje zadaný text
CSS selektory- jeden z hlavních rysů jazyk CSS. Selektory umožňují přístup buď ke skupině prvků, nebo pouze k jednomu z nich.
Selektory v CSS
Selektory se používají k tomu, aby sdělily prohlížeči, které prvky má použít styly popsané ve složených závorkách.
P (styly…)
V v tomto případě Selektor je p – značka odstavce. Toto pravidlo přidá styly do všech odstavců na webové stránce.
Jaké jsou typy selektorů CSS?
Tag selector – nejjednodušší. Bylo to ukázáno na příkladu. Chcete-li to napsat v css, musíte napsat název značky bez lomených závorek. Styly budou použity na všechny prvky s touto značkou.
table() – styly pro všechny tabulky
li() – styly pro všechny položky seznamu
a() – styly pro všechny odkazy
Třída stylu– lze propojit s jakýmkoli prvkem na webové stránce stylová třída. Dokonce do jednoho písmene. Pak v souboru css můžete k tomuto prvku přistupovat tak, že pro něj zapíšete vlastní styly. Chcete-li to provést, musíte dát tečku a za ni napsat název třídy stylu. Příklady:
.about() – pravidla se budou vztahovat na všechny prvky, které mají atribut class = „about“.
.down() – pravidla budou aplikována na všechny prvky, které mají atribut class = "down".
.float() – pravidla budou platit pro všechny prvky, které mají atribut class = "float"
Jak vidíte, hlavní věcí je udělat pointu. Třída stylu může být svázána neomezený počet Prvky. Prvku lze přiřadit několik tříd.
Identifikátor– jiný typ voliče. Jeden identifikátor lze přiřadit pouze jednomu prvku. Nemůže mít dva identifikátory a id spojené s tímto prvkem nelze nikde jinde zaregistrovat.
Je to nastaveno takto:
Odstavec
To znamená, že stejně jako třída se používá pouze atribut id jakékoli slovo se používá jako jeho význam.
Chcete-li získat přístup k prvku s identifikátorem přes css, musíte napsat hodnotu id a vložit před ni hash.
#first( font-size: 22px )
Obrátili jsme se na odstavec s id = první. Styl bude aplikován pouze na něj. U zbývajících odstavců se velikost písma nezmění.
Pseudotřídy
V CSS existuje jeden zajímavý typ selektoru: pseudotřídy. Tedy třídy, které prvky mají ve výchozím nastavení a není třeba je dodatečně specifikovat. Některé z nich fungují pouze pro odkazy, zatímco některé lze použít na všechny prvky. V každém případě CSS pseudotřídy značně usnadňují práci webového vývojáře.
Pseudotřída je třída stylu prvku, který jsme ve skutečnosti sami nedefinovali, jen existuje sám o sobě. Například zobrazení tohoto kódu v html:
Odstavec
Můžete naprosto říct, že tento odstavec má speciální třídu, protože je tam napsán. Pseudotřídy se ale nemusí psát, prvky je mají standardně, a to je v tomto případě jejich výhoda. Dále se podívejme na nejoblíbenější z nich.
Pro odkazy
Pro vstupní pole a odkazy
:focus – Styl se použije na prvek, který obdrží vstupní fokus.
Ve skutečnosti existuje mnoho nových skvělých pseudotříd pro vstupní pole, ale všechny jsou nové CSS3, a v tomto článku bych rád probral jen ty nejjednodušší. V budoucnu určitě bude článek o CSS3 selektorech.
Pro všechny prvky
- :hover – styl použitý při najetí myší na prvek
- :first-child – vyberte první podřízený prvek
- :last-child – poslední podřízený prvek
- :nth-child() – V závorkách je zapsáno číslo nebo vzorec, který určuje, které prvky budou vybrány.
- :first-of-type, :last-of-type, :nth-of-type() – fungují téměř identicky jako předchozí pseudotřídy. Jediný rozdíl je v tom, že se zde bere v úvahu typ prvku. Rozdíl lze pocítit na následujícím příkladu:
li:first-child – bude vybrána první položka seznamu, ale pouze pokud je prvek li na prvním místě v nadřazeném bloku. Pokud je před ním další značka, nebude vybráno nic. - li:first-of-type – bude vybrána první položka seznamu ze všech, které jsou v nadřazeném prvku. Nezáleží na tom, kde se v kódu nacházejí. Doufám, že rozdíl je jasný.
- :nth-last-child – funguje podobně jako :nth-child, ale počítá se od poslední prvek, a ne od prvního.
- :nth-last-of-type – podobně jako :nth-last-child, ale s ohledem na typ prvku.
Nejsou to všechny pseudotřídy, ale ty nejoblíbenější a nejpotřebnější. Ve skutečnosti jsou všechny pseudotřídy v css označeny stejným způsobem, oddělené dvojtečkou. Navíc můžete kombinovat selektory a získat zajímavé příležitosti:
a:visited:active – styly pro již navštívený odkaz, na který se klikne.
div:first-child:hover – styly pro všechny první bloky v jejich rodičích, nad kterými se umístí kurzor.
Jak vidíte, takové selektory dávají skvělé příležitosti co se stylových prvků týče. Použijte je a snadno se dostanete k jakýmkoli prvkům.
Kombinace voličů
Další důležité pravidlo, o kterých musíte vědět. Selektory tříd stylu lze zapsat bez jejich vzájemného oddělení. Například:
.class1.class2 – vybere prvky, které mají obě tyto třídy.
.class1.class3.class8 – vybere prvky, ke kterým jsou připojeny všechny tři třídy stylu.
Vnořené selektory
Pokud oddělíme selektory od sebe mezerami, dostaneme se k prvku, který potřebujeme. Příklady:
table td – vybere všechny buňky v tabulkách
ul li a – vybere všechny odkazy umístěné v položkách seznamu (a položky seznamu naopak leží v samotných seznamech)
.class1 p – vybere všechny odstavce s atributem class = “class1”
.class2 p span – vybere veškerý obsah tagů obsažený v odstavcích s třídou class2.
Takto můžete hnízdit a kombinovat, kolikrát chcete. Příklady:
#header .logo span:first-letter()– vybere první písmeno v rozpětí loga, které se nachází v záhlaví
.class1.class2:hover() – bude definovat styl přechodu pro prvky, které mají obě třídy stylu.
Dětské voliče
Pokud potřebujete stylovat rodičovské prvky, které jsou PŘÍMO dceřiné společnosti, pak to musíte napsat takto:
ul > li() – vybere položky seznamu, které jsou v něm přímo vnořeny a nenacházejí se v jiných značkách
p > a() – vybere pouze ty odkazy v odstavcích, které leží přímo v nich a nejsou vnořené do jiných značek (které jsou naopak již vnořeny do odstavců)
Příklad:
Pokud napíšete selektor jako tento p > a , použijí se styly na odkaz ve výše uvedeném příkladu? Ne, protože je stále vnořen do jiného tagu, to znamená, že není přímým potomkem.
Sousední voliče
Poslední věc, na kterou se dnes podíváme. Pokud to napíšete v css takto:
.class1 + .class4() , pak tento selektor vybere prvek s atributem class = "class4" , přičemž tento prvek se musí objevit v HTML kódu hned za prvkem s třídou class1. Pouze v tomto případě bude vše fungovat. Podívejme se znovu na příklad:
Bude výše uvedený selektor (.class1 + .class4()) fungovat? Ne, protože prvky nejsou vedle sebe. Mezi nimi je img tag. Pokud jej odstraníte, vše bude fungovat.
Podívali jsme se tedy na ty nejzákladnější a nejjednodušší selektory. Určitě vám tyto znalosti budou stačit na vyřešení 95 % problémů. V příštím článku popíšu některé konkrétnější selektory CSS.
Voliče atributů
Umožňuje vybrat konkrétní prvky bez přiřazení třídy stylu nebo identifikátoru.
Selektory atributů jsou ty selektory, ve kterých je atribut nebo atribut s hodnotou zapsán v hranatých závorkách. Několik příkladů, aby bylo jasno:
* – vybere všechny prvky, které mají atribut href s libovolnou hodnotou.
input – vybere všechny vstupní prvky, které mají atribut zakázat (všechna vypnutá pole).
input – vybere všechna pole typu password , tedy pole pro zadání hesla.
img – vybere obrázek, který má zadané atribut src= "/logo.png" .
Jak vidíte, psaní selektorů atributů CSS není tak obtížné. Jejich nejdůležitějším rozdílem jsou hranaté závorky, ve kterých je buď jednoduchý atribut, nebo atribut s jeho přesná hodnota. Tím ale funkčnost těchto selektorů nekončí.
Pokročilé selektory css atributů
Všechny následující selektory rozlišují velká a malá písmena.
Hledejte na začátku řádku
div – vybere všechny divy, které mají třídu stylu začínající na „blok“ . Budou tedy vybrány například tyto bloky: "block-head", "block-3", "blocknote" . Hlavní je, že na začátku významu je klíčové slovo.
Nález na konci řádku
a – vybere všechny odkazy, jejichž adresa končí na .rar . Pokud si tedy můžete něco stáhnout na svůj web, můžete přidat ikonu vedle všech odkazů na archivované soubory.
Hledání podřetězce všude v hodnotě
span – vybere vše span tagy, ve kterém název třídy obsahuje kdekoli v názvu slovo „art“. Vyberou se tedy například rozpětí s následujícími třídami: party, clart, art-1.
Hledejte předpony
p – vybere odstavce s třídou stylu, které mají název, který se buď přesně shoduje s výrazem „first“, nebo který obsahuje předponu first-, která začíná názvem třídy.
Hledání slov ve smyslu
vstup– vybere vše vstupní prvky, ve kterém hodnota atributu identifier obsahuje slovo text . Od hledání podřetězce všude se liší tím, že musí být zahrnuto slovo, nikoli podřetězec.
Poslední dvě možnosti se používají zřídka a je nepravděpodobné, že pro vás budou užitečné často, ale pro obecný vývoj stále o nich můžete vědět.
K čemu jsou užitečné selektory atributů?
Pomocí takových selektorů můžete vybrat mnoho prvků HTML, aniž byste jim dávali třídy stylu. V některých případech můžete pomocí této metody zkrátit kód a zjednodušit si práci. Například výše jsem uvedl příklad s ikonou pro archivy. Zde se objevil další nápad. Například na svém webu často odkazujete na jeden jiný zdroj (řekněme Wikipedii) a chcete vedle odkazů na Wikipedii zobrazit speciální ikonu, kterou by jiné odkazy mít neměly.
Můžete to implementovat takto:
A (pravidla css)
Ve skutečnosti existuje mnohem více způsobů, jak použít selektory atributů. Dokážou do jisté míry zjednodušit práci tam, kde je potřeba. Chcete-li se dozvědět více o vývoji webu, použijte css a přihlaste se k odběru blogu.
Css3 selektory a pseudo třídy
O nových selektorech css3, o kterých jsem nepsal v předchozích článcích.
Vylepšená práce s formuláři
To jsou nové pseudotřídy. V podstatě všechny se týkají nových možností forem.
:enabled – pseudotřída vybere všechna aktivní pole. Tedy takové, do kterých se dá něco napsat nebo jsou alespoň čtivé.
:disabled je opačná pseudotřída, vybere všechna zakázaná pole. V souladu s tím můžete s jeho pomocí do těchto polí přidat další styly.
:pouze pro čtení – vybrat vše vstup, které jsou pouze pro čtení.
:čtení-zápis – vybere všechna pole, která lze upravovat.
Přidávání stylů s ohledem na platnost
Velmi zajímavé jsou i pseudotřídy, kterým můžete přiřazovat styly v závislosti na platnosti či neplatnosti zadané hodnoty. Dříve to šlo udělat pouze s pomocí JavaScriptu.
:valid – vybere všechna pole, ve kterých zadaná hodnota vyhovuje požadavkům. Samotné požadavky jsou obvykle specifikovány pomocí atributu pattern. Může také záviset na typu pole. Například pole, do kterého se zapisuje adresa E-mailem, bude považován za neplatný, pokud v zadané hodnotě nebude @.
:invalid – podle toho vybere všechna neplatná pole, ve kterých hodnota neodpovídá očekávané hodnotě. Můžete například změnit barvu textu v polích, jako je tato:
Vstup: neplatný ( barva: červená; )
Teď když napíšeme nesprávné hodnoty v polích se text zbarví červeně. Podle toho můžete také použít obrázky zaškrtnutí a křížku, abyste uživateli ukázali, zda vše vyplnil správně.
Styly pro povinná pole
Rád bych také poznamenal, že pro povinná pole se objevila odpovídající pseudotřída.
:required – vybere prvky, které mají tento atribut. To znamená, že všechna pole musí být vyplněna.
:optional – protější třída vybere pole, která jsou volitelná.
Pseudotřída:ne
:not je druh antiselektoru, který umožňuje určit, které prvky NEPOUŽÍVAT styly. Pár příkladů.
a:not(:last-child)() – vybere všechny odkazy na stránce kromě posledního.
.nav:not(li)() – vybere všechny prvky s třídou nav, ale neměly by to být položky seznamu (li).
#article p:not(.special:first-child) – vybere všechny odstavce v bloku článku kromě prvního odstavce se speciální třídou.
Jak vidíte, u pseudotřídy je v závorkách napsána podmínka: co přesně je třeba z výběru vyloučit. Do podmínky můžete také napsat kombinační selektory, takže můžete vybrat a vyloučit cokoli chcete.
To je ta pseudotřída, která je někdy potřeba, je potřeba nejen teoreticky, ale i prakticky. Ach ano, můžete také pokračovat ve skládání selektoru po :not(). Například:
div:not(#header) .wrap – vybere všechny divy s třídou wrap, kromě div s id="header"
Byly to selektory, které byly zavedeny v CSS3.
Priorita selektorů CSS
Chcete-li určit, které styly mají přednost, použijte tato jednoduchá pravidla:
ID je volič s nejvyšší prioritou. Pokud má prvek třídu stylu a id a obě jsou přiřazeny identické vlastnosti S různé významy, pak budou provedeny styly, které jsou zapsány pro identifikátor.
Třída má selektor s vyšší prioritou než selektor tagu (p, tabulka, ul). Pseudo třída má stejnou váhu jako jednoduchá třída. p:first-line má přednost před .firstline, protože druhý selektor je pouze třída, zatímco první je selektor tagů + pseudotřída.
Další užitečné pravidlo— čím konkrétnější je selektor, tím větší prioritu pro něj mají styly. Například mezi body a p odstavec vyhrává bitvu, protože je specifičtějším selektorem než tělo (protože jde o celou stránku, takže není příliš konkrétní). A tabulka p je zase specifičtější než jen p . Obecně platí, že si uvědomte tato pravidla.
Sečteno a podtrženo
Tento článek pokryl téměř všechny selektory CSS. Rád bych také dodal, že pokud používáte jQuery, pak má své vlastní selektory, i když jsou těmto velmi podobné, ale existují drobné rozdíly.
Pseudoprvky umožňují stylizovat určité části dokumentu. Například pseudo-element::first-line je určen k přidání stylů pouze do prvního řádku zadaného prvku. Ve specifikaci CSS3 začínají pseudoprvky dvojtečkou - "::":
P::první-písmeno (velikost písma: 120%; )
Dvojtečka byla zavedena v CSS3, aby vizuálně odlišila pseudotřídy od pseudoprvků. Pseudoprvky, které byly přidány do CSS2 (jako první písmeno, první řádek, před a za), však lze zapsat jednou dvojtečkou, tato syntaxe byla používána před specifikací CSS3 a je podporována všemi prohlížeči. Syntaxe dvojtečky je podporována pouze v novějších prohlížečích a povinné by se mělo vztahovat pouze na pseudoelement ::selection, který byl přidán do CSS3.
Poznámka: Každý selektor může obsahovat pouze jeden pseudoelement, který musí být definován na samém konci selektoru: #header .menu span::first-letter ( color: green; )
Pseudoprvek::první písmeno
Pseudoprvek ::first-letter umožňuje použít styl na první písmeno v textu rodičovský prvek. Například, abychom stylizovali první písmeno v odstavci, museli bychom ho uzavřít do prvku a aplikujte na něj styl:
N váš text
Snaž se "
Nebo můžeme první písmeno v textu stylizovat pomocí pseudoprvku ::first-letter, v takovém případě nebudeme muset přidávat extra prvek v značce HTML:
Náš text
Snaž se "
Pseudoprvek::první řádek
Pseudoprvek::first-line aplikuje styl na první řádek textu v prvku:
P ( šířka: 200px; ) p::první řádek ( barva: modrá; ) Zkuste »
Zvláštností pseudoprvku ::first-line je, že bude stylizovat pouze první řádek, jehož šířka bude záviset na šířce prvku, tedy na menších obrazovkách nebo při zmenšení okna prohlížeče šířka prvního řádku se změní, ale jeho design zůstane nezměněn.
Pseudoprvky::před a::po
Pseudoprvky ::before a ::after se používají k přidání generovaného obsahu do dokumentu. S jejich pomocí můžete vygenerovaný obsah umístit před a za obsah zadaný prvek. Chcete-li určit obsah, který bude přidán, použijte Vlastnost CSS obsah.
Řekněme, že máme text, který je objemově poměrně velký, obsahuje odkazy, ale designem se prakticky nijak neliší od zbytku textu. A před každý odkaz musíme umístit malou ikonu, která bude uživatelům indikovat, že se jedná o odkaz:
A ( text-decoration: none; color: black; ) a::before ( content: url("link.png"); ) Zkuste »
Voliče atributů
Selektory atributů jsou podporovány všemi moderními prohlížeči (výjimkou je IE6, i když již není klasifikován jako moderní prohlížeče, stojí za zvážení fakt, že jej někteří uživatelé stále používají. Pokud tedy potřebujete napsat kód, který funguje stejně dobře ve všech prohlížečích, včetně IE6, pak vám doporučujeme zdržet se používání selektorů atributů).
Selektory atributů umožňují vybrat konkrétní prvek bez použití identifikátoru nebo třídy. Pro přístup k prvku stačí vědět, zda obsahuje požadovaný prvek specifický atribut:
Img (ohraničení: 1px plná červená; )
Ve výše uvedeném příkladu bude pravidlo platit pro všechny prvky mít atribut alt. Ale kromě jednoduchého výběru prvků podle atributů vám selektory atributů umožňují vybrat prvky na základě hodnoty atributu:
- prvek[attribute^="value"] ^= znamená "začíná...".
- element[attribute$="value"]- selektor atributů se shodou podřetězců. Operátor $= znamená "končí...".
- element[attribute*="value"]- selektor atributů se shodou podřetězců. Operátor *= znamená "obsahuje podřetězec...".
Jako příklad se podívejme na design odkazů odkazujících na externí zdroj, emailová adresa a soubor s příponou .pdf:
A ( padding-left: 20px; background-image: url("img1.png"); background-repeat: no-repeat; ) a ( padding-left: 20px; background-image: url("img2.png") ; opakování pozadí: neopakování; ) a ( padding-left: 20px; obrázek pozadí: url("img3.png"); opakování pozadí: no-repeat; ) Zkuste »
V situacích, jako jsou tyto, je užitečné použít selektory atributů k vytvoření atraktivních doplňků designu vašich webových stránek.
CSS je mocný nástroj pro vývoj webu. Umožňuje nám přivést téměř všechny naše nápady a nápady k životu.
Důležité výhoda CSS- to je schopnost aplikovat styly na všechny podobné prvky stránky. Chcete-li tuto funkci efektivně používat, musíte jí dobře rozumět CSS selektory. Selektor je přesně to, na co se pravidlo vztahuje. 
Existuje několik typů selektorů CSS. Pojďme se podívat na tyto typy a příklady jejich použití.
Univerzální volič
Univerzální selektor určuje styl všech prvků dokumentu. Označeno hvězdičkou (*). Toto například určuje, že všechny prvky budou červené:
* (červená barva;)
Selektory prvků
Při psaní stylů pro HTML dokument, pak jsou prvky HTML tagy(h1, p, img, a, tělo...). Například:
H1 ( font-family:Verdana; font-size:12px; color:#666; )
V tomto případě budou všechny nadpisy první úrovně v dokumentu ve fontu Verdana, velikosti 12 pixelů a šedé barvě.
Selektory tříd
Tento selektor umožňuje přiřadit styl bez ohledu na typ prvku. Aby však fungovaly, musíte do kódu HTML přidat nějaké poznámky, konkrétně atribut class s nějakou hodnotou, kterou použijete, když vytváření CSS pravidla.
Řekněme, že potřebujete zarámovat nějaké obrázky na stránku. Tyto obrázky mají atribut třídy. Například:
A do souboru stylu zapíšeme pravidlo:
Border_img (border:1px plný #00f;)
Tuto třídu lze použít na mnoho prvků stránky a ne nutně pouze na obrázky. Do jednoho HTML prvek Můžete použít několik tříd najednou, které jsou odděleny mezerou:
selektory ID
Umožňuje také přiřadit styl bez ohledu na typ prvku. Ale na rozdíl od selektoru třídy jej lze v dokumentu použít pouze jednou. Označeno symbolem hash (#). Značka má atribut id. Například:
#menu ( width:25%; background-color:#ccc; float:left; )
Voliče atributů
Používá se k výběru prvků na základě jejich atributů a také hodnot těchto atributů.
Chcete-li vybrat prvek podle jeho atributu, bez ohledu na hodnotu tohoto atributu, použijte následující konstrukci: [attribute] . Potřebovali jsme například označit obrázky červeným rámečkem, které mají nastaven atribut alt. Děláme toto:
img (ohraničení: 1px plná červená;)
Můžete vybrat pouze značky, jejichž atributy mají konkrétní význam. Je nutné např. u všech značek s atribut typu, jehož hodnota je text , použijte pravidlo - velikost textu je 16 pixelů. To se provádí následovně:
(velikost písma: 16px;)
Pokud potřebujete vybrat prvky, jejichž atribut class obsahuje slovo img , použijte následující kód:
(okraj: 5px ;)
Pokud potřebujete vybrat atribut, jehož hodnota začíná nějakým textem:
(barva:#009);
Pokud potřebujete vybrat atribut, jehož hodnota končí nějakým textem:
(velikost písma: 10px;)
Pokud potřebujete vybrat atribut, jehož hodnota obsahuje nějaký text:
(barva pozadí:#0cc;)
Selektory potomků (kontextové selektory)
Selektory potomci znamenají nastavení pravidel pro ty prvky, které jsou uvnitř určitého prvku. Na příkladu to bude jasnější. Řekněme, že potřebujete červeně zvýraznit pouze odkazy a, které jsou uvnitř odstavce p a jsou jeho potomky:
p>a (barva:červená;)Selektory sourozeneckých prvků
Chcete-li vybrat sousední prvky umístěné na stejné úrovni a mající stejného rodiče, postupujte takto:
Pro výběr Prvky, nachází se na jedné úrovni to děláme s jedním rodičem.
silné + em (styl písma:kurzíva;)Sousedé v tomto případě jsou značky silné a em , stejně jako em a a .
Selektory pseudotříd
Pseudotřída je fiktivní třída, jejíž přítomnost závisí na stavu prvku nebo struktuře dokumentu jako celku. Pseudotřídy se často používají v prvcích vstupního formuláře nebo k definování chování odkazů nebo aktivních prvků.
Například potřebujete změnit barvu navštívených odkazů:
A:navštíveno (barva:#933;)
Nebo například změňte barvu textu, když je kurzor (umístěn kurzor) na textové pole formuláře:
Vstup: zaostření (barva: červená;)
Pseudovoliče prvků
Pseudoprvky jsou podmíněné fiktivní prvky, které jsou součástí existujících prvků nebo jsou do dokumentu přidány dodatečně. Selektor pseudoprvků a selektor pseudotříd jsou z hlediska syntaxe v podstatě totéž. Jediný rozdíl je ve vybraných prvcích.
CSS2 definuje 4 pseudoprvky: první písmeno (:first-letter), první řádek (:first-line) a použití speciálních stylů před (:before) a za (:after) prvku.
Nastavíme například první písmeno každého odstavce tak, aby mělo svůj vlastní styl:
P:first-letter ( font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #333; )
Pomocí selektorů můžete poměrně snadno vytvořit pravidla CSS, na která se vztahují velký počet podobné prvky.
Nastaví styl prvku, pokud je zadán konkrétní atribut. Jeho význam v tomto případě není důležitý.
Syntax
[<атрибут>] (Popis pravidel stylu) E[<атрибут>] (Popis pravidel stylu)
Styl je aplikován na ty prvky, ve kterých je zadaný atribut. Mezera mezi názvem voliče a hranaté závorky nepovoleno.
Označení
| Popis | Příklad | |
|---|---|---|
| <тип> | Označuje typ hodnoty. | <размер> |
| A && B | Hodnoty musí být uvedeny 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čet |
| Hodnoty skupin. | [ plodina || přejít ] | |
| * | 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. | <время># |
Příklad
Pokračujeme slavným Murphyho zákonem, který říká: Pokud mohou nastat potíže, určitě k nim dojde.
, můžeme představit naše pozorování: Poté, co se webová stránka zobrazí správně v jednom prohlížeči, ukáže se, že se nezobrazuje správně v jiném
.
Výsledek příkladu je na Obr. 1.
Rýže. 1. Změna stylu prvku v závislosti na použití atributu title
V v tomto příkladu Barva textu uvnitř kontejneru se změní , když se k tomu přidá atribut názvu. Všimněte si, že není potřeba opakovat vlastnosti stylu pro q selektor, protože jsou zděděny z q selektoru.
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.
Zdravím vás, milí čtenáři. V předchozích článcích jsme studovali především atributy stylů CSS. Je jich hodně. Někteří nastavují parametry písma, jiní parametry pozadí a další parametry pro odsazení a rámečky.
V tomto článku budeme hovořit o selektorech stylů. V jednom z článků, kterých jsme se již dotkli. Dnes se podíváme na několik dalších typů selektorů, které explicitně nevážou pravidlo stylu k prvku webové stránky. Jedná se o tzv. speciální selektory. Existuje jich několik druhů.
Kombinátory v CSS (sousední, podřízené a kontextové selektory)
Kombinátory jsou typem selektorů CSS, které vážou pravidlo stylu k prvku webové stránky na základě jeho umístění vzhledem k ostatním prvkům.
První symbol kombinátoru Plus(+) popř sousední volič. Plus se nastavuje mezi dvěma voliči:
<селектор 1> + <селектор 2> { <стиль> }
Styl je v tomto případě aplikován na volič 2, ale pouze pokud sousedí s volič 1 a přijde hned po něm. Podívejme se na příklad:
silný + já (
}
...
Tento prostý text. Tento miniatura, prostý text, červený text
Toto je normální text. Toto je tučný text, prostý text, a to je normální text.
Výsledek:
Styl popsaný v příkladu bude aplikován pouze na první text uzavřený ve značce , protože přichází hned za značkou .
Kombinátor vlnovka(~) platí i pro sousední voliče, ale tentokrát mezi nimi mohou být další prvky. V tomto případě musí být oba selektory vnořeny do stejné nadřazené značky:
<селектор 1> ~ <селектор 2> { <стиль> }
Styl bude použit volič 2 který by měl následovat volič 1. Zvažte příklad:
silný~i(
červená barva; /* Červená barva textu */
}
...
Toto je normální text. Toto je tučný text, prostý text, červený text aplikovalo se na něj sousední pravidlo výběru.
Toto je normální text. Toto je tučný text, prostý text, a toto je červený text.
Výsledek:
Jak vidíte, pravidlo stylu tentokrát fungovalo pro oba texty uzavřené ve značce , a to přesto, že v druhém případě mezi tag A stojí za značku .
Kombinátor > odkazuje na dětské voliče. Umožňuje vám svázat styl CSS s prvkem webové stránky, který je přímo vnořen do jiného prvku:
<селектор 1> > <селектор 2> { <стиль> }
Styl bude vázán na volič 2, který je přímo vnořen volič 1.
div > silný (
}
...
Toto je normální text. A toto je běžný tučný text.
A výsledek:
Jak můžete vidět na obrázku, pravidlo stylu ovlivnilo pouze první značku
, který je přímo vnořen do značky
, tak se na něj pravidlo nevztahuje. Dále se podíváme kontextový selektor<пробел>
. Umožňuje vám svázat styl CSS s prvkem vnořeným do jiného prvku a může existovat jakákoli úroveň vnoření: <селектор 1> <селектор 2> { <стиль> } Styl bude použit volič 2, pokud je nějak vnořen volič 1. Uvažujme předchozí příklad, pouze pokud Popis CSS pravidla používají kontextový selektor: div silný( Toto je normální text. A to je také kurzívou tučný text. Prostý text a jen tučný text Výsledek: Jak vidíte, tentokrát pravidlo ovlivnilo oba tagy
, dokonce i ten, který je vnořený do kontejneru
. Označit
, který je jednoduše vnořen do odstavce
css pravidlo vůbec nefunguje. Selektory atributů jsou speciální selektory, které vážou styl k prvku na základě toho, zda obsahuje určitý atribut nebo má určitou hodnotu. Existuje několik možností pro použití takových selektorů. Vypadá jako: <селектор>[<имя атрибута тега>] { <стиль> } A sváže styl s těmi prvky, do kterých je přidán zadaný atribut. Například: silný( Automobil jedná se o mechanický motor bez kolejí vozidlo">silniční vozidlo s minimálně 4 koly. Výsledek: Na obrázku vidíte, že na prvek je aplikováno pravidlo css (červená barva textu). silný, ke kterému je atribut přidán titul. Syntaxe tohoto selektoru je následující: <селектор>[<имя атрибута тега>=<значение>] { <стиль> } Váže styl na prvky, jejichž tagy mají atribut se zadaným název A význam. Příklad: A( Výsledek: Jak vidíte, oba prvky typu hypertextový odkaz mají atribut cílová, ale na značku se použije pravidlo css, které zvětší text odkazu jedenapůlkrát a změní jeho barvu na červenou
jehož atribut cílová má význam "_prázdný". Některé hodnoty atributů mohou být odděleny mezerami, například názvy tříd. Chcete-li nastavit pravidlo stylu, když je požadovaná hodnota přítomna v seznamu hodnot atributů, použijte následující selektor: [<имя атрибута тега>~=<значение>] { <стиль> } Styl se použije, pokud má atribut požadovanou hodnotu nebo je součástí seznamu hodnot oddělených mezerami. Například: { Náš telefon: 777-77-77 Naše adresa: Moskva st. Sovětská 5 Získáte následující výsledek: Pravidlo se vztahuje na prvek, jehož hodnoty atributů zahrnují: třída existuje smysl tel. Pomlčka je povolena v hodnotách identifikátoru a třídy. Chcete-li svázat styl s prvky, jejichž hodnoty atributů mohou obsahovat pomlčku, můžete použít následující konstrukci: [attribute|="value"] ( styl ) Styl se použije na ty prvky, jejichž hodnota atributu začíná zadanou hodnotou, za kterou následuje pomlčka. Například: { Výsledek: V tomto příkladu se pravidlo stylu vztahuje pouze na ty prvky seznamu, jejichž název třídy začíná hodnotou "Jídelní lístek- ". Tento selektor nastavuje styl prvku, pokud hodnota atributu tagu začíná určitou hodnotu. Mohou existovat dvě možnosti: [<имя атрибута тега>^=<подстрока>] { <стиль> } V prvním případě styl platí pro všechny prvky, jejichž tagy mají atribut se zadaným název a hodnotu začínající zadanou hodnotou podřetězce. V druhém případě to samé, jen určité prvky specifikováno v hlavní volič. Příklad: A( Výsledek: Příklad ukazuje, jak odlišně zobrazit externí odkazy a interní odkazy. externí odkazy vždy začínat řádkem „http://“. Proto v selektoru označujeme, že styl bude aplikován pouze na odkazy, které mají atribut href začíná významem http://. Připojí styl k prvkům, jejichž hodnota atributu končí zadaným textem. Má následující syntaxi: [<имя атрибута тега>$=<подстрока>] { <стиль> } V prvním případě styl platí pro všechny prvky, které mají atribut se zadaným název a má význam končící na zadané podřetězec. V druhém případě to samé, jen k naznačenému selektory. Tímto způsobem můžete například zobrazit různé formáty grafické obrázky. Například: IMG ( Obrázek GIF Formát obrázku png Výsledek: V příkladu jsou všechny obrázky z přípona gif se zobrazí s červeným okrajem o tloušťce pět pixelů. Tento selektor sváže styl se značkami, jejichž hodnota atributu obsahuje konkrétní text. Syntax: [<имя атрибута тега>*=<подстрока>] { <стиль> } Styl se váže na prvky, které mají atribut S zadané jméno a jeho hodnota obsahuje zadané podřetězec. Například: IMG ( Obrázek ze složky galerie Obrázek z jiné složky Výsledek: V příkladu je styl použit na obrázky, které se načítají ze složky "galerie". To je vše o selektorech atributů. Všechny výše uvedené metody lze vzájemně kombinovat: Selector[attribute1="value1"][attribute2="value2"] ( styl ) Kromě toho mi dovolte připomenout speciální selektory CSS: V budoucích článcích se také podíváme na pseudoprvky a pseudotřídy, které poskytují Výkonný nástroj styl managementu. To je vše, uvidíme se znovu.
styl písma: kurzíva /* kurzíva */
}
...
Selektory podle atributů tagů
1. Jednoduchý selektor atributů
červená barva;
}
...
2. Volič atributů s hodnotou
červená barva;
font-size:150%;
}
...
.ru" target="_blank">Odkaz v novém okně
3. Jedna z několika hodnot atributu
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }
červená barva;
font-size:150%;
}
...
4. Pomlčka v hodnotě atributu
Selektor[attribute|="value"] ( styl )
červená barva;
font-size:150%;
}
...
5. Hodnota atributu začíná konkrétním textem
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }
barva:zelená;
váha-fontu:tučné;
}
...
6. Hodnota atributu končí určitým textem
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }
ohraničení: 5px plná červená;
}
...
7. Hodnota atributu obsahuje zadaný řetězec
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }
ohraničení: 5px plná červená;
}
...
