Selectorii de atribute CSS
Cu selectorii de atribute poți ținti și stiliza elemente HTML după un atribut, după o valoare de atribut sau după ambele. Ei se scriu între paranteze pătrate [].
Iată selectorii pe care îi oferă CSS:
[attribute]- Selectează elementele care au atributul[attribute="value"]- Selectează elementele al căror atribut are exact acea valoare[attribute~="value"]- Selectează elementele a căror valoare de atribut include un anumit cuvânt[attribute|="value"]- Selectează elementele a căror valoare de atribut este exact valoarea sau începe cu valoarea urmată de o cratimă (-)[attribute^="value"]- Selectează elementele a căror valoare de atribut începe cu o anumită valoare[attribute$="value"]- Selectează elementele a căror valoare de atribut se termină cu o anumită valoare[attribute*="value"]- Selectează elementele a căror valoare de atribut conține undeva o anumită valoare
Sfat: Implicit, potrivirea este sensibilă la majuscule și minuscule. Dacă adaugi un i înainte de paranteza de închidere, ca în [attribute="value" i], potrivirea nu mai ține cont de majuscule și minuscule.
Selectorul CSS [attribute]
Simpla prezență a atributului este suficientă pentru ca [attribute] să selecteze un element.
În exemplul de mai jos, selectează fiecare element <a> care are un atribut target:
Exemplu
Fiecare element <a> care are un atribut target primește un fundal galben.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS [attribute] Selector</title>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute] Selector</h2>
<p>The [attribute] selector selects all elements with the specified attribute.</p>
<p>Links with a target attribute get a yellow background:</p>
<a href="https://prompt-cookbook.com">PromptCookbook.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
<p><strong>Note:</strong> Only the links with a target attribute have a yellow background.</p>
</body>
</html>
Selectorul CSS [attribute="value"]
Cu [attribute="value"], atributul trebuie să aibă și o valoare exactă.
În exemplul de mai jos sunt selectate doar elementele <a> care au target="_blank":
Exemplu
Doar elementele <a> care au target="_blank" ajung să aibă fundalul galben.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS [attribute="value"] Selector</title>
<style>
a[target="_blank"] {
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute="value"] Selector</h2>
<p>The [attribute="value"] selector selects elements with a specific attribute and an exact value.</p>
<p>Only links with target="_blank" get a yellow background:</p>
<a href="https://prompt-cookbook.com">PromptCookbook.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
<p><strong>Note:</strong> Only the link with target="_blank" has a yellow background.</p>
</body>
</html>
Selectorul CSS [attribute~="value"]
Căutarea unui anumit cuvânt într-o valoare de atribut este scopul lui [attribute~="value"].
În exemplul de mai jos, selectează elementele al căror atribut title este o listă de cuvinte separate prin spații care include „flower”:
Exemplu
Un chenar galben marchează fiecare element al cărui atribut title conține cuvântul „flower”.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS [attribute~="value"] Selector</title>
<style>
[title~="flower"] {
border: 5px solid yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute~="value"] Selector</h2>
<p>The [attribute~="value"] selector selects elements with an attribute value containing a specific word.</p>
<img src="klematis.jpg" title="flower" width="224" height="162">
<img src="klematis2.jpg" title="summer flower" width="224" height="162">
<img src="klematis.jpg" title="flower new" width="224" height="162">
<img src="klematis2.jpg" title="my-flower" width="224" height="162">
<img src="klematis.jpg" title="flowers" width="224" height="162">
<p><strong>Note:</strong> The images with title="flower", title="summer flower", and title="flower new" get a yellow border.</p>
<p>The images with title="my-flower" and title="flowers" do <strong>not</strong> match, because "flower" is not a separate word in those values.</p>
</body>
</html>
Selectorul CSS [attribute|="value"]
Un element se potrivește cu [attribute|="value"] când valoarea atributului este egală cu valoarea specifică sau începe cu acea valoare urmată imediat de o cratimă (-).
Notă: Este necesar un cuvânt întreg, fie singur, precum top, fie urmat de o cratimă (-), precum top-text.
Exemplu
Un fundal galben se aplică elementelor a căror valoare a atributului class este exact „top” sau începe cu „top-”.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS [attribute|="value"] Selector</title>
<style>
[class|="top"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute|="value"] Selector</h2>
<p>The [attribute|="value"] selector selects elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-).</p>
<h1 class="top-header">Welcome</h1>
<p class="top">This paragraph has class="top".</p>
<p class="top-text">This paragraph has class="top-text".</p>
<p class="topcontent">This paragraph has class="topcontent".</p>
<p class="content">This paragraph has class="content".</p>
<p><strong>Note:</strong> The elements with class="top" and class="top-header" and class="top-text" get a yellow background. The value has to be a whole word, either alone or followed by a hyphen.</p>
</body>
</html>