Selektor atributů CSS

Obsah

    Zobrazit obsah

Styl prvků HTML se specifickými atributy

Je možné stylovat prvky HTML, které mají specifické atributy nebo hodnoty atributů.

Selektor CSS [atribut]

Selektor [attribute] se používá k výběru prvků se zadaným atribut.

Následující příklad vybere všechny prvky <a> s atributem target:

Příklad

a[target] {
  background-color: yellow;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute] Selector</h2>
<p>The links with a target attribute gets a yellow background:</p>

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

</body>
</html>

Selektor CSS [attribute="value"]

Selektor [attribute="value"] se používá k výběru prvků se zadaným atribut a hodnotu.

Následující příklad vybere všechny prvky <a> s atributem target="_blank":

Příklad

a[target="_blank"] { 
  background-color: yellow;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
a[target="_blank"] {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute="value"] Selector</h2>
<p>The link with target="_blank" gets a yellow background:</p>

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

</body>
</html>

Selektor CSS [attribute~="value"]

Selektor [attribute~="value"] se používá k výběru prvků s atributem hodnota 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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
[title~="flower"] {
  border: 5px solid yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute~="value"] Selector</h2>
<p>All images with the title attribute containing the word "flower" get a yellow border.</p>

<img src="klematis.jpg" title="klematis flower" width="150" height="113">
<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_tree.gif" title="tree" width="200" height="358">

</body>
</html>

Výše uvedený příklad bude odpovídat prvkům s title="flower", title="summer flower" a title="flower new", ale nikoli title="my-flower" nebo title="flowers".

Selektor CSS [attribute|="value"]

Selektor [attribute|="value"] slouží k výběru prvků se zadaným atributem, jehož hodnota může být přesně zadanou hodnotu nebo zadanou hodnotu následovanou pomlčkou (-).

Poznámka: Hodnota musí být celé slovo, buď samostatně, jako class="top", nebo po něm následuje pomlčka ( - ), např. class="top-text".

Příklad

[class|="top"] {
  background: yellow;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
[class|="top"] {
  background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute|="value"] Selector</h2>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

</body>
</html>

Selektor CSS [attribute^="value"]

Selektor [attribute^="value"] se používá k výběru prvků se zadaným atributem, jehož hodnota začíná zadanou hodnotu.

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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
  background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute^="value"] Selector</h2>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

</body>
</html>

Selektor CSS [attribute$="value"]

Selektor [attribute$="value"] se používá k výběru prvků, jejichž atribut hodnota 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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
[class$="test"] {
  background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute$="value"] Selector</h2>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>

Selektor CSS [attribute*="value"]

Selektor [attribute*="value"] se používá k výběru prvků, jejichž atribut hodnota 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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
[class*="te"] {
  background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute*="value"] Selector</h2>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>

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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}
</style>
</head>
<body>

<h2>Styling Forms</h2>

<form name="input" action="" method="get">
  Firstname:<input type="text" name="Name" value="Peter" size="20">
  Lastname:<input type="text" name="Name" value="Griffin" size="20">
  <input type="button" value="Example Button">
</form>

</body>
</html>

Tip: Další příklady stylování formulářů pomocí CSS naleznete v našem výukovém programu pro formuláře CSS.

Všechny selektory atributů CSS

[attribute]

Příklad

[target]

Příklad popisu

Vybere všechny prvky s cílovým atributem

[attribute=value]

Příklad

[target="_blank"]

Příklad popisu

Vybere všechny prvky s target="_blank"

[attribute~=value]

Příklad

[title~="flower"]

Příklad popisu

Vybere všechny prvky s atributem title, který obsahuje seznam slov oddělených mezerami, z nichž jedno je „květina“

[attribute|=value]

Příklad

[lang|="en"]

Příklad popisu

Vybere všechny prvky s hodnotou atributu lang začínající "en"

[attribute^=value]

Příklad

a[href^="https"]

Příklad popisu

Vybere všechny prvky <a> s hodnotou atributu href začínající „https“

[attribute$=value]

Příklad

a[href$=".pdf"]

Příklad popisu

Vybere všechny prvky <a> s hodnotou atributu href končící na „.pdf“

[attribute*=value]

Příklad

a[href*="w3schools"]

Příklad popisu

Vybere všechny prvky <a> s hodnotou atributu href obsahující podřetězec "w3schools"