Селектор атрибутов
В этой последней статье, посвященной селекторам CSS, мы с Вами разберем селекторы атрибутов.
Для начала мы напишем HTML код, в котором создадим одно текстовое поле и ссылку:
<html>
<head>
<title>Селекторы атрибутов</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<input type="text" name="name">
<a href="#">Ссылка</a>
</body>
</html>
Применим css стили, используя селекторы атрибутов:
input[type=text] {
width: 300px;
}
a[href] {
font-size: 23px;
}
Как видите для использования селектора атрибутов необходимо указать тег, для которого будут применяться css стили и в квадратных скобках указываем имя атрибута, которое входит в указанный нами тег. Также после атрибута, можно указывать его значения используя знак равенства (=).
В результате выполнения кода, мы получаем следующее:
Текстовое поле стало шириной в 300 пикселей, а размер текста у ссылки увеличился до 23 пикселей. Теперь вы обладаете достаточным багажом знаний о селекторах CSS, использование которых поможет Вам при создании своего сайта. На этом заканчиваем изучение селекторов, всего доброго.
