Наличие и точные значения

Урок 12 из 15 курса Селекторы CSS на Coddy.

В этом уроке вы узнаете о селекторах наличия атрибута и селекторах точного значения. Селекторы атрибутов используются для выбора элементов на основе наличия или отсутствия атрибута, либо на основе точного значения атрибута.

Селектор наличия атрибута:

Селектор наличия атрибута выбирает элементы, которые имеют определенный атрибут, независимо от его значения. Он обозначается с помощью квадратных скобок, внутри которых указывается имя атрибута.

Пример:

/* Выбирает все элементы с атрибутом "target" */
[target] {
   color: blue;
}

Селектор точного значения:

Селектор точного значения выбирает элементы с определенным атрибутом и определенным значением этого атрибута. Он обозначается с помощью квадратных скобок, в которых указывается имя атрибута, за которым следует знак равенства и искомое значение.

Пример:

/* Выбирает элемент с атрибутом "data-type", имеющим значение "important" */
[data-type="important"] {
   font-weight: bold;
}

Примеры кода:

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

Эти примеры демонстрируют, как работают селекторы атрибутов CSS, выбирая элементы на основе наличия или точного значения их атрибутов и применяя к ним соответствующие стили.

Задание

Легко

Вам поручено стилизовать простую HTML-форму с помощью селекторов атрибутов.

Примените следующие стили, используя селекторы атрибутов:

Добавьте green рамку для полей ввода, у которых атрибут type имеет значение "text".
Измените цвет фона полей ввода, у которых атрибут type имеет значение "email", на lightblue.
Сделайте цвет текста полей ввода, у которых атрибут type имеет значение "password", red.

Попробуйте сами

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

Все уроки раздела Селекторы CSS

1Введение в селекторы CSS

Назначение селекторов CSS Почему они важны?

4Селекторы атрибутов

Введение в селекторы атрибутовНаличие и точные значенияСелекторы значений атрибутов Селекторы значений атрибутов II Селекторы значений атрибутов III

2Простые селекторы

Селекторы типов Селекторы классов Селекторы ID Универсальные селекторы

3Селекторы-комбинаторы

Дочерний селектор Селектор потомков Смежный селектор Общий родственный селектор