Применение селекторов соседнего элемента


Вы хотите назначить стиль элементу, следующему за другим конкретным элементом.
Примените селектор соседнего или смежного элемента (adjacent sibling), который обозначается знаком плюс (+), стоящим между двумя селекторами, как показано в следующем примере:
li +li { font-size: 200%;
Термин ’’соседние элементы” описывает отношение между двумя элементами, размещенными рядом в информационном потоке разметки Web-страницы.
Эффект от применения этого правила показан на рис. 2.16. Обратите внимание на то, что стиль применяется только ко второму и третьему элементам списка, т. к. они расположены следом за таким же элементом. К первому элементу списка стиль не применяется, т. к. перед ним нет элемента того же уровня.
Применение селекторов атрибута
Вы хотите применить стилевые элементы, основываясь на существующих атрибутах HTML-элементов, а не вставлять дополнительный атрибут class.
У селектора атрибута спецификации CSS2 есть четыре способа поиска элемента.
♦ [attribute]
Ищется совпадение с заданным атрибутом. Например:
a[href] { text-decoration: none;
}
В результате, когда бы ни встретился в элементе HTML-кода атрибут href, ссылка не будет подчеркиваться.
♦ [attribute^al]
Ищется совпадение с заданным значением. Например:
а[href="csscookbook.com"] { text-decoration: none;
}
В результате, когда бы ни появилась в HTML-коде ссылка, указывающая на csscookbook.com, она не будет подчеркиваться.
♦ [attribute-^al]
Ищется значение, в котором содержится указанный атрибут, отделенный пробелом. Например:
a[title~=”tv hd digital”] { text-decoration: none;
}
В результате, где бы ни появилось слово "digital” в атрибуте title элемента-якоря, ссылка не будет подчеркиваться.
♦ [attribute |==уа1]
Ищется значение, содержащее заданное vai с дефисом. Например:
a[title|="anti”] { color: red;
}
В результате, где бы ни появилось слово "anti-" в атрибуте title элемента-якоря, ссылка будет окрашена в красный цвет.
Несмотря на то, что селекторы CSS2 пользуются поддержкой основных Web- обозревателей (за исключением Internet Explorer 6 и более ранних версий), как раз сейчас начинают внедряться следующие новые дополнения к селекторам атрибутов из спецификации CSS3, называемые селекторами атрибутов с соответствием подстрок.
♦ [attributeA=val]
Ищутся атрибуты, значения которых начинаются с vai. Например:
a [href A=llmailto: "] { padding-right: 15рх;
background: url(icon-email.png) no-repeat right;
}
В результате, если какая-либо ссылка содержит maiito:, в ее конец добавляется пиктограмма электронной почты.
♦ [attribute$=val]
Ищутся атрибуты, значения которых заканчиваются vai. Например:
a[href$=".rss"], a[href$=".atom"] { padding-right: 15px;
background: url(icon-rss.png) no-repeat right;
}
В результате, если какая-либо ссылка содержит указание на объединение материалов для рассылки, в конец такой ссылки вставляется пиктограмма RSS.
♦ [attribute*=val]
Ищутся атрибуты, в значениях которых содержится подстрока vai. Например:
a [href *="username11] { padding-right: 15рх;
background: url(icons-star.png) no-repeat right;
}
В результате, как только в ссылке на сайт социальной сети появляется конкретное имя пользователя, справа от ссылки вставляется пиктограмма звездочки.
Селекторы" атрибута в спецификации CSS2 на странице http://www.w3.org/ TR/CSS2/selector.html#attribute-selectors; селекторы атрибута в спецификации CSS3 на странице http://www.w3.0rg/TR/css3-selectors/#attribute-select0rs; статью сообщества разработчиков Opera (Opera Developer Community) о селекторах CSS3 на Web- странице http://dev.opera.com/articles/view/css3-attribute-selectors/.
Применение псевдоклассов
Вы хотите добавить стили для элементов, которые (обычно) не заданы именами, атрибутами или контентом.
Создайте псевдокласс. В следующем примере используется псевдокласс, который создает общий эффект при наведении указателя мыши на HTML-ссылки:
a:link { color: blue; a:visited { color: purple;
}
a:hover { color: red;
}
a:active { color: gray;
}
В приведенном наборе основная (еще не посещавшаяся) ссылка окрашена в синий цвет. Как только на ссылку наводят указатель мыши, она меняет цвет на красный. При щелчке ссылки кнопкой мыши ссылка становится серой. Когда же после посещения ссылки вы возвращаетесь на страницу, ссылка опрашивается фиолетовым цветом.
К псевдоклассам также относятся следующие три: : first-child (выбирающий первый дочерний элемент), : focus и :iang(n).
Применение псевдоэлементов
Вы хотите задать стиль для определенных характеристик элемента без введения новой разметки, например с помощью элемента span.
Примените псевдоэлемент. На рис. 2.18 показан пример включения псевдоэлемента
::first-letter:
р::first-letter { font-size: 200%; font-weight: bold;
 



Страница: 1 | 2


Правельные рецепты CSS