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

Последнее обновление: 21.04.2016

Кроме селекторов элементов мы также можем использовать селекторы их атрибутов. Например, у нас есть на веб-странице несколько полей input, а нам надо окрасить в красный цвет только текстовые поля. В этом случае мы как раз можем проверять значение атрибута type: если оно имеет значение text, то это текстовое поле, и соответственно его надо окрасить в красный цвет. Определение стиля в этом случае выглядело бы так:

input[type="text"]{
	
	border: 2px solid red;
}

После элемента в квадратных скобках идет атрибут и его значение. То есть в данном случае мы говорим, что для текстового поля надо установить границу красного цвета 2 пикселя толщиной сплошной линией.

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы атрибутов в CSS3</title>
        <style>
			input[type="text"]{
				border: 2px solid red;
			}
        </style>
    </head>
    <body>
        <p><input type="text" id="login" /></p>
		<p><input type="password" id="password" /></p>
		<input type="submit" value="Send" />
    </body>
</html>
Селекторы атрибутов в CSS3

Селекторы атрибутов можно применять не только к элементам, но и классам и идентификаторам. Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы атрибутов в CSS3</title>
        <style>
			.link[href="http://apple.com"]{
			
				color: red;
			}
        </style>
    </head>
    <body>
        <a class="link" href="http://microsoft.com">Microsoft</a> | 
		<a class="link" href="https://google.com">Google</a> | 
		<a class="link" href="http://apple.com">Apple</a>
    </body>
</html>
Селекторы атрибутов в CSS

Специальные символы позволяют конкретизировать значение атрибутов. Например символ ^ позволяет выбрать все атрибуты, которые начинаются на определенный текст. Например, нам надо выбрать все ссылки, которые используют протокол https, то есть ссылка должна начинаться на "https://". В этом случае можно применить следующий селектор:

a[href^="https://"]{
			
	color: red;
}

Если значение атрибута должно иметь в конце определенный текст, то для проверки используется символ $. Например, нам надо выбрать все изображения в формате jpg. В этом случае мы можем проверить, оканчивается ли значение атрибута src на текст ".jpg":

img[src$=".jpg"]{
			
	width: 100px;
}

И еще один символ "*" (звездочка) позволяет выбрать все элементы с атрибутами, которые в своем значении имеют определенный текст (не важно где - в начале, середине или конце):

a[href*="microsoft"]{
			
	color: red;
}

Данный атрибут выберет все ссылки, которые в своем адресе имеют текст "microsoft".

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850