CSS3 обеспечивает невероятные возможности по выбору элементов в рамках страницы. Вам может показаться, что это звучит не очень впечатляюще, но, поверьте мне, эти возможности облегчат вам жизнь и вы полюбите CSS3! Я приведу доводы, подкрепляющие это смелое заявление.
Селекторы атрибутов CSS3.
Вам, возможно, доводилось использовать атрибуты селекторов CSS для нацеливания правил. Например, взгляните на следующее правило:
Img[alt] { border: 3px dashed #e15f5f;
}
Оно будет применяться к любым тегам <img> в разметке с атрибутом alt:
<img class="oscarMain" src="img/oscar. png" alt="atwi_oscar" />
Кроме того, можно сделать правило еще конкретнее, указав значение атрибута. Например, взгляните на приведенное далее правило:
Img[alt="atwi_oscar"] { border: 3px dashed #e15f5f;
}
В результате оно будет направлено только на теги <img> с атрибутом alt, имеющим значение atwi_oscar. Однако все это возможно и с использованием CSS2. Так что же нам дает здесь CSS3? Главным образом — три новых селектора атрибутов с совпадениями по подстроке.
Селекторы атрибутов CSS3 с совпадениями по подстроке.
CSS3 позволяет выбирать элементы на основе подстроки их селектора атрибутов. Звучит сложно, но на самом деле все просто! Мы можем выбрать элемент, исходя из содержимого соответствующего атрибута. Есть три варианта:
— начинается ли атрибут с префикса;
— содержит ли он экземпляр;
— заканчивается ли атрибут суффиксом.
Посмотрим, как выглядят эти селекторы.
Селектор атрибутов с совпадениями по подстроке «начинается с…». Синтаксис такого селектора атрибутов выглядит следующим образом:
Элемент[дтрибутл="значение"]
На практике, если вам потребуется выбрать все теги <img> в разметке сайта с атрибутом alt, значение которого начинается с film, для этого понадобится следующее правило:
Img[altA="film"] {
Border: 3px dashed #e15f5f;
}
Ключевым символом здесь является Л, который означает «начинается с.». Селектор атрибутов с совпадениями по подстроке «содержит экземпляр…».
Синтаксис этого селектора атрибутов выглядит следующим образом:
Элемент[атрибут*="значение"]
На практике, если вам потребуется выбрать все теги <img> в разметке сайта с атрибутом alt, который содержит film, для этого будет нужно следующее правило:
Img[alt*="film"] { border: 3px dashed #e15f5f;
}
Ключевым символом здесь является *, который означает «содержит.». Селектор атрибутов с совпадениями по подстроке «заканчивается на.».
Синтаксис такого селектора атрибутов выглядит следующим образом:
Элемент[атрибут$="значение"]
На практике, если вам потребуется выбрать все теги <img> в разметке сайта с атрибутом alt, который заканчивается на film, для этого понадобится следующее правило:
Img[alt$="film"] { border: 3px dashed #e15f5f;
}
Ключевым символом здесь является $, который означает «заканчивается на.».
Практический пример из реальной жизни.
Как эти селекторы атрибутов с совпадениями по подстроке в действительности могут нам помочь? Позвольте я приведу пример, в котором часто использую селекторы атрибутов CSS3. Я нередко создаю сайты с системой управления содержимым (например, WordPress, Concrete или Magento). Такая система позволяет заказчику добавлять новые страницы. Скажем, он сможет добавить новость о своей компании или о выходе обновленной версии того или иного продукта. Каждый раз, когда он будет добавлять страницу с использованием системы управления содержимым, генерируемый HTML-код будет включать значение идентификатора <body> или другого соответствующего тега, что поможет отличить эту страницу по разметке от других. Например, один из моих клиентов был увлечен автоспортом, и на его сайте имелся раздел с годовыми отчетами. Каждый тег <body> располагал идентификатором в виде соответствующего года:
<body id="2003">
В HTML5 ИДЕНТИФИКАТОРЫ МОГУТ НАЧИНАТЬСЯ С ЦИФР.
Если вам пока непривычно писать код на HTML5, то вы, возможно, полагаете, что недопустимо применять идентификаторы, начинающиеся с цифр, как это было в HTML 4.01. Однако HTML5 снимает это ограничение. Главное, что вам нужно запомнить, — в идентификационном имени не должно быть пробелов и оно должно быть уникальным в рамках страницы. Дополнительную информацию вы сможете найти по адресу http://dev. w3.org/html5/spec/ Overview. html#the-id-attribute.
Мне требовалось сделать так, чтобы ссылка Racing History в навигационной панели выделялась цветом при просмотре любой из страниц с годовыми отчетами, поскольку они были связаны с разделом Racing History. Однако вместо того, чтобы создавать правило стиля, охватывающее все будущие годы, я мог написать защитное правило CSS3 (их иногда называют защитными, поскольку они ограждают от будущих событий):
Body[idA="2"] .navHistory { color: #00b4ff; }
Эта строка означает, что любой элемент с классом. navHistory, который является потомком body с идентификатором, начинающимся с 2 (например, 2002, 2003, 2004 и т. д.), будет окрашен в цвет, указанный шестнадцатеричным значением #00b4ff. Одно простое правило охватывает все возможные случаи. Разумеется, если только этот сайт не просуществует в своей нынешней форме до 3000 года — в такой ситуации, скорее всего, даже если я буду хорошо питаться и делать физические упражнения, то все равно не смогу продолжить заниматься его сопровождением.
Добавить комментарий