CSS attribútumválasztó

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

Stílusos HTML-elemek meghatározott attribútumokkal

Lehetőség van olyan HTML elemek stílusozására, amelyek meghatározott attribútumokkal vagy attribútumértékekkel rendelkeznek.

CSS-választó [attribútum]

A [attribútum] választó a megadott elemek kiválasztására szolgál tulajdonság.

A következő példa az összes célattribútummal rendelkező <a> elemet kiválasztja:

Példa

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

Próbálja ki Ön is →

<!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>

CSS-választó [attribute="value"]

A [attribute="value"] választó a megadott elemek kiválasztására szolgál tulajdonság és érték.

A következő példa az összes <a> elemet kiválasztja egy target="_blank" attribútummal:

Példa

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

Próbálja ki Ön is →

<!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>

CSS-választó [attribútum~="érték"]

A [attribute~="value"] választó az attribútummal rendelkező elemek kiválasztására szolgál megadott szót tartalmazó érték.

A következő példa az összes olyan title attribútummal rendelkező elemet kiválasztja, amely szóközzel elválasztott szavakat tartalmaz, amelyek közül az egyik a "virág":

Példa

[title~="flower"] {
  border: 5px solid yellow;
}

Próbálja ki Ön is →

<!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>

A fenti példa az elemeket a title="virág", a title="nyár" kifejezésekkel fogja egyeztetni virág", és a title="virág új", de nem a title="my-flower" vagy a title="virágok".

CSS-választó [attribútum|="érték"]

A [attribute|="value"] választó a megadott attribútummal rendelkező elemek kiválasztására szolgál, amelyek értéke lehet pontosan a megadott értéket, vagy a megadott értéket egy kötőjellel (-).

Megjegyzés: Az értéknek egy egész szónak kell lennie, vagy önmagában, például class="top", vagy egy kötőjel követi ( - ), például a class="top-text".

Példa

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

Próbálja ki Ön is →

<!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>

CSS-választó [attribútum^="érték"]

A [attribute^="value"] választó A megadott attribútummal rendelkező elemek kiválasztására szolgál, amelyek értéke ezzel kezdődik a megadott értéket.

A következő példa minden olyan elemet kiválaszt, amelynek osztályattribútumértéke "top"-val kezdődik:

Megjegyzés: Az értéknek nem kell egy egész szónak lennie!

Példa

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

Próbálja ki Ön is →

<!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>

CSS-választó [attribute$="value"]

A [attribute$="value"] szelektor olyan elemek kiválasztására szolgál, amelyek attribútuma érték egy megadott értékkel végződik.

A következő példa minden olyan elemet kiválaszt, amelynek osztályattribútumértéke "teszt" szóval végződik:

Megjegyzés: Az értéknek nem kell egy egész szónak lennie!

Példa

[class$="test"] {
  background: yellow;
}

Próbálja ki Ön is →

<!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>

CSS-választó [attribútum*="érték"]

A [attribute*="value"] szelektor olyan elemek kiválasztására szolgál, amelyek attribútuma érték egy megadott értéket tartalmaz.

A következő példa minden olyan elemet kiválaszt, amelynek osztályattribútumértéke tartalmazza a "te" kifejezést:

Megjegyzés: Az értéknek nem kell egy egész szónak lennie!

Példa

[class*="te"] {
  background: yellow;
}

Próbálja ki Ön is →

<!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>

Formák stílusa

Az attribútumválasztók hasznosak lehetnek osztály vagy azonosító nélküli űrlapok stíluszásához:

Példa

input[type="text"]
{
  width: 150px;
   
display: block;
   
margin-bottom: 10px;
   
background-color: yellow;
}

input[type="button"]
{
  width: 120px;
  margin-left: 35px;
  display: block;
}

Próbálja ki Ön is →

<!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>

Tipp: Látogassa meg a CSS-űrlapok oktatóanyagát, ahol további példákat talál az űrlapok CSS-sel történő stílusozására vonatkozóan.

Minden CSS-attribútumválasztó

[attribute]

Példa

[target]

Példa leírás

Kijelöli az összes célattribútummal rendelkező elemet

[attribute=value]

Példa

[target="_blank"]

Példa leírás

Kijelöli az összes elemet a target="_blank" funkcióval

[attribute~=value]

Példa

[title~="flower"]

Példa leírás

Kijelöli az összes olyan title attribútummal rendelkező elemet, amely szóközzel elválasztott szólistát tartalmaz, amelyek közül az egyik a "virág"

[attribute|=value]

Példa

[lang|="en"]

Példa leírás

Kijelöli az összes olyan elemet, amelynek lang attribútumértéke "en"-vel kezdődik

[attribute^=value]

Példa

a[href^="https"]

Példa leírás

Kijelöli az összes <a> elemet, amelynek href attribútumértéke "https" kezdetű

[attribute$=value]

Példa

a[href$=".pdf"]

Példa leírás

Kijelöli az összes <a> elemet, amelynek href attribútumértéke ".pdf" végződik

[attribute*=value]

Példa

a[href*="w3schools"]

Példa leírás

Kijelöli az összes <a> elemet, amelynek href attribútumértéke tartalmazza a "w3schools" részkarakterláncot