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

Оцените материал
(0 голосов)

Кроме css селекторов элементов мы также можем использовать селекторы их атрибутов. Например, у нас есть на веб-странице несколько полей 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>

Просмотреть  пример

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

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

Просмотреть  пример

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

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

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

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

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

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

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

Прочитано 655 раз Последнее изменение Четверг, 30 июня 2016 15:01
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+