Obecność i dokładne wartości

Lekcja 12 z 15 w kursie Selektory CSS w Coddy.

W tej lekcji poznasz selektory sprawdzające obecność atrybutu oraz jego dokładną wartość. Selektory atrybutów służą do wybierania elementów na podstawie obecności lub braku atrybutu albo jego dokładnej wartości.

Selektor obecności atrybutu:

Selektor obecności atrybutu wybiera elementy, które mają określony atrybut, niezależnie od jego wartości. Zapisuje się go, używając nawiasów kwadratowych, w których umieszcza się nazwę atrybutu.

Przykład:

/* Wybiera wszystkie elementy z atrybutem "target" */
[target] {
   color: blue;
}

Selektor dokładnej wartości:

Selektor dokładnej wartości wybiera elementy mające określony atrybut o konkretnej wartości. Zapisuje się go, używając nawiasów kwadratowych, w których po nazwie atrybutu umieszcza się znak równości i żądaną wartość.

Przykład:

/* Wybiera element z atrybutem "data-type" o wartości "important" */
[data-type="important"] {
   font-weight: bold;
}

Przykłady kodu:

HTML:

<p>This is a <span target="link">link</span> element.</p>
<p data-type="important">This is an important paragraph.</p>

CSS:

[target] {
   text-decoration: underline;
}
[data-type="important"] {
   color: red;
}

Te przykłady pokazują, jak działają selektory atrybutów CSS: wybierają elementy na podstawie obecności atrybutów lub ich dokładnych wartości, a następnie stosują do nich odpowiednie style.

Wyzwanie

Łatwy

Twoim zadaniem jest ostylowanie prostego formularza HTML przy użyciu selektorów atrybutów.

Zastosuj następujące style przy użyciu selektorów atrybutów:

Dodaj zielone obramowanie do pól wejściowych, których atrybut type ma wartość "text".
Zmień kolor tła pól wejściowych, których atrybut type ma wartość "email", na lightblue.
Ustaw czerwony kolor tekstu pól wejściowych, których atrybut type ma wartość "password".

Spróbuj swoich sił

<!DOCTYPE html>
<html>
<head>
<title>Styled Form</title>
<style>
    /* Apply styles to form fields based on attribute values */
</style>
</head>
<body>
<form>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name">
    
    <label for="email">Email:</label>
    <input type="email" name="email" id="email">
    
    <label for="password">Password:</label>
    <input type="password" name="password" id="password">
    
    <input type="submit" value="Submit">
</form>
</body>
</html>

Wszystkie lekcje w sekcji Selektory CSS

1Wprowadzenie do selektorów CSS

Cel selektorów CSS Dlaczego są ważne?

4Selektory atrybutów

Wprowadzenie do selektorów atrybutówObecność i dokładne wartościSelektory wartości atrybutu Selektory wartości atrybutu II Selektory wartości atrybutu III

2Proste selektory

Selektory typów Selektory klas Selektory ID Selektory uniwersalne

3Selektory kombinatorów

Selektor potomka bezpośredniego Selektor potomka Selektor sąsiedniego rodzeństwa Selektor ogólnego rodzeństwa

Poćwicz samodzielnie: Edytor online Web