Selektory atributů CSS
Styl prvků HTML se specifickými atributy
Je možné stylovat prvky HTML, které mají specifické atributy nebo hodnoty atributů.
Selektor CSS [atribut]
Selektor se [attribute]používá k výběru prvků se zadaným atributem.
Následující příklad vybere všechny prvky <a> s atributem target:
Příklad
a[target] {
background-color: yellow;
}
Selektor CSS [attribute="value"]
Selektor se [attribute="value"]používá k výběru prvků se zadaným atributem a hodnotou.
Následující příklad vybere všechny prvky <a> s atributem target="_blank":
Příklad
a[target="_blank"] {
background-color: yellow;
}
Selektor CSS [attribute~="value"]
Selektor se [attribute~="value"]používá k výběru prvků s hodnotou atributu obsahující zadané slovo.
Následující příklad vybere všechny prvky s atributem title, který obsahuje seznam slov oddělených mezerami, z nichž jedno je „květina“:
Příklad
[title~="flower"] {
border: 5px solid yellow;
}
Výše uvedený příklad bude odpovídat prvkům title="flower", title="letní květina" a title="flower new", ale nikoli title="my-flower" nebo title="flowers".
Selektor CSS [attribute|="value"]
Selektor slouží k výběru prvků se [attribute|="value"]zadaným atributem, jehož hodnota může být přesně zadaná hodnota nebo zadaná hodnota následovaná pomlčkou (-).
Poznámka: Hodnota musí být celé slovo, buď samostatně, jako class="top", nebo následované pomlčkou ( - ), jako je class="top-text".
Příklad
[class|="top"] {
background: yellow;
}
Selektor CSS [attribute^="value"]
[attribute^="value"]Selektor slouží k výběru prvků se zadaným atributem, jehož hodnota začíná zadanou hodnotou .
Následující příklad vybere všechny prvky s hodnotou atributu třídy, která začíná „top“:
Poznámka: Hodnota nemusí být celé slovo!
Příklad
[class^="top"] {
background: yellow;
}
Selektor CSS [attribute$="value"]
Selektor se [attribute$="value"]používá k výběru prvků, jejichž hodnota atributu končí zadanou hodnotou.
Následující příklad vybere všechny prvky s hodnotou atributu třídy, která končí na „test“:
Poznámka: Hodnota nemusí být celé slovo!
Příklad
[class$="test"] {
background: yellow;
}
Selektor CSS [attribute*="value"]
Selektor se [attribute*="value"]používá k výběru prvků, jejichž hodnota atributu obsahuje zadanou hodnotu.
Následující příklad vybere všechny prvky s hodnotou atributu třídy, která obsahuje „te“:
Poznámka: Hodnota nemusí být celé slovo!
Příklad
[class*="te"] {
background: yellow;
}
Styling Forms
Selektor atributů může být užitečný pro stylování formulářů bez třídy nebo ID:
Příklad
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"]
{
width: 120px;
margin-left: 35px;
display: block;
}
Tip: Navštivte náš výukový program pro formuláře CSS, kde najdete další příklady stylování formulářů pomocí CSS.
Všechny selektory atributů CSS
| Selector | Example | Example description |
|---|---|---|
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target=_blank] | Selects all elements with target="_blank" |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" |
| [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" |
| [attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
| [attribute$=value] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |