Селекторы. CSS селекторы – что это, зачем нужны и какими они бывают
Селектор
определяет, к какому элементу применять то или иное CSS-правило.
Базовые селекторы
Селекторы по элементу
Этот базовый селектор выбирает элемент, к которому будем применятся правило. Синтаксис:
элемент
Пример:
селектор input выберет все элементы используется для создания интерактивных элементов управления в веб-формах."> .
Селекторы по классу
Этот базовый селектор выбирает элементы, основываясь на значении их атрибута class . Синтаксис:
.имяКласса
Пример:
селектор .index выберет все элементы с соответствующим классом (который был определен в атрибуте class="index" или похожем).
Селекторы по идентификатору
Этот базовый селектор выбирает элементы, основываясь на значении их id атрибута. Не забывайте, что идентификатор должен быть уникальным, т. е. использоваться только для одного элемента в HTML-документе. Синтаксис:
#имяИдентификатора Пример:
селектор #toc выберет элемент с идентификатором toc (который был определен в атрибуте id="toc" или похожем).
Универсальный селектор
Этот базовый селектор выбирает все элементы. Он также существует в варианте для локального и глобального пространств имен. Syntax:
* ns|* *|* Example:
селектор * выберет все эелементы.
Селекторы по атрибуту
Этот базовый селектор выбирает элементы, основываясь на одном из их атрибутов и/или его значении. Синтаксис:
Пример:
селектор выберет все элементы с атрибутом autoplay (независимо от его значения).
Комбинаторы
Комбинатор "+" выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель. Синтаксис:
A + B Пример:
селектор ul + li выберет любой элемент, который находится непосредственно после элемента
.
Родственные селекторы
Комбинатор"~" выбирает элементы, которые находятся после указанного элемента, если у них общий родитель. Синтаксис:
A ~ B Пример:
p ~ span выберет все элементы , которые находятся после элемента определяет собой абзац текста.">
внутри одного родителя.
Дочерние селекторы
Комбинатор ">" выбирает элементы, которые являются дочерними непосредственно по отношению к указанному элементу. Синтаксис:
A > B Пример:
селектор ul > li выберет все элементы , которые находятся внутри элемента
element.
Вложенные селекторы
Комбинатор " " выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности). Синтаксис:
A B Пример:
селектор div span выберет все элементы , которые находятся внутри элемента ) является базовым контейнером для элементов основного потока (flow content). Он не влияет на контент или формат пока не стилизован, используя CSS. Являясь "> по своему существу не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя ">
.
Псевдоэлементы
Псевдоэлементы являются абстрактными, в отличие от элементов HTML, отвечающих за представление. Например, в HTML нет отдельных элементов для обозначения первой буквы или первой строчки текста, или маркера для неупорядоченного списка. Псевдоэлементы обозначают такие объекты и дают возможность стилизовать их с помощью CSS.
Псевдоклассы
Псевдоклассы позволяют выбирать элементы, основываясь на информации, которой нет в дереве элементов, например, состояние или другие данные, которые сложно вычленить другим способом. Например, они могут выбрать ссылку, которая была или не была ранее посещена.
Спецификации
Спецификация
Статус
". Итак, селектор - это элемент, к которому применяется объявление в правиле стиля.
Термины, используемые в описании правил CSS.
Рис.1. Обычное правило CSS.
Рис.2. Пример правила CSS.
Коротко про синтаксис записи правил CSS:
Объявление стиля в парвиле берётся в фигурные скобки - {}
Свойство и значение в объявлении разделяются двоеточием - :
В одном объявлении (в одной паре фигурных скобок) может быть указано сколько угодно пар свойство: значение
В конце каждой пары свойство: значение
ставится точка с запятой - ;
После последней пары свойство: значение
точку с запятой ставить не обязательно.
Синтаксис CSS не чувствителен пробельным символам (пробелы, табуляция, переносы сток).
Синтаксис CSS не чувствителен к регистру символов.
В качесте селекторов может выступать любой тег HTML, также есть селекторы класса либо id-селекторы. Рассмотрим всё по порядку.
Селекторы тегов
Как писалось ранее, любой тег может быть селектором в правиле CSS. Рассмотрим пример.
Синтаксис CSS
Привет!
Заголовок h2!
Кстати, можно группе селекторов задать одно объявление. Например, мы хотим чтобы теги заголовков
,
и
были синего цвета и выравнивались по центру блока. Для этого можно в селекторе перечислить эти теги, разделив их запятой. Вот пример кода:
Группирование в CSS
Привет h1!
Заголовок h2!
Такая запись стиля равносильна следующей группе правил:
Селекторы потомков
Можно назначать стилевые правила элементам в зависимости от того, вложен ли этот элемент в другой. Если один тег вложен в другой, то вложенный тег называется его потомком, а тег в который вложен потомок называется предком. Например, нужно задать абзацам
Внутри таблицы
красный цвет текста. Для решения такой задачи в селекторе элементы располагаются в порядке вложенности и разделяются пробелами. То есть наша задача решается так:
Селекторы потомков в CSS
Привет!
Текст абзаца в таблице.
Текст абзаца вне таблицы.
Все теги
Во всех таблицах документа будут отображать цвет красным цветом. Обратите внимание, то тег
Находящийся внутри тега
тоже отображает текст красным цветом.
На самом деле, вместо
можно было указать тег
, так как тег
всегда должен содержать тег
.
Для дальнейшего изучения селекторов CSS нужно освоить несколько несложных терминов относящихся к структуре документа.
Дерево документа (англ. document tree) - это схема построения HTML документа, показывающая порядок следования тегов и их вложенность друг в друга. Приведём пример такой схемы:
Дерево документа наглядно показывает связи в HTML документе, порядок следования тегов и их вложенность. Его используют разработчики для написания CSS стилей и JavaScript сценариев.
Вот пример кода, соответствующего схеме дерева элементов с рисунка 1.
Дерево документа.
Привет!
Текст абзаца и жирный.
Пункт 1.1
Пункт 1.2
Пункт 1.3
Пункт 2.1
Пункт 2.2
Пункт 2.3
Итак, между тегами HTML документа существуют связи. Они выражаются в вложенности тегов или порядке следования одного тега за другим. Эти связи называют родственные связи, а для обозначения различных типов родственных связей используют термины, такие как предок и потомок, родительский и дочерний элемент и другией "семейные" термины.
Теперь рассмотрим все типы связей.
Предки и потомки
Предки (ancestor) - элементы, которые содержат другие элементы, то есть элемент является предком для всех
вложенных в него элементов.
Потомки (descendant) - элементы, вложенные в другой элемент.
Селекторы потомков уже были рассмотрены выше.
Родители и дочерние элементы
Родитель (parent) - это предок первого уровня (непосредственный предок) для элемента. Дочерний элемент (child - ребёнок) - это потомок первого уровня. Родительский элемент может иметь неограниченное число детей.
В нашем дереве элементов у тега
следующие дочерние элементы:
,
,
и ещё один
Братские или сестринские элементы
Братские или сестринские элементы, (англ. siblings - братья и сестры), группа элементов имеющая общего родителя. Например, теги
,
,
и второй
Сестринские, так как у них общий родитель
.
Смежные элементы
Смежные элементы - это соседние братские элементы, то есть элементы имеющие общего родителя и идущие радом в дереве элементов. В нашем примере смежными элементами будут пары:
и
,
И
,
и
Теперь вернёмся к селекторам.
Дочерние селекторы
Когда нас интересуют не все потомки, а только потомки первого уровня, то есть дочерние элементы, в CSS используют дочерние селекторы. Для указания того, что правило стиля задано только к дочернему элементу, в селекторе используется символ ">".
Дочерние селекторы в CSS
Привет!
Текст абзаца в таблице.
Текст абзаца в таблице (в контейнере div).
Текст абзаца вне таблицы.
HTML-код этого примера полностью совпадает с кодом примера для селектора потомков, отличается только правило стиля. В результате применения дочернего селектора текст абзаца в таблице в контейнере
уже не красного цвета, так как для этого абзаца тег
родитель, а тег
предок.
Смежный (соседний) селектор
Селектор смежного элемента выбирает элемент, расположенный непосредственно за другим заданным элементом. Синтаксис этого селектора: селектор предыдущего элемента, знак "+" и за ним селектор выбираемого элемента.
Давайте рассмотрим реальный пример. В больших статьях, содержащих несколько разделов озаглавленных тегами
, желательно увеличить верхний отступ (свойство margin-top
). Отступ в 20px будет придавать тексту читабельности. Но вот в случае, если тег
идёт сразу после
, а это может быть в начале статьи, вержний отступ над тегом
будет лишним. Решить такую задачу можно при помощи селектора смежного элемента.
Вот html-код с примером работы селектора смежного элемента.
Смежный селектор в CSS
Привет!
Заголовок h2
Заголовок h2
Текст абзаца в про невероятные приключения.
Другое название смежных селекторов: соседние селекторы , тут можно прочитать подробнее про этот тип селекторов.
Родственный селекторы
Селектор родственного элемента похож на соседний селектор, только он распространяется на все указанные элементы, следующие за выбранным. Синтаксис родственного селектора: селектор предыдущего элемента, знак "~" (тильда) и за ним селектор выбираемых элементов.
Пример исользования сестринского селектора.
Селектор родственного элемента в CSS
Привет!
Текст абзаца №1 в про невероятные приключения.
Текст абзаца №2 в про невероятные приключения.
Текст div №1 в про невероятные приключения.
Текст абзаца №3 в про невероятные приключения.
Из примера видно, что после
тега текст абзаца №3 также был красным цветом. То есть, для присвоения стиля сестринские элементы не должны идти друг за другом.
Универсальный селектор
Если в селекторе правила CSS указан символ "*", то это правило применяется ко всем элементам страницы без исключения. Сложно представить себе случай, когда такое правило имеет смысл. Но есть один случай когда разработчик хочет "обнулить" все внешние и внутренние отступы. Тогда нужно использовать такой стиль:
* {
margin: 0;
padding: 0;
}
Но символ "*" можно использовать в составных селекторах.
Ul * {color: red}
Этот код назначает красный цвет тексту всех потомков элемента
.
Классы
Классы в CSS - самый расрпостранённый способ назначения стиля группе элементов. Класс применяют когда нужно задать разные стили элементам html-документа, созданным одним тегом. Синтаксис класса:
Тег.Имя класса
В селекторе стиля вначале пишется нужный тег, затем, через точку указывается имя класса. Имя класса должно начинаться с латинской буквы и может содержать в себе символы дефиса (-) и подчеркивания (_).
Пример, когда применяют классы: на сайте верхнее, боковое и нижнее меню создаётся при помощи тегов
, этим трём меню нужно создать три различных стиля. В CSS создают три класса ul.menu-top
, ul.menu
и ul.menu-bottom
.
В теле html-документа различные меню создаются с указанием класса в атрибуте class
:
class
="menu-top
"> ...
class
="menu
"> ...
class
="menu-bottom
"> ...
Классы - часто используемы инструмент CSS. Он удобен и, кроме того, делает код стиля более читаемым.
Можно создать класс, который будет применён к любому тегу. Для этого используется универсальный селектор.
*.Имя класса
{ свойство1
: значение
; свойство2
: значение
; ... }
Эту запись можно сократить, убрав символ "*".
Имя класса
{ свойство1
: значение
; свойство2
: значение
; ... }
ID селекторы (идентификаторы)
Идентификаторы - это типы селекторов, задающие уникальное имя элемента. Уникальное - значит встречающееся один раз в коде документа. При помощи идентификаторов можно создать стиль, но их основное предназначение - обращение к ним при помощи скриптов.
При описании идентификатора вначале указывается символ решётки (#), затем идет имя идентификатора.
#Имя идентификатора
{ свойство1
: значение
; свойство2
: значение
; ... }
Также, как и имя класса, имя идентификатора должно начинаться с латинской буквы и может содержать в себе символы дефиса (-) и подчеркивания (_).
Селекторы атрибутов
В HTML есть ряд тегов, которые в зависимости от атрибутов меняют своё действие. Например, тег
зависимости от значения атрибута type
может создавать поле формы, кнопку и другие элементы формы. Так что, если применять стиль к селектору input
, то он изменит все элементы формы, созданные этим тегом. Для точного управления такими элементами в CSS существуют селекторы атрибутов.
Селекторы атрибутов бывают разные. При помощи селекторов атрибутов можно установить стиль тегу, если у него есть определённый атрибут или если определённый атрибут тега имеет определённое значение.
Селекторы атрибутов - тема отдельной большой статьи. В рамках этой статьи мы лишь отметим, что они есть.
Псевдоклассы
Ещё одна большая тема в CSS - псевдоклассы. Приставка "псевдо" обозначает мнимость или ложность. Дело в том, это элементы html документа меняются в зависимости от действий пользователя. Например ссылка меняется в зависимости от наведения на неё курсора.
При помощи псевдоклассов создаются динамические эффекты на странице.
Синтаксис псевдокласса:
Селектор:псевдокласс
{ свойство1
: значение
; свойство2
: значение
; ... }
Можно применять псевдоклассы к селекторам идентификаторов или классов (ul.menu:hover
{color
: green
}).
Для новичков отмечу: если именам классов и идентификатов разработчик придумывает названия сам, то имена псевдоклассов в CSS - это зарезервированные слова.
Псевдокласс :active
выполняет правило стиля, если элемент активен. Например, на ссылку наведён курсор и произведён клик. Псевдокласс :hover
- курсор мыши просто наведён на элемент, например на ссылку.
Есть ещё много псевдоклассов. Полностью раскрыть тему псевдоклассов можно в рамках отдельной статьи. Тут мы коснулись её лишь поверхностно.
Псевдоэлементы
При помощи псевдоэлементов можно добавлять в контент страницы дополнительное содержимое, которого нет в исходном коде. Также можно изменять часть элемента, например первую букву в абзаце. То есть создаваль мнимый элемент html - первую букву со своим стилем отображения.
Псевдоэлементы CSS также обширная тема, для полного раскрытия которой требуется отдельная статья.
Синтаксис псевдоэлементов такой же, как и у псевдоклассов:
Селектор:псевдоэлемент
{ свойство1
: значение
; свойство2
: значение
; ... }
Сегодня мы рассмотрим такое понятие как селекторы CSS и как с их помощью мы можем сократить нашу разметку HTML, сделав её чище.
Селектор CSS – это тот элемент, к которому мы собираемся применять CSS свойства. Слово «селектор» говорит само за себя, оно обозначает выбор.
P {color: red}
div span {background: green}
ul li {list-style: none}
Селекторы class и id
В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:
текст в первом диве
текст во втором диве
текст в третьем диве
На что стоит обратить внимание:
Классы и идентификаторы можно присваивать любым (всем) тегам.
Каждый id уникален и не может повторяться в пределах одной страницы, в отличие от классов!
Один и тот же класс может быть присвоен любым тегам и может повторяться любое количество раз на странице.
Если мы хотим задать конкретному тегу несколько классов, мы просто задаём их через пробел.
Имена классов и идентификаторов могут совпадать, при этом кроме имени, ничего общего между ними не будет.
Как обратиться к классу или id в файле стилей (CSS)?
Смотрим пример:
#first {color: red;} /* обращаемся к id с именем first */
.second {color: blue;} /* обращаемся к классу с именем second */
#first .second {color: orange;} /* обращаемся к классу с именем second, ТОЛЬКО если он находится ВНУТРИ тега с идентификатором first */
.first .third {color: grey;} /* обращаемся к классу с именем third, ТОЛЬКО если он находится ВНУТРИ тега с классом first */
В нашем случае последние две инструкции не сработают, так как у нас нет классов, вложенных внутрь тегов с заданными атрибутами. Как вы могли заметить, чтобы обозначить, что мы обращаемся именно к id, нужно перед его именем без пробелов поставить знак решётки (#), если мы обращаемся к классу, то перед именем класса должны поставить точку (.).
Использование классов и идентификаторов очень удобно, но оно увеличивает нашу HTML разметку, в идеале (которого никогда нет) мы вовсе не должны их использовать, вместо них мы будем использовать комбинации и группировки селекторов, о них и будет вся остальная часть статьи, но! Но это совсем не означает, что вы должны полностью отказаться от использования классов и идентификаторов, просто вы должны иметь ввиду, что очень часто вместо создания нового class или id можно обойтись приёмами, описанными ниже и они также могут быть вполне удобны.
В чём различие class и id?
Кроме приведённых выше различий, стоит ещё отметить, что у свойств заданных id приоритет выше, чем у свойств, заданных классу. То есть, если мы напишем:
текст в диве
То цвет текста станет красным, несмотря на то, что класс находится ниже по коду и если бы у них был равный приоритет текст стал бы синим.
По синтаксису: в случаи с классом мы можем выбрать, у какого именно тега должен находиться данный класс, для этого после имени тега БЕЗ пробела мы должны обратиться к классу. Пример:
Myclass {свойства} /* применятся ко всем тегам, которые содержат класс myclass */
div.myclass {свойства} /* применятся только к тегам div, которые содержат класс myclass */
Для id это тоже будет работать, но такая запись лишена всякого смысла, так как id не может повторяться на странице, а значит достаточно просто объявлять id, без тега к которому оно относится:
текст
Вроде бы осталось только одно неоговорённое отличие, и оно касается темы, которую в ближайшем будущем я не планировал затрагивать на этом блоге – Javascript. Но всё же обязан доложить вам о нём: если вы хотите обратиться к элементу с помощью Javascript, то для этой цели очень удобным будет наличие id у этого элемента. Чтобы обратиться к элементу по его классу в Javascript нет такой встроенной возможности, вам придётся использовать вспомогательные функции + это не всегда кроссбраузерно.
Итог: id и class используем, но в меру, при этом всегда спрашивая себя, а можно ли здесь обойтись без них и насколько это целесообразно.
Родственный селектор
Div p {color: green;} /* Селектор по потомку */
p {color: red;} /* селектор по тегу */
Но как я уже писал в предыдущей статье, в первом случае CSS свойства применятся ко всем тегам p вложенным на ЛЮБУЮ глубину тега div. А что если мы хотим применить свойства только к прямым наследникам, то есть к первому уровню вложенности:
Третий уровень
Прямой наследник (первый уровень)
Второй уровень
Прямой наследник (первый уровень)
В таком случае мы должны использовать так называемый родственный селектор, для его обозначения используется угловая скобка, пробелы можете ставить, можете не ставить, я бы не советовал:
Div>p {color: blue;} /* только первый уровень вложенности */
div p {color: blue;} /* абсолютно все параграфы внутри div */
Универсальный селектор
С этим разобрались, у нас на вооружении уже 3 вида селекторов, теперь хочу вам рассказать о весьма необычном селекторе, который выделяется среди всех остальных – это так называемый универсальный селектор, который обозначается звёздочкой (*):
Кстати говоря, при работе с селекторами, как и при любой работе связанной с вёрсткой макета очень удобно использовать просмотр элементов страницы. Если вы ещё не в курсе таких вещей как Opera Dragonfly, Firebug и веб-инспекторы в целом, то вам без преувеличений срочно нужно прочесть статью по ссылке выше! А кто уже использовал подобные вещи, прошу дальше за мной.
Псевдо-классы
В отличие от классов, псевдо-классы не нужно указывать в HTML разметке, они сами вычисляются браузером. У нас есть 4 статических псевдо-класса и 3 динамических псевдо-класса, без учёта CSS 3, о нём ближе к концу. К статическим относятся (:first-child, :link, :visited, : lang()):
Прямой наследник (первый уровень)
Третий уровень
Прямой наследник (первый уровень)
Второй уровень
Прямой наследник (первый уровень)
Результат:
Естественно можно комбинировать селекторы как захотим, например:
Div>span p:first-child {color: green;} /*сработает, если p является первым ребёнком своего родителя и находится внутри тега span, который является прямым потомком тега div */
Название представленного выше псевдо-класса говорит само за себя first-child - первый ребёнок.
Следующие два статических псевдо-класса применяются только к тегу гиперссылки (:link, :visited), они применяют CSS свойства в зависимости от того, посещалась данная ссылка конкретным пользователем или нет:
A:link {color: blue;} /* у не посещённых ссылок задаём синий цвет, и по умолчанию они подчёркнуты */
a:visited {color: green; text-decoration: none;} /* у посещённых ссылок текст будет красным, убираем подчёркивание */
Псевдо-класс:lang() используется для задания разного стиля оформления в зависимости от языка. В скобочках указывается язык, к которому нужно применить оформление. Это можно использовать, например, для задания разных стилей кавычек в цитатах:
Q:lang(de) {quotes: "\201E" "\201C";} /* кавычки для немецкого языка */
q:lang(en) {quotes: "\201C" "\201D";} /* кавычки для английского языка */
q:lang(ru) {quotes: "\00AB" "\00BB";} /* кавычки для русского языка */
Это, пожалуй, единственный из всех возможных видов селекторов, который я никогда не использовал.
Динамические псевдо-классы
Динамические псевдо-классы – это:active, :hover, :focus. Динамические псевдо-классы срабатывают по определённому действию на странице, они работают для всех тегов, а не только для ссылок как многие думают и даже утверждают в своих блогах! Рассмотрим их применение:
P:active {background: red;} /* стиль, который применится к тегу по нажатию на него (клику мышью) */
input:focus {width: 400px;} /* стиль, который применится к элементу, на котором в данный момент фокус (работает, к примеру, для текстовых полей ввода: textarea, input). В данном случае по взятию в фокус, ширина input станет равна 400 пикселей, удобно использовать для красивого эффекта удлинения поля по клику. */
div:hover {background: green;} /* срабатывает по наведению курсора на элемент, в основном применяется для создания красивого эффекта при наведении на ссылки. */
Примените данные стили к нашему примеру выше, и вы сами всё увидите.
Смежные селекторы
Смежные селекторы – это ближайший сосед ниже по коду, не ребёнок! Очень удобный селектор:
текст в параграфе первого div
текст в параграфе ВНЕ div
текст в параграфе второго div
текст в спане
снова параграф вне div
Результат:
Обобщённые смежные селекторы
Обобщённые смежные селекторы действуют точно также как и обычные смежные селекторы, за исключением того, что свойства применяются не только к первому соседу ниже, а ко всем заданным соседям ниже:
текст в диве
параграф
параграф
параграф
текст в спане
параграф
параграф
параграф в диве
параграф в диве
текст в спане
параграф
Результат:
Селекторы атрибутов
Селекторы атрибутов позволяют нам обратиться к тегам, имеющим необходимый нам атрибут или даже конкретное его значение:
P {свойства} /* применить ко всем тегам p, у которых есть атрибут align */
p {свойства} /* где значение атрибута align равно center */
p {свойства} /* где значение атрибута align начинается на center */
p {свойства} /* где значение атрибута align содержит center */
p {свойства} /* где site может находиться среди других слов, отделенных пробелами () */
p {свойства} /* где значение атрибута class состоит только из слова site или начинается им, после чего ставится дефис и пишется остальная часть значения ( или ) */
p {свойства} /* где значение атрибута align заканчивается на center */
CSS 3 псевдо-классы
Вы уже ознакомились со всеми основными селекторами и вам на первых парах этого должно хватить с горкой. Однако в CSS 3 появилось множество новых псевдо-классов, теперь мы можем брать не только первого ребёнка, но и любого другого по счёту, можем идти от обратного, брать не первого, а последнего ребёнка и так далее и тому подобное. Всё это очень удобно и практично, разве что у вас могут возникнуть проблемы со старыми версиями IE. Давайте соберём все силы в кулак и пробежимся по всем оставшимся селекторам, чтобы потом уже вы могли иметь их ввиду при вёрстке собственного макета.
:last-child – аналог:first-child, только берёт не первого, а последнего ребёнка.
:only-child – сработает, если элемент (тег) является единственным ребёнком.
:only-of-type - сработает, если элемент (тег) является единственным ребёнком своего типа.
:nth-child() – обращается к потомкам по их порядковым номерам, можно обращаться ко всем чётным или нечётным (even или odd) числам. Например:
параграф
параграф
параграф
текст в спане
параграф
параграф
параграф
параграф
параграф
параграф
Результат:
:nth-last-child – работает также как и предыдущий, но отчёт начинается с конца.
:first-of-type – первый ребёнок своего типа в рамках прямого родителя.
:last-of-type – последний ребёнок своего типа в рамках прямого родителя.
:empty – сработает для тех тегов, внутри которых нет ни одного символа (без текста).
:not() – делает исключение для заданных элементов. Пример:
параграф с классом roll
параграф
параграф
параграф с классом roll
Результат:
Управление полями, формами, переключателями и флажками в CSS
:enabled - применяется к доступным элементам интерфейса как формы, кнопки, переключатели и тд. По умолчанию все элементы интерфейса являются доступными.
:disabled - применяется к заблокированным элементам интерфейса как кнопки, формы и так далее. Элементы интерфейса являются заблокированными, если к ним в HTML добавить атрибут disabled или в XHTML disabled=”disabled”.
:checked – применяется к элементам интерфейса типа флажки (radio) и переключатели (checkbox), когда они находятся во включённом положении.
Псевдо-элементы
Псевдо-элементы, аналогично псевдо-классам вычисляются браузером автоматически, нам об этом заботиться не нужно. Чтобы не путать псевдо-элементы с псевдо-классами в спецификации CSS 3 было решено использовать двойное двоеточие, вместо одинарного, как было в CSS 2. Поэтому в Интернете вы можете встретить псевдо-элементы как с одинарным двоеточием так и с двойным – и тот и тот вариант верен. Однако для лучшей совместимости с IE рекомендуют использовать одинарное двоеточие.
:first-line – первая строка внутри блочного или табличного элемента.
:first-letter – первая буква внутри блочного элемента.
Итоги: теперь вы знаете и можете использовать всю мощь каскадных таблиц стилей, однако это не значит, что нужно сразу ринуться верстать макеты сайтов, используя как можно больше изученных сегодня селекторов, псевдо-классов и псевдо-элементов. Я перечислил все возможные инструменты, а вы должны выбрать лишь самое нужное для себя.
Преимущества оптимизации HTML за счёт CSS
Суть всего написанного выше отчасти заключается в том, чтобы отказаться от повсеместного использования атрибутов class и id в HTML, тем самым возложив всё на плечи могучих таблиц стилей.
Внешние файлы стилей, как и внешние файлы Javascript отлично кэшируются, а это значит, что зайдя первый раз на любую страницу вашего сайта, браузер пользователя запоминает эти файлы и более их не скачивает, в отличие от самой страницы сайта, то есть вашей HTML разметки, картинок и текста, которую браузер загружает снова и снова. Тоже самое касается и поисковых систем, им вообще нет дела до ваших внешних файлов, но вот до объёма и содержания вашей HTML разметки им дело есть. Поисковым системам приходится сканировать всю структуру страницы и в ваших же интересах помочь им в этом, сосредоточить их усилия на контенте, а не на громоздкой стене разметки состоящей из кучи классов и идентификаторов или того хуже – Javascript обработчиков событий и CSS стилей прямо в атрибутах тегов (и такое до сих пор бывает).
Вы можете со мной поспорить, мол, мы можем заставить клиентский браузер скачивать себе в локальную среду все подключаемые файлы, картинки, закэшировать всю страницу целиком и так далее и тому подобное. На таком фоне подобная мелочь совсем теряется, но так или иначе максимально сократив HTML разметку, вы только выигрываете, при этом ничего не потеряв, кроме возможной привычки.
Подытожим: благодаря оптимизации и сокращению HTML мы имеем совсем небольшой выигрыш в скорости загрузки сайта и в SEO (поисковой оптимизации), а также более чистый код.
Селекторы Селекторы в языке CSS
Впервые, мы познакомились с селекторами CSS
в девятом уроке учебника по CSS. В этой статье мы изучим селекторы более подробно, а так же рассмотрим другие виды селекторов CSS.
Селектор
(от англ. selector) — сортировка, выборка. Под селекторами, в языке CSS понимается способ выборки элементов (тегов) страницы.
Как мы знаем из , схема CSS-кода выглядит следующим образом:
Селектор {
CSS-свойство: значение;
CSS-свойство: значение;
... и т.д.
}
Виды CSS-селекторов
Всего существует три основных вида селекторов и их различные взаимоотношения. Помимо этого существует универсальный селектор, селекторы атрибутов, селекторы атрибутов и значений и их выборка с помощью регулярных выражений.
Обычно, при создании сайта, используют лишь основные селекторы.
Основные виды селекторов CSS
1. Селектор тега
— выбор элемента страницы по имени его тега имяТега { }
2. Селектор class
— выбор элемента страницы по имени его класса.имяКласса { }
3. Селекторы id
— выбор элемента страницы по имени его уникального идентификатора #имяУникальногоИдентификатора { }
Взаимоотношения между селекторами CSS
Взаимоотношения между селекторами, это когда между ними в CSS-коде ставят какой-либо знак: пробел, запятую, угловую скобку и т.д. Таким образом, можно выбрать какой-либо элемент на странице более точечно.
1. Контекстные селекторы
— выбор элементов потомков селектор селектор { } (между селекторами ставят пробел).
2. Дочерние селекторы
— выбор дочерних элементов селектор > селектор { } (между селекторами ставят знак больше).
3. Соседние селекторы
— выбор соседних (братских, сестринских) элементов селектор + селектор { } (между селекторами ставят знак плюс).
Если что не понятно, не переживайте, каждый селектор и их взаимоотношения мы рассмотрим отдельно, в статьях посвященных только им, вот только допишу эти статьи 🙂
Селекторы атрибутов и значений
Селекторы атрибутов и значений
— выбирают элементы по их атрибуту или атрибуту и значению.
1. Селектор атрибута
— выбор элемента по имени атрибута [атрибут] { }
2. Селектор атрибута и значения
— выбор элемента по имени его атрибута и значения [атрибут = "значение"] { }
Универсальный селектор
В CSS-коде, универсальный селектор
записывают как символ звёздочка * Универсальный селектор необходим для того,
чтобы задать CSS-свойства сразу всем элементам страницы. Обычно его используют для того чтобы обнулить отступы у элементов, пример:
* { margin:0; padding:0; }
Отступы у всех элементов страницы равны 0.
Группирование селекторов
Группирование селекторов
— выбор нескольких селекторов и назначение им определённых CSS-свойств, схема:
Селектор, селектор { }
Между селекторами ставят запятую.
Данный материал посвящен основам оформления стилей на интернет-ресурсе при помощи селекторов.
Селекторы в CSS используются для определения конкретного элемента в html-странице, для которого надо применить или изменить стиль CSS.
Виды селекторов в CSS
Селектор по элементам
Для придания необходимого CSS-стиля в данном случае в качестве селектора записывается название html элемента. Например, достаточно прописать нужный стиль для заголовка H1, после чего данные заголовки примут требуемый нам вид. Вот таким будет код:
H1
{ font-size:
11pt; }
Часто бывают случаи, когда надо сделать заголовки в разных стилях. Здесь для решения этой проблемы поможет селектор по классу.
Селектор по классам
Селектор по классу является универсальным в CSS. Записать его можно следующим образом: перед названием класса пишем точку, а уже потом в фигурных скобочках указываем необходимый нам стиль:
Пример использования селектора по классу. Применим данный стиль к заголовку H1 в html странице:
Заголовок страницы
Из примера выше видно, что применяется атрибут "class" с заданным названием CSS стиля "red
". Другой пример. В html части пишем:
Данный заголовок синего цвета, так как к нему применен соответствующий класс
id
".
В html документе это будет выглядеть так:
Зададим стиль для данного параграфа
В документе CSS:
p#newstyle
{ color: blue; font-size: 12px;}
В результате, для данного параграфа будет применен шрифт синего цвета и размером 12px.
Контекстный селектор
Не менее нужным компонентом является контекстный селектор
. Например, на сайте возникла необходимость заголовки "H1", заключенные тегом bold
выделить красным цветом:
H1 bold
{ color:red
; }
Как видим, в первую очередь пишется заголовок H1, ставится пробел, тег bold
а затем в скобочках заданный нами стиль. Выразить словами это можно так: "При наличии внутри заголовка H1 тега bold текст должен быть красного цвета".
Этим способом можно задать также стили для пунктов маркированных списков, таблиц и даже их ячеек, причем с разным уровнем вложенности.