Лекция
Сразу хочу сказать, что здесь никакой воды про css, и только нужная информация. Для того чтобы лучше понимать что такое css , настоятельно рекомендую прочитать все из категории Каскадные таблицы стилей CSS/ CSS3.
CSS, как и любой язык, имеет свой синтаксис. В нем нет ни элементов, ни параметров, ни тегов. В нем есть правила. Правило состоит из селектора и блока объявления стилей, заключенного в фигурные скобки: Сам блок объявления стилей состоит из свойств и их значений, разделенных точкой с запятой: Давайте попробуем на практике. Откройте html-страницу и css-страницу, созданные в прошлом уроке. Давайте зададим нашей странице голубой фон. Как вы помните, за это отвечает тег , значит идем на страницу style.css и пишем следующий код: body{ background: blue; } Откройте вашу html-страницу в браузере и убедитесь, что ее фон стал синим. Теперь, давайте сделаем текст на странице белым цветом: body{ background: blue; color: white; } Обновите html-страницу в браузере (Ctrl+F5) и убедитесь, что теперь весь текст белого цвета. Теперь сделаем цвета заголовков красным (для h1) и желтым (для h2): body{ background: blue; color: white; } h1{ color:red; } h2{ color:yellow; } Снова обновите страницу в браузере и убедитесь, что все так, как и задумывалось. Думаю, принцип уже понятен: мы указываем селектор, т.е. элемент, к которому применяется стиль, а в фигурных скобках - его свойства и их значения. Свойствам и значениям будут посвящены отдельные уроки, пока же мы рассматриваем общий принцип составления таблицы стилей. Селекторы CSS Селекторы по идентификатору В нашем примере в качестве селекторов использовались элементы страницы: body, h1, h2. Но что делать, если в нашей html-странице есть несколько одинаковых элементов (например, параграфов), и мы хотим, чтобы текст всех параграфов был черным, а одного из них - розовым цветом. Тогда нам понадобится указать уникальный идентификатор для этого параграфа и создать для него стиль. В HTML идентификатор элемента задается при помощи параметра id, в качестве значения которого указывается уникальное имя. Например:
Текст параграфа с идентификатором (id).
Имена можно давать любые, кроме зарезервированных слов (к ним относятся имена тегов и параметров элементов HTML и CSS), например, нельзя идентификатору дать имя body. Давайте добавим в нашу html-страницу пару параграфов и одному из них присвоим идентификатор:
Здесь просто текст
Здесь просто текст
Простой абзац
Абзац с идентификатором (id)
Если посмотреть сейчас на нашу страницу в браузере, то наши абзацы оба белого цвета. Добавим в таблицу стилей (style.css) стили для наших абзацев: body{ background: blue; color: white; } h1{ color:red; } h2{ color:yellow; } p{ color:black; } p#pink{ color:pink; } Мы сначала указали сделать текст всех параграфов черным, а текст параграфа с id "pink" сделать розовым. Наш селектор состоит в данном случае из элемента (p), разделителя (#) и имени идентификатора (pink). Важно запомнить, что на странице может быть только один идентификатор (id). Т.е. для нашего примера нельзя создать два параграфа с id "pink", параграф с таким id может быть только один. Но каждый параграф может иметь свой идентификатор, например, можно создать параграф с id="green" и задать стиль для этого параграфа в таблице стилей. Селекторы по классу В примере выше мы создали параграф с розовым цветом текста и указали, что такой id может быть только один. Но, что делать, если мы хотим, чтобы розовый цвет текста был у двух или трех параграфов. Для этого в HTML существует параметр class, в качестве значения которого указывается его имя. Давайте добавим в нашу html-страницу еще пару параграфов и присвоим им class="pink":
Здесь просто текст
Здесь просто текст
Простой абзац
Абзац с идентификатором
Абзац с классом (class) pink
Абзац с классом (class) pink
Для того, чтобы указать стиль для этого класса, в таблице стилей напишем правило, где в качестве селектора снова будет использоваться элемент p и имя pink, но в данном случае это имя класса, поэтому в качестве разделителя будет использоваться точка (.): body{ background: blue; color: white; } h1{ color:red; } h2{ color:yellow; } p{ color:black; } p#pink{ color:pink; } p.pink{ color:pink; } Абзацев с таким классом может быть сколько угодно. Давайте подведем промежуточный итог: если все подобные элементы (например, все заголовки h1) должны иметь один стиль, то селектор состоит только из этого элемента (например, p{color:black;}) если элемент (любой: абзац, заголовок...) должен отличаться от всех остальных, то ему присваивается идентификатор (id) и разделителем в таблице стилей является знак решетки (#), например, p#pink{color:pink;} . если же на странице будет несколько элементов с одинаковым стилем, то им присваивается класс (class) и разделителем в таблице стилей является знак точки (.), например, p.pink{color:pink;}. идентификатор имеет более высокий приоритет, чем класс. Поэтому, если для какого-либо элемента будет указан и класс, и идентификатор (что не противоречит принципам CSS), то применен будет стиль идентификатора. Как уже упоминалось идентификаторы и классы можно задавать любым элементам html. Но часто бывает так, что мы хотим несколько разных элементов выделить одним стилем, например, зеленым цветом. В таком случае можно воспользоваться унифицированным селектором. В таких селекторах имя элемента не указывается, указываются точка или решетка, как признак класса или идентификатора и имя. Например: .red{ color:red; } #yellow{ color:yellow; } Таким образом, какому бы элементу мы не задали class="red" (заголовку, параграфу или ссылке), цвет текста у него станет красным. Одному элементу на странице (любому) мы можем задать id="yellow" и цвет текста этого элемента станет желтым. Контекстный селектор Пусть у нас есть html-страница вот с таким кодом:
Этот текст находится в параграфе
Это просто текст. Этот текст выделен курсивом
Этот текст находится в параграфе, но эта часть выделена курсивом
Мы хотим, чтобы курсив был выделен еще и зеленым цветом. Тогда в таблицу стилей мы запишем селектор по элементу, т.е. i{ color:green; } Сейчас наша страница в браузере выглядит так: Но что, если мы захотим, чтобы не весь курсивный текст выделялся зеленым, а лишь тот, который находится в параграфах. Для этого мы внесем изменения в таблицу стилей: p i{ color:green; } Так мы указали, применять данный стиль к элементам i, которые находятся в элементах p. Названия элементов при этом отделяются пробелом. Такие селекторы называют контекстными. Теперь наша страница в браузере выглядит так: Группировка селекторов Если блоки объявления стилей для нескольких селекторов совпадают (например, мы хотим, чтобы заголовки первых трех уровней были зеленого цвета), то их можно сгруппировать. Для этого селекторы, к которым будет применяться один стиль, нужно перечислить через запятую. Пример: h1, h2, h3{ color:green; } Предположим, что кроме цвета, мы хотим задать нашим заголовкам размер. Тогда мы можем просто дописать в нашу таблицу стилей: h1, h2, h3{ color:green; } h1{ font-size:18px; } h2{ font-size:16px; } h3{ font-size:14px; } У наших заголовков будет указанный размер, но все они будут зеленого цвета. Вообще-то, насчет группировок имеются разногласия. Одни считают правильным вышеприведенный код, т.к. группировка помогла избежать повтора одинакового свойства для трех элементов, это сокращает код. Другие считают, что таким образом, ухудшается логичность кода. Так как, найдя селектор для заголовка h3, не сразу понятно, почему текст в нем зеленого цвета. Сторонники логики рекомендуют группировать только элементы, у которых блоки описаний полностью совпадают. В общем, группировать или нет, дело вашего вкуса. Но вы должны помнить о разных подходах, когда будете читать чужой код, например, в шаблонах. На этом урок, посвященный селекторам, закончен. В следующем уроке познакомимся с такими понятиями, как псевдоэлементы и псевдоклассы.
Существующие в CSS принципы сопоставления шаблонов определяют применение правил, задающих стиль, к элементам в дереве документа. Эти шаблоны, называемыеселекторами, могут изменяться в диапазоне от простых имен элементов до сложных текстовых структур. Если определенный элемент удовлетворяет всем критериям, устанавливаемым шаблоном, то соответствующий селектор данному элементу.
Чувствительность имен элементов языка документа к регистру определяется языком документа. Например, в HTML-документах имена элементов не зависят от регистра, но в XML-документах – зависят от регистра.
В следующей таблице приводятся краткие сведения о синтаксисе селекторов в CSS 2.1:
| Шаблон | Значение | Описано в разделе |
|---|---|---|
| * | Сопоставляется любому элементу. | Универсальный селектор |
| E | Сопоставляется любому элементу E (т.е. элементу типа E). | Селекторы типов |
| E F | Сопоставляется любому элементу F, который является потомком элемента E. | Селекторы потомков |
| E > F | Сопоставляется любому элементу F, который является дочерним элементом элемента E. | Селекторы дочерних элементов |
| E:first-child | Сопоставляется элементу E, если он является первым дочерним элементом своего родительского элемента. | Псевдокласс :first-child |
| E:link E:visited |
Сопоставляется элементу E, если он является привязкой гиперссылки, направляющей к документу, которой еще не был просмотрен (:link) или уже был просмотрен (:visited). | Псевдоклассы ссылок |
| E:active E:hover E:focus |
Сопоставляется элементу E во время определенных действий пользователя. | Динамические псевдоклассы |
| E:lang(c) | Сопоставляется элементу E, если он присутствует в (разговорном) языке (язык документа указывает, каким образом определяется разговорный язык). | Псевдокласс :lang() |
| E + F | Сопоставляется любому элементу F, которому непосредственно предшествует сестринский элемент E. | Селекторы сестринских элементов |
| E[foo] | Сопоставляется любому элементу E с набором атрибутов "foo" (независимо от значения). | Селекторы атрибутов |
| E[foo="warning"] | Сопоставляется любому элементу E, у которого значение атрибута "foo" в точности равно "warning". | Селекторы атрибутов |
| E[foo~="warning"] | Сопоставляется любому элементу E, у которого значением атрибута "foo" является список значений, разделенных пробелами, и одно из этих значений в точности равно "warning". | Селекторы атрибутов |
| E[lang|="en"] | Сопоставляется любому элементу E, атрибут "lang" которого имеет список значений, разделенных знаками дефиса, начинающийся (слева) со значения "en". | Селекторы атрибутов |
| DIV.warning | Связанный с языком. (В HTML значение аналогично значению DIV[class~="warning"]). | Селекторы классов |
| E#myid | Сопоставляется любому элементу E с атрибутом ID равным "myid". | ID-селекторы |
– это либо селектор типа, либо универсальный селектор, непосредственно за которым в произвольном порядке может следовать несколькоселекторов атрибутов, ID-селекторов или псевдоклассов. Простой селектор сопоставим, если сопоставимы все его компоненты.
Примечание: терминология, используемая здесь в CSS 2.1, отличается от используемой в CSS3. Например, "простой селектор" относится к меньшей части селекторов в CSS3, чем в CSS 2.1. См. CSS3 Селекторы, модуль [CSS3SEL].
представляет собой последовательность из одного или нескольких простых селекторов, между которыми расположены комбинаторы. это: пустое пространство, символы ">" и "+". Между комбинатором и простыми селекторами может находиться пустое пространство.
Элементы дерева документа, которые сопоставляются селектору, называются селектора. Селектор, состоящий из одного простого селектора, сопоставляется любому элементу, удовлетворяющему требованиям данного селектора. Если к последовательности дополнительно приписать селектор и комбинатор, то это наложит дополнительные требования соответствия, поэтому областью применения селектора всегда следует считать подмножество элементов, сопоставляемых последнему простому селектору.
К последнему в последовательности простому селектору может быть добавлен один псевдоэлемент, в этом случае информация о стиле будет применяться к части каждой области применения.
Если в нескольких селекторах используются одни и те же объявления, их можно сгруппировать в список, разделив запятыми.
В данном примере три правила с идентичными объявлениями собраны в одно. Таким образом, запись
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
эквивалентна следующей:
h1, h2, h3 { font-family: sans-serif }
Наряду с такой возможностью в CSS предлагаются другие алгоритмы сокращения, включая множественные объявления и свойства стенографического типа.
Универсальный селектор, при написании обозначаемый символом "*", сопоставляется имени элемента любого типа. Он сопоставляется любому одиночному элементу вдереве документа.
Если универсальный селектор является не единственным компонентом простого селектора, то символ "*" может быть опущен. Например:
*[lang=fr] и [lang=fr] эквивалентны.*.warning и .warning эквивалентны.*#myid и #myid эквивалентны.Селектор типа сопоставляется названию типа элемента языка документа. Селектор типа сопоставляется каждому экземпляру данного типа в дереве документа.
Следующее правило сопоставляется всем элементам H1 в дереве документа:
h1 { font-family: sans-serif }
Иногда бывает необходимо, чтобы селекторы сопоставлялись элементу, который является потомком некоторого другого элемента в дереве документа (например, элементам EM, содержащимся в элементе H1). Селекторы потомков позволяют устанавливать такие ассоциации в шаблоне. Селектор потомков состоит из двух и более селекторов, разделенных пустым пространством. Селектор потомков вида "A B" сопоставим, если элемент B является произвольным потомком некоторого своего предкаA.
Например, рассмотрим следующие правила:
h1 { color: red }
em { color: red }
Несмотря на то, что целью данных правил является акцентирование внимания на некотором фрагменте текста путем изменения его цвета, данный эффект не будет достигнут, если имеет место следующее:
<H1>Данный заголовок <EM>очень</EM> важен</H1>
Приведем тот же пример, дополнив предыдущие правила еще одним, устанавливающим синий цвет текста всякий раз, когда элемент EM находится внутри элемента H1:
h1 { color: red }
em { color: red }
h1 em { color: blue }
Третье правило в следующем фрагменте будет сопоставляться элементу EM:
<H1>Данный <SPAN class="myclass">заголовок <EM>очень</EM> важен</SPAN></H1>
Следующий селектор:
div * p
сопоставляется элементу P, который является потомком второго и более старшего поколения элемента DIV. Примите во внимание, что пустое пространство с каждой стороны "*" не является частью универсального селектора; пустое пространство является комбинатором, указывающим на то, что DIV должен быть предком какого-либо элемента, и что этот элемент должен быть предком P.
Селектор, который фигурирует в следующем правиле, объединяющем селекторы потомков и селекторы атрибутов, сопоставляется любому элементу, который, во-первых, имеет заданный атрибут "href" и, во-вторых, находится внутри элемента P, который, в свою очередь, сам находится внутри элемента DIV:
div p *[href]
Селектор дочерних элементов сопоставим, если элемент является дочерним по отношению к некоторому другому элементу. Данный тип селекторов состоит из двух и более селекторов, разделенных символом ">".
Следующее правило задает стиль всех элементов P, являющихся дочерними элементами элемента BODY:
body > P { line-height: 1.3 }
В приведенном ниже примере осуществляется объединяются селекторы потомков и селекторы дочерних элементов:
div ol>li p
Селектор, построенный в этом примере, сопоставляется элементу P, являющемуся потомком элемента LI; элемент LI должен быть дочерним элементом элемента OL; элемент OL должен быть потомком элемента DIV. Обратите внимание, что необязательное пустое пространство вокруг комбинатора ">" опущено.
Информацию о выборе первого дочернего элемента см. ниже в раздел о псевдоклассе first-child.
Селекторы сестринских элементов имеют следующий синтаксис: E1 + E2, где E2 – область применения данного селектора. Он сопоставим, если E1 и E2 являются дочерними элементами одного и того же родительского элемента в дереве документа, и E1 непосредственно предшествует E2, игнорируя узлы, не являющиеся элементами (такие как текстовые узлы и комментарии).
Таким образом, следующее правило утверждает, что если элемент P следует непосредственно за элементом MATH, то между ними не должно быть отступа:
math + p { text-indent: 0 }
В приведенном ниже примере уменьшается размер вертикального пространства между элементом H1 и непосредственно следующим за ним элементом H2:
h1 + h2 { margin-top: -5mm }
Следующее правило аналогично правилу из предыдущего примера, за исключением того, что в нем добавлен селектор класса. Таким образом, специальное форматирование выполняется, только если для элемента H1 установлен класс class="opener":
h1.opener + h2 { margin-top: -5mm }
CSS 2.1 позволяет разработчикам создавать правила, сопоставляемые элементам, которые имеют определенные атрибуты, описанные в исходном документе.
Селекторы атрибутов могут сопоставляться в четырех случаях:
[att][att=val][att~=val][att~=val]Значениями атрибутов должны быть идентификаторы или строки. Зависимость значений и имен атрибутов от регистра определяется языком документа.
Например, следующий селектор атрибута сопоставляется всем элементам H1, которые определяют атрибут "title", независимо от его значения:
h1[title] { color: blue; }
В следующем примере селектор сопоставляется всем элементам SPAN, у которых значение атрибута "class" в точности равно "example":
span[class=example] { color: blue; }
Для обращения к нескольким атрибутам элемента или многократного обращения к одному и тому же атрибуту можно использовать несколько селекторов атрибутов.
В этом примере селектор сопоставляется всем элементам SPAN, у которых значение атрибута "hello" в точности равно "Cleveland", а значение атрибута "goodbye" в точности равно "Columbus":
span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
Следующие селекторы иллюстрируют различия между "=" и "~=". Первый селектор будет сопоставляться, например, значению "copyright copyleft copyeditor" атрибута "rel". Второй селектор будет сопоставляться только в том случае, если значение атрибута "href" равно "http://www.w3.org/".
a[rel~="copyright"] a[href="http://www.w3.org/"]
Следующее правило скрывает все элементы, атрибут "lang" которых имеет значение "fr" (т.е. документ на французском языке).
*[lang=fr] { display : none }
Следующее правило будет сопоставляться тем значениям атрибута "lang", которые начинается с "en", включая "en", "en-US" и "en-cockney":
*[lang|="en"] { color : red }
Аналогично, следующие правила звуковой таблицы стилей позволяют скрипту читать вслух с использованием разных голосов для каждой роли:
DIALOGUE[character=romeo]
{ voice-family: "Laurence Olivier", charles, male }
DIALOGUE[character=juliet]
{ voice-family: "Vivien Leigh", victoria, female }
Сопоставление осуществляется со значениями атрибутов в дереве документа. Используемые по-умолчанию значения атрибутов могут быть определены в DTD или где-то в другом месте, но не в состоянии всегда быть выбранными селекторами атрибутов. Таблицы стилей должны разрабатываться таким образом, чтобы они работали даже в том случае, если информация о используемых по-умолчанию значениях не включена в дерево документа.
Вернее, агентам пользователей не требуется читать "внешнее подмножество" DTD, но требуется просматривать на наличие используемых по-умолчанию значений атрибутов во "внутреннем подмножестве" документа. (См. определение этих подмножеств в [XML10].)
Агентам пользователей, которые распознают пространство имен XML [XMLNAMESPACES], не требуется использовать это знакомство с данным пространством имен для трактовки принятых по-умолчанию значений атрибутов, если они представлены в документе. (Например, XHTML-агенту пользователя не требуется использовать встроенное знакомство с XHTML DTD.)
Примите во внимание, что обычно, реализации предпочитают игнорировать внешние подмножества.
Например, рассмотрим элемент EXAMPLE с атрибутом "notation", который по-умолчанию принимает значение "decimal". Фрагмент DTD может выглядеть следующим образом:
<!ATTLIST EXAMPLE notation (decimal,octal) "decimal">
Если таблица стилей содержит правила
EXAMPLE[notation=decimal] { /*... Об этом говорит сайт https://intellect.icu . установки по умолчанию ...*/ }
EXAMPLE[notation=octal] { /*... прочие установки...*/ }
первое правило не сопоставляется элементам, у которых атрибут "notation" установлен по-умолчанию, т.е. не установлен явно. Для охвата всех ячеек, селектор атрибута для значения по-умолчанию должен отбрасываться:
EXAMPLE { /*... установки, используемые по умолчанию ...*/ }
EXAMPLE[notation=octal] { /*... остальные установки...*/ }
Здесь, поскольку селектор EXAMPLE[notation=octal] более специфичен, чем одиночный селектор тэга, объявление стиля во втором правиле перезаписывает то, которое было в первом, для элементов, значение атрибута "notation" которых "octal". Необходима внимательность, потому что все объявления свойств, которые применяются только к случаям по-умолчанию, перезаписываются в правилах стиля для тех случаев, которые не являются принятыми по-умолчанию.
Работая с HTML, авторы могут использовать запись с точкой (.) как альтернативу записи ~= при представлении атрибута class. Таким образом, для HTML div.value иdiv[class~=value] имеют одинаковый смысл. Значение атрибута должно находиться непосредственно после "точки" (.). Агенты пользователей могут применять селекторы, использующие запись с точкой (.), в XML-документах если агенты пользователей имеют знания, связанные с пространством имен, которые позволяют им распознавать какие атрибуты в атрибуте "class" предназначены для соответствующего пространства имен. Одним из таким примеров знаний, связанных с пространством имен, является текст в спецификации для специфического пространства имен (например, SVG 1.1 [SVG11] описывает SVG-атрибут "class" и как агентам пользователей следует интерпретировать их, и так же MathML 2.0 [MATH20] описывает MathML-атрибут "class".)
Например, можно установить информацию о стиле для всех элементов с class~="pastoral" следующим образом:
*.pastoral { color: green } /* все элементы с class~=pastoral */
или просто
.pastoral { color: green } /* все элементы с class~=pastoral */
Следующее правило назначает стиль только элементу H1 с class~="pastoral":
H1.pastoral { color: green } /* элемент H1 с class~=pastoral */
Благодаря этим правилам в следующем примере при первом появлении элементы H1 не будут отображаться зеленым цветом, а при втором появлении будут:
<H1>Не зеленый цвет</H1> <H1 class="pastoral">Настоящий зеленый цвет</H1>
Для сопоставления подмножеству значений "class" перед каждым из них, должна следовать точка ".".
Например, следующее правило сопоставляется любому элементу P, атрибуту "class" которого в качестве значения назначен список разделенных пробелами значений, включающий слова "pastoral" и "marine":
p.marine.pastoral { color: green }
Это правило сопоставляется, если class="pastoral blue aqua marine" но не сопоставляется, если class="pastoral blue".
Примечание. В языке CSS атрибут "class" наделен большими описательными возможностями, позволяющими авторам создавать свой собственный "язык документа", основанный на элементах, с которыми не связана никакая информация о представлении (например, элементы DIV и SPAN в HTML) и назначать информацию о стиле посредством атрибута "class". Авторам следует избегать использования таких возможностей на практике, т.к. структурные элементы языка документа в основном имеют общепринятые значения, а определяемые автором классы чаще всего их не имеют.
Примечание: Если элемент имеет несколько атрибутов класса, то их значения должны объединяться с пробелами между значениями до поиска класса. В настоящее время рабочая группа не осведомлена о каких-либо способах которыми данная ситуация может быть преодолена, однако, такое поведение явно ненормативно в данной спецификации.
Язык документа может содержать атрибуты, которые объявляются как ID типа. Поскольку любые два из них не имеют одинаковые значения, это делает атрибуты ID типа уникальными; какой бы ни был язык документа, атрибут ID можно использовать для уникальной идентификации его элемента. В HTML все атрибуты ID обозначаются "id"; XML-приложения могут обозначаться атрибуты ID по-другому, но для них справедливо то же самое ограничение.
Атрибут ID языка документа позволяет авторам назначать идентификатор одному экземпляру элемента в дереве документа. В CSS ID-селекторы сопоставляются экземпляру элемента в зависимости от его идентификатора. В CSS ID-селектор содержит символ "#", непосредственно за которым следует значение ID, которое должно быть идентифицировано.
Примите во внимание, что CSS не определяет то, как агенты пользователей узнают ID-атрибут элемента. Агенты пользователей могут, например, прочитать DTD документа, имеющий жестко закодированную информацию или спросить пользователя.
Следующий ID-селектор сопоставляется элементу H1, значение атрибута ID которого равно "chapter1":
h1#chapter1 { text-align: center }
В следующем примере правило стиля сопоставляется элементу, у которого значение атрибута ID равно "z98y". Правило таким образом будет сопоставляться элементу P:
<HEAD>
<TITLE>Сопоставление P</TITLE>
<STYLE type="text/css">
*#z98y { letter-spacing: 0.3em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>Широкий текст</P>
</BODY>
Однако в следующем примере это правило стиля будет сопоставляться только элементу H1, значение атрибута ID которого равно "z98y". В этом примере правило не сопоставляется элементу P:
<HEAD>
<TITLE>Сопоставление только H1</TITLE>
<STYLE type="text/css">
H1#z98y { letter-spacing: 0.5em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>Широкий текст</P>
</BODY>
ID-селекторы имеют большую специфичность, чем селекторы атрибутов. Например, в HTML селектор #p123 более специфичен, чем [id=p123] в терминах каскада.
Примечание. В XML 1.0 [XML10] информация о том, в каком атрибуте содержатся ID элементов, располагается в DTD. Во время синтаксического анализа XML-документа агенты пользователей читают DTD не всегда и поэтому не могут знать информацию о ID элемента. Если разработчик таблицы стилей знает или предполагает, что подобное может случиться, то ему следует использовать обычные селекторы атрибутов вместо ID-селекторов: [name=p371]вместо #p371 Однако, порядок каскадирования обычных селекторов атрибутов отличается от порядка каскадирования ID-селекторов. Может потребоваться добавить приоритет "!important" к объявлению: [name=p371] {color: red ! important}.
Если элемент имеет несколько атрибутов ID, все они должны быть обработаны как ID для этого элемента в смысле ID-селектора. Такую ситуацию следует разрешать используя и xml:id [XMLID], и DOM3 Core [DOM-LEVEL-3-CORE], и XML DTDs [XML10] и знания, связанные с пространством имен.
В языке CSS 2.1 стиль обычно прикрепляется к элементу в зависимости от его местонахождения в дереве документа. В большинстве случаев эта простая модель оказывается приемлемой, но все же иногда из-за структуры дерева документа она не позволяет реализовать некоторые устоявшиеся сценарии построения публикации. Например, в HTML 4 (см. [HTML4]) нет элемента, который бы указывал на первую строку абзаца, и поэтому нет простого селектора CSS, который бы мог указывать на нее.
В CSS вводится представление о и , позволяющих осуществлять форматирование на основании информации, не включенной в дерево документа.
Ни псевдоэлементы, ни псевдоклассы не отображаются в исходном документе или дереве документа.
Псевдоклассы могут располагаться в любом месте селекторов, в то время как псевдоэлементы могут находиться только после последнего простого селектора.
Имена псевдоклассов и псевдоэлементов чувствительны к регистру.
Некоторые псевдоклассы являются взаимоисключающими, а другие можно применять одновременно к одному и тому же элементу. В случае конфликта правил, результат определяется принятым порядком каскадирования.
Псевдокласс :first-child сопоставляется элементу, который является первым дочерним элементом некоторого другого элемента.
В следующем примере селектор сопоставляется каждому элементу P, который является первым дочерним элементом элемента DIV. Это правило запрещает отступ для первого абзаца элемента DIV:
div > p:first-child { text-indent: 0 }
Данный селектор сопоставляется элементу P внутри DIV в следующем фрагменте:
<P>Последний P перед примечанием. <DIV class="note"> <P>Первый P внутри примечания. Чикаго</P>но не сопоставляется второму элементу P в следующем фрагменте:
<P> Последний P перед примечанием. <DIV class="note"> <H2>Note</H2> <P> Первый P внутри примечания. </DIV>
В следующем примере устанавливается вес шрифта 'bold' для каждого элемента EM, являющегося одним из потомков первого дочернего элемента P:
p:first-child em { font-weight : bold }
Примите во внимание, что, поскольку безымянные блоки не являются частью дерева документа, то они не учитываются во время определения первого дочернего элемента.
Например, EM в:
<P>abc <EM>по-умолчанию</EM>является первым дочерним элементом элемента P.
Следующие два селектора эквивалентны:
* > a:first-child /* A - первый дочерний элемент любого элемента */ a:first-child /* Аналогично */
Агенты пользователей обычно отображают непосещенные ссылки иначе, чем ранее единожды посещенные. В CSS предусмотрены псевдоклассы ':link' и ':visited' для различения этих типов ссылок:
Примечание. По истечении определенного времени агенты пользователей могут вернуть просмотренную ссылку в состояние ':link' (непросмотренная).
Эти два состояния являются взаимоисключающими.
Язык документа определяет элементы, служащие точками привязки гиперссылки. Например, в HTML4 псевдоклассы ссылок применяются к элементам A с атрибутом "href". Таким образом, следующие два объявления CSS 2.1 эквивалентны:
a:link { color: red }
:link { color: red }
Если следующая ссылка:
<A class="external" href="http://out.side/">внешняя ссылка</A>была просмотрена, то, согласно правилу:
a.external:visited { color: blue }
она будет отображаться синим цветом.Примечание. Есть возможность для авторов таблиц стилей злоупотреблять псевдоклассами :link и :visited для определения без согласия пользователя того, какие сайты он посещает.
Поэтому агенты пользователей могут обрабатывать все ссылки как непосещенные, или принимать другие меры для сохранения секретности пользователя не смотря на раздельное представления посещенных и непосещенных ссылок. Дополнительную информацию о управлении секретностью см. в [P3P].
Иногда интерактивные агенты пользователей изменяют представление документа после выполнения пользователем некоторых действий. В CSS предусмотрены три псевдокласса для наиболее часто встречающихся случаев:
Элемент может сопоставляться одновременно нескольким псевдоклассам.
В CSS не определяется, какие элементы могут находиться в описанных выше состояниях, как они попадают в эти состояния и как их покидают. Скрипт может выбирать реагируют ли элементы на действия пользователей или нет, и различные устройства и агенты пользователей могут использовать различные способы для выделения или активизации элементов.
CSS 2.1 не дает определение если родитель элемента, который является ':active' или ':hover' так же находится в таком состоянии.
Агентам пользователей не требуется осуществлять повторное форматирование отображаемого документа из-за переходов, индуцируемых псевдоклассами. Например, в таблице стилей может быть указано, что 'font-size' у активной (:active) ссылки больше, чем у неактивной, но поскольку это может привести к изменению положения букв во время выбора пользователем данной ссылки, то агент пользователя может проигнорировать соответствующее правило стиля.
a:link { color: red } /* непосещенные ссылки */
a:visited { color: blue } /* посещенные ссылки */
a:hover { color: yellow } /* выбранная, но не активизированная */
a:active { color: lime } /* активные ссылки */
Обратите внимание, что правило A:hover должно располагаться после правил A:link и A:visited, так как в противном случае правила каскадирования скроют свойство 'color'правила A:hover. Аналогичным образом, благодаря тому, что A:active находится после A:hover, активная ссылка отображается белым цветом, когда пользователь устанавливает указатель поверх элемента А и одновременно активизирует его.
Пример(ы): Пример сочетания динамических псевдоклассов:
a:focus { background: yellow }
a:focus:hover { background: white }
Последний селектор сопоставляется элементам A, которые находятся в псевдоклассах :focus и :hover.
Информацию об отображении области активизации (фокуса) можно найти в разделе о динамических областях активизации.
Примечание. В CSS1 псевдокласс ':active' и группа псевдоклассов ':link' и ':visited' были взаимоисключающими. Теперь это не так. Элемент может одновременно принадлежать псевдоклассам ':visited' и ':active' (или ':link' и ':active'), и применение объявлений стилей определяется принципами нормального каскадирования.
Примечание. Также примите во внимание, что в CSS1 псевдокласс ':active' применялся только к ссылкам.
Если в языке документа предусмотрен способ определения естественного языка элемента, то в CSS можно создавать селекторы, сопоставляемые элементу, использующему данный язык. Например, в HTML [HTML4] язык определяется сочетанием атрибута "lang", элемента META и, возможно, информацией из протокола (такой как HTTP-заголовки). В XML используется атрибут, называемый xml:lang, и могут быть другие методы, связанные с языком документа, позволяющие определять язык.
Псевдокласс ':lang(C)' сопоставляется элементу, использующему язык C. Имеет ли место сопоставление основывается исключительно на том, эквивалентен ли идентификаторе C значению языка элемента, или разделенной дефисами подстроке значений языка элемента, и тем же способом как если он был бы представлен оператором '|='. Идентификатор C не в состоянии быть корректным именем языка.
Идентификатор C не должен быть пустым.
Примечание: Рекомендуется чтобы документы и протоколы указывали язык используя коды из RFC 3066 [RFC3066] или документа, который будет вместо него, и иметь в виду атрибут "xml:lang" при разработке документов, основанных на XML [XML10]. См. "FAQ: Двухбуквенные или трехбуквенные коды языка."
Следующие правила расставляют кавычки в документе HTML, написанном либо на канадском французском, либо на немецком языке:
html:lang(fr-ca) { quotes: '« ' ' »' }
html:lang(de) { quotes: '»' '«' '\2039' '\203A' }
:lang(fr) > Q { quotes: '« ' ' »' }
:lang(de) > Q { quotes: '»' '«' '\2039' '\203A' }
Вторая пара правил фактически задает свойство 'quotes' для элементов Q в соответствии с языком их родительских элементов. Это сделано, потому что выбор кавычек обычно зависит от языка элементов вокруг кавычек, а не от самих кавычек, как это имеет место во фрагменте французского текста “а l'improviste”, расположенного в английском тексте и использующего английские кавычки.
Примите во внимание различия между [lang|=xx] и :lang(xx). В этом примере HTML, только BODY соответствует [lang|=fr] (поскольку он имеет атрибут LANG) но и BODY и P соответствуют match :lang(fr) (поскольку и тот и другой на французском языке).
<body lang=fr> <p>Je suis Franзais.</p> </body>
Псевдоэлемент :first-line используется для применения специальных стилей к содержимому первой форматируемой строке абзаца. Например:
p:first-line { text-transform: uppercase }
Представленное выше правило означает "сделать буквы первой строки каждого абзаца заглавными". Однако селектор "P:first-line" не соответствует ни одному реальному элементу HTML. Он сопоставляется псевдоэлементу, который соответствующие агенты пользователей будут помещать в начало каждого абзаца.
Примите во внимание, что длина первой строки зависит от множества факторов, таких как ширина страницы, размер шрифта и др. Поэтому типичный абзац HTML-документа, такой как:
<P>Это довольно длинный абзац HTML-документа, который будет разбит на несколько строк. Первая строка будет идентифицирована последовательностью функциональных тегов. Другие строки будут обрабатываться как обычные строки абзаца.</P>
строки которого претерпят следующую реорганизацию:
ЭТО ДОВОЛЬНО ДЛИННЫЙ АБЗАЦ HTML-ДОКУМЕНТА, который будет разбит на несколько строк. Первая строка будет отмечена последовательностью функциональных тегов. Остальные строки будут обрабатываться как обычные строки абзаца.
и будет "переписан" агентами пользователей так, чтобы он содержал последовательность функциональных тегов для :first-line. Эта фиктивная последовательность помогает показать, как наследуются свойства.
<P><P:first-line> Это довольно длинный абзац HTML-документа, который </P:first-line> будет разбит на несколько строк. Первая строка будет отмечена последовательностью функциональных тегов. Остальные строки будут обрабатываться как обычные строки абзаца.</P>
Если псевдоэлемент разрывает реальный элемент, то желаемый эффект зачастую может быть достигнут с помощью последовательности функциональных тегов, которая закрывает и повторно открывает этот элемент. Таким образом, если мы используем в предыдущем абзаце элемент SPAN, то получим:
<P><SPAN class="test"> Это довольно длинный абзац HTML-документа, который будет разбит на несколько строк.</SPAN> Первая строка будет отмечена последовательностью функциональных тегов. Остальные строки будут обрабатываться как обычные строки абзаца.</P>
и пользовательский агент сможет сымитировать начальные и конечные теги для SPAN во время вставки последовательности функциональных тэгов для :first-line.
<P><P:first-line><SPAN class="test"> Это довольно длинный абзац HTML-документа, который </SPAN></P:first-line><SPAN class="test"> будет разбит на несколько строк. строк.</SPAN> Первая строка будет отмечена последовательностью функциональных тегов. Остальные строки будут обрабатываться как обычные строки абзаца.</P>
Псевдоэлемент :first-line в состоянии прикрепиться только к элементу структурного уровня, inline-block, table-caption или table-cell.
В некоторых потоках "первая форматированная строка" элемента может встретиться внутри потомка структурного уровня (т.е., потомок структурного уровня, который не позиционирован и не перемещен). Например, первая строка элемента DIV в <DIV><P>Эта строка...</P></DIV> является первой строкой элемента P (учитывая, что и P и DIV являются элементами структурного уровня).
Первая строка элементов table-cell или inline-block не в состоянии быть первой форматированной строкой элемента-предка. Таким образом, в <DIV><P STYLE="display: inline-block">Привет<BR>До свидания</P> и так далее</DIV> первой форматированной строкой элемента DIV не является строка "Привет".
Примите во внимание, что первая строка элемента P во фрагменте: <p><br>Первый... не содержит каких-либо букв (учитывая стиль по-умолчанию для элемента BR в HTML 4). Слово "Первый" не находится в первой форматированной строкой.
Агенту пользователя следует действовать как будто сымитированные начальные тэги псевдоэлементов first-line вложены непосредственно внутрь находящийся в самой глубине заключительного элемент структурного уровня. (Начиная с CSS1 и CSS2, где нет упоминаний о таких случаях, авторам не следует полагаться на такое поведение.) Далее приводится пример. Последовательностью функциональных тэгов для
<DIV> <P>Первый абзац</P> <P>Второй абзац</P> </DIV>
является
<DIV> <P><DIV:first-line><P:first-line>Первый абзац</P:first-line></DIV:first-line></P> <P><P:first-line>Второй абзац</P:first-line></P> </DIV>
Псевдоэлемент :first-line подобен элементу строкового уровня, но только с некоторыми ограничениями. К псевдоэлементу :first-line применяются следующие свойства:свойства шрифта, свойства цвета, свойства фона, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height',. Агенты пользователей могут также применять другие свойства.
Псевдоэлемент :first-letter должен выбрать первую букву первой строки блока, если в этой строке ей не предшествует какое-либо другое содержимое (например, изображения или встроенные таблицы). Псевдоэлемент :first-letter может использоваться для создания таких простых типографических эффектов, как "заглавные буквы" и"буквицы". Этот тип начальной буквы аналогичен строковому элементу, если его свойству 'float' присвоено значение 'none', в противном случае – он аналогичен перемещаемому объекту.
К псевдоэлементам :first-letter применяются следующие свойства: свойства шрифта, 'text-decoration', 'text-transform', 'letter-spacing', 'word-spacing' (когда подходит), 'line-height', 'float', 'vertical-align' (только если 'float' установлен в 'none'), свойства полей, свойства отступов, свойства границ, свойства цвета, свойства фона. Агенты пользователей могут также применять другие свойства. Чтобы агенты пользователей были способны отобразить типографски корректно буквицу или заглавные буквы, агенты пользователей могут выбрать высоту-строки, ширину и высоту основываясь на форме буквы, в отличии от обычных элементов. Предполагается, что в CSS3 будут специфические свойства, применяемые к first-letter.
Данный пример отображает возможное представление заглавной буквы. Примите во внимание, что свойство 'line-height', которое наследуется псевдоэлементом first-letter – 1.1, но агент пользователя в этом примере рассчитал высоту первой буквы иначе, так, чтобы не отображалось никаких лишних пробелов между первыми двумя строками. Также примите во внимание, что функциональные начальные тэги первой буквы находятся внутри элемента SPAN, и таким образом вес шрифта первой буквы – нормальный, а не жирный шрифт, как в SPAN:
p { line-height: 1.1 }
p:first-letter { font-size: 3em; font-weight: normal }
span { font-weight: bold }
...
<p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br>
Erbarremt over my en mijn benaeuwde vesten<br>
En arme burgery, en op mijn volcx gebed<br>
En dagelix geschrey de bange stad ontzet.
В следующем примере CSS 2.1 буквица начальной буквы создается путем объединения двух строк:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Буквица начальной буквы</TITLE>
<STYLE type="text/css">
P { font-size: 12pt; line-height: 1.2 }
P:first-letter { font-size: 200%; font-style: italic;
font-weight: bold; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>Первые</SPAN> несколько слов из статьи
в журнале "Экономист".</P>
</BODY>
</HTML>
Данный пример может быть отформатирован следующим образом:
Последовательность функциональных тегов:
<P> <SPAN> <P:first-letter> П </P:first-letter>Первые </SPAN> несколько слов статьи в журнале "Экономист". </P>
Примите во внимание, что теги псевдоэлементов :first-letter примыкают к содержимому (например, к начальному символу), а начальный тег псевдоэлемента :first-line вставляется сразу после начального тега структурного элемента.
Чтобы добиться традиционного оформления буквиц, агенты пользователей могут устанавливать примерные значения размеров шрифтов, например, для выравнивания базовых строк. Кроме того, во время форматирования можно учитывать контур глифа.
Перед первой буквой или после нее следует включать знаки пунктуации (т.е., символы, определенные в классах пунктуации "open" (Ps), "close" (Pe), "initial" (Pi), "final" (Pf) и "other" (Po) в Unicode [UNICODE]), как это сделано в следующем примере:
Псевдоэлемент ':first-letter' также применяется если первая буква является фактически цифрой, например, "6" в "67 миллионов долларов – куча денег."
Псевдоэлемент :first-letter применяется к элементам блок, элемент списка, ячейка таблицы, заголовок таблицы и inline-block.
Псевдоэлемент :first-letter можно использовать со всеми такими элементами, которые содержат текст, или которые имеют потомков в том самом потоке, который содержит текст. Агенту пользователя следует действовать как будто функциональный начальный тэг псевдоэлемента first-letter находится как раз до первого текста элемента, даже если этот первый текст находится в элементе-потомке.
Далее приводится пример. Последовательностью функциональных тэгов для данного HTML-фрагмента:
<div> <p>Первый текст.
является:
<div> <p><div:first-letter><p:first-letter>П</...></...>ервый текст.
Первая буква элементов table-cell или inline-block не в состоянии быть первой буквой элемента-предка. Таким образом, в <DIV><P STYLE="display: inline-block">Привет<BR>До свидания</P> и так далее</DIV> первой буквой элемента DIV не является буква "П". На практике, элемент DIV не имеет первую букву.
Первая буква должна находиться на первой форматированной строке. Например, в данном фрагменте: <p><br>Первый... первая строка не содержит никаких букв и псевдоэлемент ':first-letter' не будет соответствовать ничему (учитывая стиль по-умолчанию для элемента BR в HTML 4). В частности, он не соответствует букве "П" в слове "Первый."
Если элемент является элементом списка ('display: list-item'), то ':first-letter' применяется к первой букве в главном блоке после маркера. Агенты пользователей могут игнорировать ':first-letter' в элементах списка параметром 'list-style-position: inside'. Если элемент имеет содержимое ':before' или ':after', то ':first-letter применяется к первой букве элемента, включающего такое содержимое.
Например, после правила 'p:before {content: "Примечание: "}', селектор 'p:first-letter' соответствует букве "П" слова "Примечание".
В некоторых языках могут существовать специальные правила обращения с определенными комбинациями букв. Например, в нидерландском языке, если сочетание букв "ij" находится в начале слова, то обе буквы следует учитывать в псевдоэлементе :first-letter.
Если буквы, которые будут формировать first-letter не находятся в том же элементе, как "П" в <p>'<em>П..., то агент пользователя может создать псевдоэлемент first-letter из одного из элементов, обоих элементов, или просто не создавать псевдоэлемент.
Точно так же, если первая буква(ы) структурного блока не находятся в начале строки (например, из-за двунаправленной перегруппировки), то агенту пользователя нет необходимости создавать псевдоэлемент(ы).
В следующем примере показано, как могут повлиять друг на друга налагающиеся псевдоэлементы. Первая буква каждого элемента P выделяется зеленым цветом, а размер шрифта установлен в '24pt'. Оставшаяся часть первой форматируемой строки будут представлены синим цветом ('blue'), а все оставшаяся часть абзаца – красным ('red').
p { color: red; font-size: 12pt }
p:first-letter { color: green; font-size: 200% }
p:first-line { color: blue }
<P>Некоторый текст, разделенный на две строки</P>
Допустим, что разрыв строки произойдет до того, как слово "закончится", тогда последовательность функциональных тегов для данного фрагмента может быть следующей:
<P> <P:first-line> <P:first-letter> Н </P:first-letter>Некоторый текст, </P:first-line> разделенный на две строки </P>
Обратите внимание, что элемент :first-letter находится внутри элемента :first-line. Свойства, установленные для элемента :first-line, наследуются элементом :first-letter, но могут быть переназначены, если в элементе :first-letter этому же свойству присваивается значение.
Псевдоэлементы ':before' и ':after' можно использовать для вставки генерируемого содержимого до или после содержимого элемента. Подробнее о них рассказывается в разделе о генерируемом тексте.
h1:before {content: counter(chapno, upper-roman) ". "}
Когда псевдоэлементы :first-letter и :first-line сочетаются с псевдоэлементами :before и :after, они применяются к первой букве или строке элемента, включая вставляемый текст.
p.special:before {content: "Специальный! "}
p.special:first-letter {color: #ffd800}
Буква "С" слова "Специальный!" будет представлена золотистым цветом.
Итак, Вы разобрались с основными селекторами: id, class, селекторами потомков. И все? Если да, то Вы теряете очень много в плане гибкости управления внешним видом элементов на странице.
Несмотря на то, что многие из упомянутых здесь селекторов входят в спецификацию CSS3 и, соответственно, поддерживаются только современными браузерами, Вам все же следует ознакомиться с ними и держать их в памяти.
1. *
* {
margin: 0;
padding: 0;
}
Начнем с простейших вещей для новичков, прежде чем перейдем к продвинутым селекторам.
Символ звездочки позволяет выбрать все элементы на странице. Многие веб-разработчики используют это для "обнуления" всех внешних и внутренних отступов.
Также символ * можно использовать для дочерних элементов объекта.
#container * {
border: 1px solid black;
}
Этот код нацелен на все элементы, которые являются дочерними по отношению к блоку с идентификатором container.
Совместимость:
* IE6+
* Firefox
* Chrome
* Safari
* Opera
2. #X
#container {
width: 960px;
margin: auto;
}
Символ решетки позволяет нам отбирать элементы по идентификатору. Это один из наиболее распространенных способов отбора элементов, однако будьте осторожны при его использовании.
"Спросите себя: Мне точно необходимо использовать id для какого-то элемента, чтобы сослаться на него?"
Селекторы id негибки и их трудно использовать повторно в разных проектах. Если возможно, пытайтесь сначала использовать имя тэга или даже псевдо-класс.
Совместимость:
* IE6+
* Firefox
* Chrome
* Safari
* Opera
3. .X
.error {
color: red;
}
Это селектор класса. Разница между id и классами в том, что с помощью классов можно выбирать сразу несколько элементов. Используйте классы, если Вам нужно применить один стиль к группе элементов.
В противном случае используйте id для нахождения "иголки в стоге сена" и применения стиля только к одному конкретному объекту.
Совместимость:
* IE6+
* Firefox
* Chrome
* Safari
* Opera
4. X Y
li a {
text-decoration: none;
}
Следующий часто используемый тип селектора - селектор потомка. Его следует использовать, когда нужно производить более точечный отбор элементов.
К примеру, как быть, если нужно выбрать не все тэги ссылок, а только те, что находятся внутри неупорядоченного списка? Это как раз тот случай, когда следует использовать селектор потомка.
"Совет: Если Ваш селектор похож на X Y Z A B.error, то Вы, вероятно, что-то делаете на так. Всегда спрашивайте себя, действительно ли это самый простой способ"
Совместимость:
* IE6+
* Firefox
* Chrome
* Safari
* Opera
5. X
a {color: red;}
ul {margin-left: 0px;}
Что, если Вы хотите сослать на все элементы определенного типа на странице, если у них нет id или классов? Делайте проще, используйте селекторы типа. Если Вам нужно выбрать все неупорядоченные списки, используйте ul{}.
Совместимость:
* IE6+
* Firefox
* Chrome
* Safari
* Opera
6. X:visited и X:link
a:link {color: red;}
a:visited {color: purple;}
Здесь мы используем псевдо-класс :link для выбора всех ссылок, на которых еще не был совершен клик.
Также есть псевдо-класс :visited, который, как Вы и ожидали, позволяет нам применить стиль только к тем ссылкам, по которым был совершен клик или переход.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
7. X + Y
ul + p {
color: red;
}
Это так называемый смежный селектор. В этом случае каждый параграф следующий сразу после каждого элемента ul будет красного цвета.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
8. X > Y
#container > ul {
border: 1px solid black;
}
Различие между X Y и X > Y в том, что последний выберет только прямых потомков. Рассмотрим следующий пример:
<div id="container">
<ul>
<li>Элемент списка
<ul>
<li>Потомок</li>
</ul>
</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
</div>
Селектор #container > ul выберет только те элементы ul, которые являются прямыми потомками блока div с идентификатором container. Т.е. в данном случае этот селектор не отберет элемент ul, который является потомком первого элемента li.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
9. X ~ Y
ul ~ p {
color: red;
}
Эта комбинация сестринских (сиблинговых) элементов похожа на X + Y, но она менее строгая. Если в случае ul + p будут выбраны только первые элементы p, следующие за ul(т.е. наблюдается смежность в выборе), то рассматриваемый нами сейчас селектор более общий.
В нашем случае он отберет все элементы p, следующие за элементом ul.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
10. X[title]
a[title] {
color: green;
}
Здесь мы обращаемся к атрибуту селектора. В нашем примере будут окрашены в зеленый цвет только ссылки, имеющие атрибут title.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
11. X[href="foo"]
a[href="http://www.codeharmony.ru"] {
color: red;
}
Код выше позволит придать стиль всем ссылкам, атрибут href у которых равенhttp://www.codeharmony.ru. Эти ссылки будут красного цвета. Остальные ссылки не получат данного стиля.
Это работает хорошо, но это немного негибко. Что, если ссылка на самом деле ведет на Codeharmony.ru но, возможно, адрес указан, как codeharmony.ru а неhttp://www.codeharmony.ru? В таких случаях мы можем использовать основы регулярных выражений.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
12. X[href*="codeharmony"]
a[href*="codeharmony"] {
color: red;
}
Поехали дальше; это как раз то, что нам нужно. Звездочка означает, что искомое значение может находиться в любой части атрибута href. Таким образом, мы можем отобрать и http://www.codeharmony.ru и www.codeharmony.ru и codeharmony.ru.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
13. X[href^="http"]
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
Вы когда-нибудь думали о том, как на некоторых сайтах рядом с ссылками, ведущими на другие сайты (внешние по отношению к текущему) проставлены небольшие иконки, которые дают знать об этом пользователю? Это отличные "напоминалки" пользователю о том, что ссылка ведет на другой сайт.
Делается это с помощью символа ^ (карат). Он обычно используется в регулярных выражениях для обозначения начала строки. Если мы хотим отобрать ссылки, у которых атрибут href начинается с http, то мы можем использовать селектор из примера выше.
"Обратите внимание, что мы не ищем http://. Это необязательно и, к тому же, не учитывает ссылки по протоколу https://."
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
14. X[href$=".jpg"]
a[href$=".jpg"] {
color: red;
}
И снова мы используем регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением .jpg. Разумеется, такой подход не будет работать для картинок с расширениями .gif, .png и т.д.
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
15. X[data-*="foo"]
a[data-filetype="image"] {
color: red;
}
Как же мы можем охватить различные типы картинок? Мы можем создать, например, несколько селекторов:
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".png"] {
color: red;
}
Но это муторно и не элегантно. Другой вариант - это создать собственный атрибут data-filetype и добавить его к каждой ссылке, ведущей на картинку.
<a href="path/to/image.jpg" data-filetype="image">Ссылка</a>
Поступив таким образом, мы можем использовать код данного примера:
a[data-filetype="image"] {
color: red;
}
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
16. X[foo~="bar"]
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
Вот еще один интересный трюк, о котором не все знают. Знак ~ (тильда) позволяет нам выбирать атрибуты со значениями, разделенными пробелами, т.е.
<a href="path/to/image.jpg" data-info="external image">Кликни сюда</a>
Используя данный прием мы можем делать выборки с нужными нам комбинациями:
/* Отобрать атрибут data-info, который содержит значение external */
a[data-info~="external"] {
color: red;
}
/* и отобрать атрибут data-info, который содержит значение image */
a[data-info~="image"] {
border: 1px solid black;
}
Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera
17. X:checked
input[type=radio]:checked {
border: 1px solid black;
}
Этот псевдо-класс отбирает те элементы, которые были отмечены, например, радиокнопку или чекбокс.
Совместимость:
* IE9+
* Firefox
* Chrome
* Safari
* Opera
18. X:after
Данный псевдо-класс позволяет сгенерировать контент вокруг выбранного элемента.
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
Данный пример показывает, как с помощью псевдо-класса :after после блока с классом.clearfix создается пустая строка, после чего очищается. Хороший метод, когда невозможно применить overflow: hidden.
Совместимость:
* IE8+
* Firefox
* Chrome
* Safari
* Opera
19. X:hover
div:hover {
background: #e3e3e3;
}
Это Вы точно знаете. Официальное название звучит вроде "псевдо-класс, основанный на действии пользователя". Звучит страшновато, хотя на деле все просто. Хотите применить к элементу определенный стиль, когда на него наводится курсор мыши? Это оно самое!
"Помните, что старые версии IE не понимают этого псевдо-класса по отношению к чему-бы то ни было, кроме тэга а."
Часто данный прием используется для задания нижней границы для ссылок при наведении на них курсора:
a:hover {
border-bottom: 1px solid black;
}
"Мега-чит: border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;"
Совместимость:
* IE6+ (в IE6 работает только по отношению к ссылкам)
* Firefox
* Chrome
* Safari
* Opera
20. X:not(selector)
div:not(#container) {
color: blue;
}
Отрицание может быть также очень полезным. Предположим, я хочу выбрать все блокиdiv, кроме одного с идентификатором container. Для этого отлично подойдет код выше.
Если же мне нужно выбрать все элементы, кроме тэгов параграфов, то можно написать так:
*:not(p) {
color: green;
}
Совместимость:
* IE9+
* Firefox
* Chrome
* Safari
* Opera
21. X::pseudoElement
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
Псевдоэлементы можно использовать для придания стилей фрагменту элемента, например, первой строке или первой букве. Применяется только к блочным элементам.
Выбираем первую букву параграфа:
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
Этот кусок кода найдет все параграфы на странице и применит к первой букве каждого из них указанные стили. Часто это используется для создания эффекта "газетного заголовка".
Выбираем первую строку параграфа:
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
Аналогично предыдущему примеру, но в данном случае будет выбрана первая строка каждого параграфа.
Совместимость:
* IE6+
* Firefox
* Chrome
* Safari
* Opera
22. X:nth-child(n)
li:nth-child(3) {
color: red;
}
Помните времена, когда мы не имели возможности обратиться к конкретному порядковому элементу-потомку? Данный псевдо-класс решает эту проблему!
В качестве параметра принимается целое число. Если нужно выбрать 2-й элемент списка, нужно использовать конструкцию: li:nth-child(2).
Мы можем даже выбирать группы элементов-потомков. К примеру, чтобы выбрать каждый четвертый элемент списка, нужно использовать конструкцию: li:nth-child(4n).
Совместимость:
* IE9+
* Firefox
* Chrome
* Safari
23. X:nth-last-child(n)
li:nth-last-child(2) {
color: red;
}
Что, если у Вас есть большой неупорядоченный список и Вам нужно, к примеру, выбрать третий элемент с конца. Вместо того, чтобы писать li:nth-child(397), Вы можете воспользоваться псевдо-классом nth-last-child.
Совместимость:
* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera
24. X:nth-of-type(n)
ul:nth-of-type(3) {
border: 1px solid black;
}
Иногда бывают ситуации, когда вместо того, чтобы выбирать определенных потомков, нужно сделать выбор по типу элемента.
Представьте, что на странице есть пять неупорядоченных списков. Если Вам нужно применить стили только к третьему списку, но у него нет уникального идентификатора и иных "зацепок", то можно воспользоваться псевдо-классом nth-of-type(n). В коде выше показан способ придания стиля только третьему неупорядоченному списку.
Совместимость:
* IE9+
* Firefox 3.5+
* Chrome
* Safari
25. X:nth-last-of-type(n)
ul:nth-last-of-type(3) {
border: 1px solid black;
}
Да, для полноты картины есть и такой вариант. Так можно выбрать n-ный элемент определенного типа с конца.
Совместимость:
* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera
26. X:first-child
ul li:first-child {
border-top: none;
}
Этот псевдо-класс позволяет выбрать только первого потомка родительского элемента. Часто используется для удаления границ первого и последнего элементов списка.
К примеру, если у вас есть список рядов, каждый из которых имеет border-top и border-bottom, то последний и первый элементы списка будут немного выбиваться из общего строя.
Для устранения этого недостатка можно использовать данный псевдо-класс.
Совместимость:
* IE7+
* Firefox
* Chrome<
* Safari
* Opera
27. X:last-child
ul > li:last-child {
color: green;
}
В противоположность классу first-child, last-child выберет последний элемент родительского элемента.
Совместимость:
* IE9+
* Firefox
* Chrome
* Safari
* Opera
28. X:only-child
div p:only-child {
color: red;
}
Честно говоря, это довольно редко используемый псевдо-класс, но, тем не менее, он тоже бывает полезен. Он позволяет выбрать Вам те элементы, которые являются единственными потомками для своих родителей.
В нашем примере стиль будет применен только к параграфу, который является единственным потомком блока div.
Давайте рассмотрим для наглядности такую разметку:
<div><p>Здесь идет единственный в блоке параграф.</p></div> <div> <p>Здесь идет первый параграф в блоке.</p> <p>Здесь идет второй параграф в блоке.</p> </div>
В этом случае параграфы во втором блоке div выбраны не будут. Стиль будет применен только к параграфу из первого блока div.
Совместимость:
* IE9+
* Firefox
* Chrome
* Safari
* Opera
29. X:only-of-type
li:only-of-type {
font-weight: bold;
}
Этот псевдо-класс выбирает элементы, которые не имеют сестринских элементов в содержащем их контейнере. Например, давайте выберем все ul, которые содержат одинокие li.
Вы могли бы написать ul li, но этот способ выберет все элементы li. Единственный способ - использовать only-of-type.
ul > li:only-of-type {
font-weight: bold;
}
Совместимость:
* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera
30. X:first-of-type
Этот псевдо-класс позволяет отобрать первого сиблинга того же типа.
Чтобы лучше это понять, скопируйте в свой редактор следующий код:
<div>
<p>Здесь параграф.</p>
<ul>
<li>Элемент 1.</li>
<li>Элемент 2.</li>
</ul>
<ul>
<li>Элемент 3.</li>
<li>Элемент 4.</li>
</ul>
</div>
Сейчас, не читая дальше, попробуйте придать стиль только "элементу 2". Когда догадаетесь (либо сдадитесь), читайте дальше.
Решение 1
Есть много способов решить данную задачу. Рассмотри лишь некоторые из них. Начнем с использования first-of-type:
ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
Данный код гласит: "Найди первый неупорядоченный список на странице, затем найди только его прямых потомков, являющихся элементами li. После этого выбери только второй по порядку элемент li."
Решение 2
Другой вариант - воспользоваться смежным селектором:
p + ul li:last-child {
font-weight: bold;
}
Здесь мы находим ul, следующий непосредственно за тэгом параграфа, после чего находим самый последний его дочерний элемент.
Решение 3
Можно еще немного поиграть с селекторами и поступить таким образом:
ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}
Сейчас мы уже получаем первый элемент ul на странице, затем ищем самый первый элемент li, но начиная с конца.
Совместимость:
* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera
Вывод
Если Вы все еще пишете код, принимая во внимание существование IE6, то Вам нужно быть предельно осторожным при использовании новых селекторов. Но не делайте из этого оправдания, не говорите, что Вам это не нужно знать - этим Вы осложните жизнь самому себе.
Если Вы работаете с какими-либо JavaScript-библиотеками, например, с jQuery, то всегда старайтесь использовать "родные" CSS3 селекторы, когда это возможно. В этом случае Ваш код будет работать быстрее.
А как ты думаешь, при улучшении css, будет лучше нам? Надеюсь, что теперь ты понял что такое css и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Каскадные таблицы стилей CSS/ CSS3
Комментарии
Оставить комментарий
Каскадные таблицы стилей CSS/ CSS3
Термины: Каскадные таблицы стилей CSS/ CSS3