Пятница, 26 Апреля 2013 11:03

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

Written by 
Оцени эту запись
(2 Голоса)

Добрый день, мои уважаемые читатели! В последнее время я редко пишу какие-то полезности. Главная причина в том, что обо многом уже написано и темы исчерпываются. Потому, в первую очередь прошу прощения за длительные проблемы с добавлением комментариев на сайте. Я исправила эту ошибку, теперь комментарии должна работать лучше и в них появились смайлы))) Жаль только, что прежние теперь пропали(( Также хочу сказать, что буду рада, если вы будете подкидывать мне идеи для новых статей - что желаете узнать или что обсудить. И делать можно это в тех же комментариях)

А теперь перейдем к основной теме - селекторы атрибутов.

 

Селекторы атрибутовЛично я больше всего использую селекторы атрибутов при работе в инпутами:

 

 

 

input [type = "text"] {

...

}

 

Но я считаю, что знать все возможности селекторов атрибутов, как минимум, полезно) К тому, это даст вам возможность более гибко работать с элементами при помощи одного только CSS.

 

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

 

 

h1[title] { color: red } 

 

 

Обращается ко всем элементам h1, у который есть атрибут title с любым значением.

 

 

div[class="black"] { background: black; }

 

 

Находит все элементы div, у которых есть атрибут class со значением black и задает им фоновый цвет.

 

 

div[class~="block"] {border: 1px solid red;}

 

 

Работает для элементов, у которых в значении атрибута class присутствует block. 

 

 

Пример:

 

div[class~="block"] { border: 1px solid red;}

div[class="block"] { border:1px solid blue; }

 

 

 
 
 
 

 

 

 

*[class="hidden"] {display: none;}

 

 

Указанный стиль применится ко всем HTML элементам страницы с классом hidden.

 

 

a[class |= "menu"] { border-right: 1px solid blue; }

 

 

Выбирает элементы, у которых значение атрибута класс начинает с menu, и может включать элементы с классами, в имени которых используется дефис -  menu-link, menu-link-right и т.д.

 

 

a[href ^= "http//:"] { background-image: url(new_image.png); }

 

 

Оформление применяется ко всем ссылкам, у которых значение атрибута href начинается с "http//:", применяется для оформления внешних ссылок.

 

 

a[href $= ".com.ua"] { background-image: url(old_image.png); }

 

 

Применяется для оформления элементов, значение атрибута class которых заканчивается на "com.ua".

 

Это все, что я хотела сказать про селекторы атрибутов. Желаю всем хорошего настроения!

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов