Селектор по значению атрибута

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

Пример

Давайте обратимся к тегу input, у которого значение атрибута type равно text, и зададим ему голубой цвет фона:

<p>
	<label>Enter text</label>
	<input type="text">
</p>
<p>
	<label>Enter number</label>
	<input type="number">
</p>

input[type="text"] {
	background-color: #C2DDFD;
}

селектор атрибута,
который ищет элемент по имени атрибута
селектор атрибута,
который ищет элемент по началу значения атрибута
селектор атрибута,
который ищет элемент по концу значения атрибута
селектор атрибута,
который ищет элемент по тексту в значении атрибута
селектор атрибута,
который ищет элемент по одному из значений атрибута
селектор атрибута,
который ищет элемент по дефису в значении атрибута
Дочерний селектор,
который позволяет выбрать элементы по непосредственной вложенности
Контекстный селектор,
который позволяет выбрать элемент по его родителю
Соседний селектор,
который позволяет выбрать элемент по его соседу
Родственный селектор,
который позволяет выбрать элементы после заданного
Универсальный селектор,
который позволяет выбрать все элементы