Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css » Selektory-atributov

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

Не смотря на свою гибкость и разнообразие селекторы атрибутов в CSS применяются довольно редко. Хотя их применение даёт большие возможности для веб-разработчиков. Они позволяют изменить свойства элемента с заданным атрибутом и более того с определенным значением. В зависимости от результата, который хотелось бы получить, для селекторов атрибутов применяют разный синтаксис.

Простой селектор атрибута

Применяется для установления стиля атрибута, если значение атрибута не играет никакой роли. И имеет следующий синтаксис:

[атрибут] { свойство1: значение; ... }
селектор [атрибут] { свойство1: значение; ... }

В качестве примера попробуйте например прописать в таблице стилей вот такую вот строчку:

p[align] {
    color: red; /* Цвет текста */
   }

Цвет текста поменяется лишь в том случае, когда к тегу p будет применен атрибут выравнивания текста align

Атрибут со значением

Применяется тогда, когда задан атрибут с определенным значением. Синтаксис применения следующий:

[атрибут="значение"] { свойство1: значение; ... }
селектор [атрибут="значение"] { свойство1: значение; ... }

На практике можно применить например следующее:

p[align] {
    color: red; /* Цвет текста */
   }
p[align="center"] {
    color: navy; /* Цвет текста */
   }

Значение атрибута начинается с определенного текста

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

img[src^="images/"] {
   margin:15px auto; 
   }

Синтаксис для такого способа задания стилей имеет следующий вид:

[атрибут^="значение"] { свойство1: значение; ... }
селектор [атрибут^="значение"] { свойство1: значение; ... }

Значение атрибута оканчивается определенным текстом

Применяется довольно редко. Обычно этот способ задания стилей применяют при окончании названия каких-либо ссылок или разрешения файлов. Общий синтаксис такой:

[атрибут$="значение"] { свойство1: значение; ... }
селектор [атрибут$="значение"] { свойство1: значение; ... }

Можете применить этот способ вот так:

img[src$=".png"] {/* Если разрешение файла изображения 
заканчивается на .png */
   margin:10px auto; 
   }
a[href$=".com"] { /* Если ссылка заканчивается на .com */    
    padding-right: 25px;
   }

Значение атрибута содержит указанный текст

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

[атрибут*="значение"] { свойство1: значение; ... }
селектор [атрибут*="значение"] { свойство1: значение; ... }

В качестве примера я применил стиль для изменения вида ссылок где встречается название «sdcvoy»:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8">
  <title>Селекторы атрибутов</title>
<style type="text/css">
[href*="sdcvoy"] {background:#CCC}
</style>
 </head>
 <body>
  <p><a href="/">Самостоятельное
 создание сайта</a> | 
  <a href="/htmlbook/html.php">Язык HTML</a> | 
  <a href="http://www.google.ru/">Известный поисковик</a></p>
 </body>
</html>

В результате у меня получилось следующее:

Применение селекторов атрибутов

Одно из нескольких значений атрибута

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

[атрибут~="значение"] { свойство1: значение; ... }
селектор [атрибут~="значение"] { свойство1: значение; ... }

Предлагаю посмотреть небольшой пример:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
 <head> 
  <meta http-equiv="Content-Type" content="text/html; 
charset=utf-8"> 
  <title>Блок</title> 
  <style type="text/css"> 
  h2  [class~="block"] { color: red;} 
  </style> 
 </head>  
 <body>     
   <h2 class="greb block">Заголовок красного цвета</h2>  
 </body> 
</html>

В результате должно получиться следующее:

Селектор атрибута со значением

Дефис в значении атрибута

Очень часто название значений атрибутов состоит из нескольких слов разделенных дефисом. И бывает так что первое слово в названии повторяется. Так вот для таких атрибутов можно отдельно задать стили. Делается это очень просто. Например вот так:

div[class|="block"] a {
    color:green; /* Цвет ссылок */
    padding: 15px; /* Поля */
   }

Общий синтаксис применения такой:

[атрибут|="значение"] { свойство1: значение; ... }
селектор [атрибут|="значение"] { свойство1: значение; ... }

Вы можете не запоминать применение селекторов атрибутов, так как я уже говорил раньше что их используют довольно редко, но они являются очень гибким инструментом в веб-разработке. А пока я предлагаю перейти к следующей теме.



наверх