Selectori de atribut avansați în CSS

Selectori de atribute avansați

Folosind operatori speciali, selectorii de atribute avansați compară doar o parte din valoarea unui atribut.

Selectorul CSS [attribute^="value"]

Când valoarea unui atribut începe cu o anumită valoare, [attribute^="value"] selectează acel element.

Exemplu

Aici este selectat orice element a cărui valoare a atributului class începe cu „top”.

Selectează toate elementele cu o valoare a atributului class care începe cu „top” folosind selectorul [class^="top"] și setează fundalul lor la galben. Include un h1 cu class „top”, un paragraf cu class „top-text” și un paragraf cu class „topcontent” pentru a demonstra potrivirea.

> Output: complete HTML page

Prompt

Selectează toate elementele cu o valoare a atributului class care începe cu „top” folosind selectorul [class^="top"] și setează fundalul lor la galben. Include un h1 cu class „top”, un paragraf cu class „top-text” și un paragraf cu class „topcontent” pentru a demonstra potrivirea.

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>

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

</body>
</html>

Selectorul CSS [attribute$="value"]

Ca să potrivești în schimb sfârșitul unei valori, folosește [attribute$="value"]: acesta alege elementele a căror valoare de atribut se termină cu valoarea dată.

Exemplu

Aici este selectat orice element a cărui valoare a atributului class se termină cu „test”.

Selectează toate elementele cu o valoare a atributului class care se termină cu „test” folosind selectorul [class$="test"] și setează fundalul lor la galben. Include un div cu class „first_test”, un div cu class „second”, un div cu class „my-test” și un paragraf cu class „mytest” pentru a demonstra potrivirea.

> Output: complete HTML page

Prompt

Selectează toate elementele cu o valoare a atributului class care se termină cu „test” folosind selectorul [class$="test"] și setează fundalul lor la galben. Include un div cu class „first_test”, un div cu class „second”, un div cu class „my-test” și un paragraf cu class „mytest” pentru a demonstra potrivirea.

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$="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>

Selectorul CSS [attribute*="value"]

Pentru [attribute*="value"], poziția potrivirii nu contează. Un element este selectat dacă valoarea atributului său conține valoarea dată oriunde.

Exemplu

Aici este selectat orice element care are „te” undeva în valoarea atributului class.

Selectează toate elementele cu o valoare a atributului class care conține „te” folosind selectorul [class*="te"] și setează fundalul lor la galben. Include un div cu class „first_test”, un div cu class „second”, un div cu class „my-test” și un paragraf cu class „mytest” pentru a demonstra potrivirea.

> Output: complete HTML page

Prompt

Selectează toate elementele cu o valoare a atributului class care conține „te” folosind selectorul [class*="te"] și setează fundalul lor la galben. Include un div cu class „first_test”, un div cu class „second”, un div cu class „my-test” și un paragraf cu class „mytest” pentru a demonstra potrivirea.

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*="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>

Stilizarea elementelor de formular cu selectori de atribute

Elementele de formular sunt o țintă potrivită pentru selectorii de atribute, deoarece le poți stiliza în funcție de tipul input-ului.

Exemplu

Aici, selectorii de atribute le dau inputurilor de text și inputurilor de tip buton stiluri diferite.

Stilizează elementele input dintr-un formular folosind selectori de atribute CSS bazați pe tipul input-ului. Folosește input[type="text"] pentru a seta width 150px, padding 6px, margin-bottom 10px și background-color pink. Folosește input[type="button"] pentru a seta width 100px, padding 6px și background-color lightgreen. Include un formular cu inputuri de text pentru Prenume și Nume și un buton Submit de tip „button”.

> Output: complete HTML page

Prompt

Stilizează elementele input dintr-un formular folosind selectori de atribute CSS bazați pe tipul input-ului. Folosește input[type="text"] pentru a seta width 150px, padding 6px, margin-bottom 10px și background-color pink. Folosește input[type="button"] pentru a seta width 100px, padding 6px și background-color lightgreen. Include un formular cu inputuri de text pentru Prenume și Nume și un buton Submit de tip „button”.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Form Elements With Attribute Selectors</title>
<style>
input[type="text"] {
  width: 150px;
  padding: 6px;
  margin-bottom: 10px;
  background-color: pink;
}

input[type="button"] {
  width: 100px;
  padding: 6px;
  background-color: lightgreen;
}
</style>
</head>
<body>

<h2>Styling Forms with Attribute Selectors</h2>

<form>
  <label for="fname">First Name</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last Name</label><br>
  <input type="text" id="lname" name="lname"><br>
  <input type="button" value="Submit">
</form>

</body>
</html>

Toți selectorii de atribute CSS

[attribute] — Se potrivește când atributul este prezent pe element.
[attribute=value] — Se potrivește când atributul are exact această valoare.
[attribute~=value] — Se potrivește când valoarea atributului include acest cuvânt.
[attribute|=value] — Se potrivește cu valoarea însăși sau cu valoarea urmată de o cratimă.
[attribute^=value] — Se potrivește când valoarea începe cu această valoare.
[attribute$=value] — Se potrivește când valoarea se termină cu această valoare.
[attribute*=value] — Se potrivește când valoarea include această valoare.