Css selectors


Что такое селекторы

Повторим немного то, что уже раскрывалось в теме «Синтаксис CSS». Итак, селектор — это элемент, к которому применяется объявление в правиле стиля.

Термины, используемые в описании правил CSS.

Правило CSS
Рис.1. Обычное правило CSS.

Пример правила CSS:

Пример правила CSS
Рис.2. Пример правила CSS.

Коротко про синтаксис записи правил CSS:

  • Объявление стиля в парвиле берётся в фигурные скобки — {}
  • Свойство и значение в объявлении разделяются двоеточием — :
  • В одном объявлении (в одной паре фигурных скобок) может быть указано сколько угодно пар свойство: значение
  • В конце каждой пары свойство: значение ставится точка с запятой — ;
  • После последней пары свойство: значение точку с запятой ставить не обязательно.
  • Синтаксис CSS не чувствителен пробельным символам (пробелы, табуляция, переносы сток).
  • Синтаксис CSS не чувствителен к регистру символов.

В качесте селекторов может выступать любой тег HTML, также есть селекторы класса либо id-селекторы. Рассмотрим всё по порядку.

Селекторы тегов

Как писалось ранее, любой тег может быть селектором в правиле CSS. Рассмотрим пример.

<html> <head> 	<title>Синтаксис CSS</title> <style> 	h1 { color: blue; font-size: 16pt; text-align: center; } </style> </head> <body> 	<h1>Привет!</h1> 	<h2>Заголовок h2!</h2> </body> </html>

Кстати, можно группе селекторов задать одно объявление. Например, мы хотим чтобы теги заголовков <h1>, <h2> и <h3> были синего цвета и выравнивались по центру блока. Для этого можно в селекторе перечислить эти теги, разделив их запятой. Вот пример кода:

<html> <head> 	<title>Группирование в CSS</title> <style> 	h1, h2, h3 { color: blue; text-align: center; } </style> </head> <body> 	<h1>Привет h1!</h1> 	<h2>Заголовок h2!</h2> </body> </html>  

Такая запись стиля равносильна следующей группе правил:

<style> 	h1 { color: blue; text-align: center; } 	h2 { color: blue; text-align: center; } 	h3 { color: blue; text-align: center; } </style>

Селекторы потомков

Можно назначать стилевые правила элементам в зависимости от того, вложен ли этот элемент в другой. Если один тег вложен в другой, то вложенный тег называется его потомком, а тег в который вложен потомок называется предком. Например, нужно задать абзацам <p> внутри таблицы <table> красный цвет текста. Для решения такой задачи в селекторе элементы располагаются в порядке вложенности и разделяются пробелами. То есть наша задача решается так:

<!DOCTYPE html> <html> <head>  <title>Селекторы потомков в CSS</title> <style>  table p { color: red;} </style> </head> <body> <table><tr><td>  <h1>Привет!</h1>  <p>Текст абзаца в таблице.</p>  <div><p>Текст абзаца в таблице (в контейнере div).</p></div>  </td></tr></table>  <p>Текст абзаца вне таблицы.</p> </body> </html>

Все теги <p> во всех таблицах документа будут отображать цвет красным цветом. Обратите внимание, то тег <p> находящийся внутри тега <div> тоже отображает текст красным цветом.

На самом деле, вместо <table> можно было указать тег <td>, так как тег <table> всегда должен содержать тег <td>.

Для дальнейшего изучения селекторов CSS нужно освоить несколько несложных терминов относящихся к структуре документа.

Дерево документа


Дерево документа (англ. document tree) — это схема построения HTML документа, показывающая порядок следования тегов и их вложенность друг в друга. Приведём пример такой схемы:

Дерево документа
Дерево документа.

Дерево документа наглядно показывает связи в HTML документе, порядок следования тегов и их вложенность. Его используют разработчики для написания CSS стилей и JavaScript сценариев.

Вот пример кода, соответствующего схеме дерева элементов с рисунка 1.

<!DOCTYPE html> <html> <head>  <title>Дерево документа.</title> <style>  p { color: red;} </style> </head> <body> <h1>Привет!</h1> <p>Текст <em>абзаца</em> и <strong>жирный</strong>.</p> <ul> <li> <ul> 	<li>Пункт 1.1</li> 	<li>Пункт 1.2</li> 	<li>Пункт 1.3</li> </ul> </li> <li> <ol> 	<li>Пункт 2.1</li> 	<li>Пункт 2.2</li> 	<li>Пункт 2.3</li> </ol> </li> </ul> <p>Текст абзаца с <a href="/">ссылкой</a>.</p> </body> </html>  

Итак, между тегами HTML документа существуют связи. Они выражаются в вложенности тегов или порядке следования одного тега за другим. Эти связи называют родственные связи, а для обозначения различных типов родственных связей используют термины, такие как предок и потомок, родительский и дочерний элемент и другией «семейные» термины.

Теперь рассмотрим все типы связей.

Предки и потомки

Предки (ancestor) — элементы, которые содержат другие элементы, то есть элемент является предком для всех вложенных в него элементов.

Потомки (descendant) — элементы, вложенные в другой элемент.

Селекторы потомков уже были рассмотрены выше.

Родители и дочерние элементы

Родитель (parent) — это предок первого уровня (непосредственный предок) для элемента. Дочерний элемент (child — ребёнок) — это потомок первого уровня. Родительский элемент может иметь неограниченное число детей.

В нашем дереве элементов у тега <body> следующие дочерние элементы: <h1>, <p>, <ul> и ещё один <p>.

Братские или сестринские элементы

Братские или сестринские элементы, (англ. siblings — братья и сестры), группа элементов имеющая общего родителя. Например, теги <h1>, <p>, <ul> и второй <p> — сестринские, так как у них общий родитель <body>.


Смежные элементы

Смежные элементы — это соседние братские элементы, то есть элементы имеющие общего родителя и идущие радом в дереве элементов. В нашем примере смежными элементами будут пары: <h1> и <p>, <p> и <ul>, <ul> и <p>.

Теперь вернёмся к селекторам.

Дочерние селекторы

Когда нас интересуют не все потомки, а только потомки первого уровня, то есть дочерние элементы, в CSS используют дочерние селекторы. Для указания того, что правило стиля задано только к дочернему элементу, в селекторе используется символ «>».

<!DOCTYPE html> <html> <head> 	<title>Дочерние селекторы в CSS</title> <style> 	td > p { color: red;} </style> </head> <body> <table><tr><td> 	<h1>Привет!</h1> 	<p>Текст абзаца в таблице.</p> 	<div><p>Текст абзаца в таблице (в контейнере div).</p></div> </td></tr></table> <p>Текст абзаца вне таблицы.</p> </body> </html>

HTML-код этого примера полностью совпадает с кодом примера для селектора потомков, отличается только правило стиля. В результате применения дочернего селектора текст абзаца в таблице в контейнере <div> уже не красного цвета, так как для этого абзаца тег <div> родитель, а тег <td> предок.

Читайте подробнее: дочерние селекторы.

Смежный (соседний) селектор


Селектор смежного элемента выбирает элемент, расположенный непосредственно за другим заданным элементом. Синтаксис этого селектора: селектор предыдущего элемента, знак «+» и за ним селектор выбираемого элемента.

Давайте рассмотрим реальный пример. В больших статьях, содержащих несколько разделов озаглавленных тегами <h2>, желательно увеличить верхний отступ (свойство margin-top). Отступ в 20px будет придавать тексту читабельности. Но вот в случае, если тег <h2> идёт сразу после <h1>, а это может быть в начале статьи, вержний отступ над тегом <h2> будет лишним. Решить такую задачу можно при помощи селектора смежного элемента.

Вот html-код с примером работы селектора смежного элемента.

<!DOCTYPE html> <html> <head> 	<title>Смежный селектор в CSS</title> <style> 	h2 { margin-top: 50px; } 	h1+h2 { margin-top: 0px; } </style> </head> <body> <h1>Привет!</h1> <h2>Заголовок h2</h2> <p>Текст абзаца в про невероятные приключения.</p> <h2>Заголовок h2</h2> <p>Текст абзаца в про невероятные приключения.</p> </body> </html>

Другое название смежных селекторов: соседние селекторы, тут можно прочитать подробнее про этот тип селекторов.

Родственный селекторы

Селектор родственного элемента похож на соседний селектор, только он распространяется на все указанные элементы, следующие за выбранным. Синтаксис родственного селектора: селектор предыдущего элемента, знак «~» (тильда) и за ним селектор выбираемых элементов.

Пример исользования сестринского селектора.

 

<!DOCTYPE html> <html> <head> <title>Селектор родственного элемента в CSS</title> <style> h1~p { color: red; } </style> </head> <body> <h1>Привет!</h1> <p>Текст абзаца №1 в про невероятные приключения.</p> <p>Текст абзаца №2 в про невероятные приключения.</p> <div>Текст div №1 в про невероятные приключения.</div> <p>Текст абзаца №3 в про невероятные приключения.</p> </body> </html>

Из примера видно, что после <div> тега текст абзаца №3 также был красным цветом. То есть, для присвоения стиля сестринские элементы не должны идти друг за другом.

Читайте подробнее: родственные селекторы.

Универсальный селектор

Если в селекторе правила CSS указан символ «*», то это правило применяется ко всем элементам страницы без исключения. Сложно представить себе случай, когда такое правило имеет смысл. Но есть один случай когда разработчик хочет «обнулить» все внешние и внутренние отступы. Тогда нужно использовать такой стиль:

* { 	margin: 0; 	padding: 0; }  

Но символ «*» можно использовать в составных селекторах.

ul * {color: red}

Этот код назначает красный цвет тексту всех потомков элемента <ul>.

Классы

Классы в CSS — самый расрпостранённый способ назначения стиля группе элементов. Класс применяют когда нужно задать разные стили элементам html-документа, созданным одним тегом. Синтаксис класса:

Тег.Имя класса { свойство1: значение; свойство2: значение; … }

В селекторе стиля вначале пишется нужный тег, затем, через точку указывается имя класса. Имя класса должно начинаться с латинской буквы и может содержать в себе символы дефиса (-) и подчеркивания (_).

Пример, когда применяют классы: на сайте верхнее, боковое и нижнее меню создаётся при помощи тегов <ul>, этим трём меню нужно создать три различных стиля. В CSS создают три класса ul.menu-top, ul.menu и ul.menu-bottom.

В теле html-документа различные меню создаются с указанием класса в атрибуте class:

<ul class=»menu-top»> … </ul>
<ul class=»menu»> … </ul>
<ul class=»menu-bottom»> … </ul>

Классы — часто используемы инструмент CSS. Он удобен и, кроме того, делает код стиля более читаемым.

Можно создать класс, который будет применён к любому тегу. Для этого используется универсальный селектор.

*.Имя класса { свойство1: значение; свойство2: значение; … }

Эту запись можно сократить, убрав символ «*».

.Имя класса { свойство1: значение; свойство2: значение; … }

Читайте подробнее: классы CSS.

ID селекторы (идентификаторы)


Идентификаторы — это типы селекторов, задающие уникальное имя элемента. Уникальное — значит встречающееся один раз в коде документа. При помощи идентификаторов можно создать стиль, но их основное предназначение — обращение к ним при помощи скриптов.

При описании идентификатора вначале указывается символ решётки (#), затем идет имя идентификатора.

#Имя идентификатора { свойство1: значение; свойство2: значение; … }

Также, как и имя класса, имя идентификатора должно начинаться с латинской буквы и может содержать в себе символы дефиса (-) и подчеркивания (_).

Читайте подробнее: CSS: идентификаторы id.

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

В HTML есть ряд тегов, которые в зависимости от атрибутов меняют своё действие. Например, тег <input> зависимости от значения атрибута type может создавать поле формы, кнопку и другие элементы формы. Так что, если применять стиль к селектору input, то он изменит все элементы формы, созданные этим тегом. Для точного управления такими элементами в CSS существуют селекторы атрибутов.

Селекторы атрибутов бывают разные. При помощи селекторов атрибутов можно установить стиль тегу, если у него есть определённый атрибут или если определённый атрибут тега имеет определённое значение.

Селекторы атрибутов — тема отдельной большой статьи. В рамках этой статьи мы лишь отметим, что они есть.

Псевдоклассы


Ещё одна большая тема в CSS — псевдоклассы. Приставка «псевдо» обозначает мнимость или ложность. Дело в том, это элементы html документа меняются в зависимости от действий пользователя. Например ссылка меняется в зависимости от наведения на неё курсора.

При помощи псевдоклассов создаются динамические эффекты на странице.

Синтаксис псевдокласса:

Селектор:псевдокласс { свойство1: значение; свойство2: значение; … }

Можно применять псевдоклассы к селекторам идентификаторов или классов (ul.menu:hover {color: green}).

Для новичков отмечу: если именам классов и идентификатов разработчик придумывает названия сам, то имена псевдоклассов в CSS — это зарезервированные слова.

Псевдокласс :active выполняет правило стиля, если элемент активен. Например, на ссылку наведён курсор и произведён клик. Псевдокласс :hover — курсор мыши просто наведён на элемент, например на ссылку.

Есть ещё много псевдоклассов. Полностью раскрыть тему псевдоклассов можно в рамках отдельной статьи. Тут мы коснулись её лишь поверхностно.

Псевдоэлементы

При помощи псевдоэлементов можно добавлять в контент страницы дополнительное содержимое, которого нет в исходном коде. Также можно изменять часть элемента, например первую букву в абзаце. То есть создаваль мнимый элемент html — первую букву со своим стилем отображения.

Псевдоэлементы CSS также обширная тема, для полного раскрытия которой требуется отдельная статья.

Синтаксис псевдоэлементов такой же, как и у псевдоклассов:

Селектор:псевдоэлемент { свойство1: значение; свойство2: значение; … }

komotoz.ru

CSS selectors

Начнем разбираться. Откройте любой учебник CSS, как минимум один раздел в нем будет посвящен видам селекторов. В этом нет ничего удивительного, поскольку они являются одним из самых удобных способов управления контентом страницы. С их помощью можно взаимодействовать с абсолютно любыми элементами HTML. Сейчас существует 7 видов селекторов:

  • для тегов;
  • для классов;
  • для ID;
  • универсальные;
  • атрибутов;
  • для взаимодействия с псевдоклассами;
  • для управления псевдоэлементами.

Синтаксис прост. Чтобы научиться использовать CSS selectors, достаточно прочитать о них. Какой вариант лучше выбрать для контроля контента в вашем случае? Попробуем разобраться.

Селекторы тэгов

Это максимально простой вариант, который не требует особых знаний для записи. Чтобы управлять тегами, нужно использовать их название. Предположим, что «шапка» вашего сайта обернута в тег <header>. Для управления ею в CSS нужно использовать селектор header {}.

Достоинства — простота использования, универсальность.

Недостатки — полное отсутствие гибкости. В вышеописанном примере будут выбраны сразу все теги header. А что если нужно управлять только одним?

Селекторы класса

Самый распространенный вариант. Предназначен для управления тегами с атрибутом class. Предположим, в вашем коде есть три блока <div>, каждому из которых нужно задать определенный цвет. Как это сделать? Стандартные CSS selectors по тегам не подойдут, они указывают параметры для всех блоков сразу. Выход прост. Назначьте элементам класс. Например, первый div получил class=’red’, второй – class=’blue’, третий – class=’green’. Теперь их можно выбрать, используя таблицы CSS.

Синтаксис таков: указываем точку («.»), после которой пишем название класса. Чтобы управлять первым блоком, используем конструкцию .red. Вторым – .blue и так далее.

Важно! Рекомендуется использовать понятные значения атрибута class. Дурным тоном считается использование транслита (например, krasiviy-blok) или случайных комбинаций букв/цифр (ojfh834871). В таком коде вы обязательно запутаетесь, не говоря уже о том, с какими трудностями придется столкнуться тем, кто будет заниматься проектом после вас. Оптимальный вариант – использовать какую-нибудь методологию, вроде БЭМ.

Достоинства — довольно высокая гибкость.

Недостатки — у нескольких элементов может быть один и тот же класс, а значит, они будут редактироваться одновременно. Проблема решается использованием методологии, а также наследованием препроцессоров. Обязательно освойте less, sass или какой-нибудь другой препроцессор, они сильно упростят работу.

Селектор по ID

Насчет этого варианта мнения верстальщиков и программистов неоднозначны. Некоторые учебники CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Однако многие специалисты активно расставляют их по всей разметке. Решать вам. Синтаксис таков: символ решетки («#»), затем имя блока. Например, #red.

ID отличается от класса по нескольким параметрам. Во-первых, на странице не может быть двух одинаковых ID. Им назначаются уникальные имена. Во-вторых, такой селектор обладает более высоким приоритетом. Это значит, что если вы зададите блоку класс red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим.

Достоинства — можно управлять конкретным элементом, не обращая внимания на стили для тегов и классов.

Недостатки — легко запутаться в большом количестве ID и class.

Важно! Если вы пользуетесь методологией БЭМ (или ее аналогами), ID вам, в общем-то, не нужны. Такая техника верстки подразумевает использование уникальных классов, что гораздо удобнее.

Универсальный селектор

Синтаксис: знак зведочки («*») и фигурные скобки, т. е. *{}.

Используется для назначения определенных атрибутов сразу всем элементам страницы. Когда это может пригодиться? Например, если вы хотите задать странице свойство box-sizing: border-box. Может использоваться не только для управления всеми компонентами документа, но и для контроля всеми дочерними элементами определенного блока, например, div *{}.

Достоинства — можно управлять большим количеством элементов одновременно.

Недостатки — недостаточно гибкий вариант. Вдобавок, использование этого селектора в некоторых случаях замедляет работу страницы.

По атрибутам

Дают возможность управлять элементом с конкретным атрибутом. Например, у вас есть несколько тегов input с разным атрибутом type. Один из них – text, второй – password, третий – number. Конечно, можно задать каждому классы или ID, но это не всегда удобно. CSS selectors по атрибутам дают возможность указать значения для определенных тегов с максимальной точностью. Например, вот так:

input[type=’text’]{}

Этот селектор атрибутов выберет все input с типом text.

Инструмент довольно гибкий, его можно использовать с любыми тегами, у которых возможно наличие атрибутов. Но и это еще не все! В спецификации CSS есть возможность управлять элементами даже с большим удобством!

Представим, что на вашей странице есть input с атрибутом placeholder=“Введите имя“ и input placeholder=“Введите пароль“. Их также можно выбрать с помощью селектора! Для этого используется следующая конструкция:

input[placeholder=“Введите имя“]{} или input [placeholder=“Введите пароль“]

Возможна более гибкая работа с атрибутами. Допустим, у вас есть несколько тегов с похожими атрибутами title (скажем, «каспийский» и «каспийская»). Чтобы выбрать оба, используем следующие селекторы:

[title*=“каспийск“]

CSS выберет все элементы, в тайтле которых имеются символы «каспийск», т. е. и «каспийский», и «каспийская».

Также можно выбирать теги, атрибуты которых начинаются с определенных символов:

[title^=»нужный вам символ»] {}

или заканчиваются ими:

[title$=»нужный символ»] {}.

Достоинства — максимальная гибкость. Можно выбирать любые существующие элементы страницы без возни с классами.

Недостатки — используется относительно редко, только в специфических случаях. Многие верстальщики предпочитают методологии, поскольку указать класс бывает проще, чем расставлять многочисленные квадратные скобки и знаки «равно». Вдобавок, эти селекторы не работают в Internet Explorer версии 7 и ниже. Впрочем, кому сейчас нужны старые Internet Explorer?

Селекторы псевдоклассов

Псевдокласс обозначает состояние элемента. Например, :hover – то, что происходит с частью страницы при наведении курсора, :visited – посещенная ссылка. Сюда же входят элементы вроде :first-child и :last-child.

Этот тип селекторов активно применяется в современной верстке, поскольку благодаря ему можно сделать страницу «живой» без применения JavaScript. Например, вы хотите сделать так, чтобы при наведении на кнопку с классом btn ее цвет менялся. Для этого используем следующую конструкцию:

.btn:hover {

background-color: red;

}

Для красоты можно указать в основных свойствах этой кнопки свойство transition, например, в 0,5s – в таком случае кнопка будет краснеть не мгновенно, а в течение полусекунды.

Достоинства — активно используются для «оживления» страниц. Просты в применении.

Недостатки — их нет. Это действительно удобное средство. Однако неопытные верстальщики могут запутаться в обилии псевдоклассов. Проблема решается учебой и практикой.

Селекторы псевдоэлементов

«Псевдоэлементы» – это те части страницы, которых нет в HTML, но ими все равно можно управлять. Ничего не поняли? Все проще, чем кажется. Например, вы хотите сделать первую букву в строке большой и красной, оставив прочий текст маленьким и черным. Конечно, можно заключить эту букву в span с определенным классом, но это долго и скучно. Гораздо проще выделить весь абзац и использовать псевдоэлемент ::first-letter. Он дает возможность управлять внешним видом первой буквы.

Существует довольно большое количество псевдоэлементов. Перечислить их в рамках одной статьи вряд ли получится. Вы можете найти соответствующую информацию в любимом поисковике.

Достоинства — дают возможность гибко настраивать внешний вид страницы.

Недостатки — новички в них часто путаются. Многие селекторы этого типа работают только в определенных браузерах.

Подведем итог

Селектор – мощное средство контроля потока документа. Благодаря ему можно выбрать абсолютно каждый компонент страницы (даже существующий лишь условно). Обязательно выучите все имеющиеся варианты или хотя бы запишите их. Это особенно важно, если вы создаете сложные страницы с современным дизайном и большим количеством интерактивных элементов.

fb.ru

Создание CSS правил в 2 словах

Каскадная таблица стилей представляет собой набор CSS правил, каждое из которых призвано форматировать определенный элемент веб-страницы. Само правило состоит из 2 частей:

  1. Селектор
  2. Блок объявлений
структура CSS правила
структура CSS правила

При помощи селектора мы указываем элемент, на который будем воздействовать. С помощью блока объявлений мы задаем параметры для выбранных элементов. Блок объявлений в свою очередь состоит из 2 частей:

  1. Свойство
  2. Значение

Свойство служит для выбора параметра, который мы будем настраивать.

Селектор тегов

Самый простой и универсальный вид селекторов. Суть его состоит в том, что мы напрямую указываем форматируемый тег. Например, для отображения всех абзацев шрифтом Verdana мы указываем следующую запись:

p {
font-family: Verdana;
}

Если мы захотим принять шрифт Verdana для заголовков первого уровня, будет справедлива следующая запись:

h1 {
font-family: Verdana;
}

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

Групповой вид селекторов

Создание одинаковых блоков объявлений для разных тегов не является ошибкой. Однако, для грамотных веб-мастеров подобная запись неприемлема. В примере выше мы придали одинаковый шрифт для 2 тегов, причем сделали это создав два отдельных правила, хотя можно было обойтись и одним. Для этого достаточно перечислить форматируемые теги через запятую:

p, h1 {
font-family: Verdana;
}

Групповой вид селекторов очень удобен и способен значительно сократить объем css файла. Как уже было сказано до этого, достаточно перечислить форматируемые теги через запятую.

Универсальный селектор

А что делать если нужно придать одни и те же значения для всех элементов веб-страницы? Перечислить все теги через запятую? Вовсе не обязательно, вместо перечислений всех тегов стоит просто указать ‘*’. Да, именно звездочку, при помощи которой выделяются все элементы веб-страницы.

* {
font-family: Verdana;
}

Селектор классов

Как видно из названия, при помощи этого вида селекторов мы выбираем элементы по определенным классам. При необходимости в форматировании блочных элементов с классом ‘container’ используется следующая запись:

.container {
font-family: Verdana;
}

Достаточно прописать точку и название класса. Хочется отметить что все элементы, вложенные в блочный элемент с классом ‘container’ также будут отформатированы.

Селектор идентификаторов

Здесь та же история как и с классами. Разница лишь в том что вместо точки мы прописываем — ‘#’. Для форматирования абзаца с id ‘unique’ необходима следующая запись:

#unique {
font-family: Verdana;
}

Древовидная форма HTML

Довольно часто можно стать свидетелем того, как новички не могут подобрать правильный вид селектора. Причиной этого является неясное понимание древовидной формы гипертекстовой разметки.

Для решения этой проблемы будет нелишним освежить память и вспомнить отношения тегов между собой в HTML.

древовидная форма HTML картинка
древовидная форма HTML

Как видно из иллюстрации выше, тег body является предком для всех остальных тегов. Вложенный в него тег div является его дочерним элементом, сам будучи родителем тегов h2, p и предком тега a. А маркированный список первого уровня имеет 3 дочерних (li, ul) и 2 потомственных элемента (li).

Все вышеперечисленные теги вписываются в три вида отношений:

  1. предок — потомок
  2. родитель — дочерний элемент
  3. сестринские элементы (теги одного уровня с общим родителем)

Важно понимать, что в момент форматирования какого-либо элемента часто его потомки наследуют эти же свойства. Для точечной настройки определенных тегов существуют специальные селекторы, с которыми мы познакомимся дальше.

Селектор потомков

В случае необходимости форматирования потомков определённого тега мы пользуемся соответствующим селектором. Например, для форматирования всех вложенных абзацев в блочный элемент (div) используется следующая запись:

div p {
color: blue;
}

Вначале мы указываем предка, затем через пробел — потомственный элемент. Запись выше означает: ‘Отобразите синим цветом все абзацы находящиеся внутри тега div’. Для форматирования всех ссылок внутри абзаца мы пишем следующее:

p a {
color: red;
}

Запись выше означает: ‘Отобразите красным цветом все ссылки, находящиеся внутри абзацев’. Как видите — все очень просто.

Дочерние селекторы

Если присмотреться на разметку современных сайтов, то невооруженным глазом можно увидеть нечто наподобие матрешки — блочные элементы обернуты в другие блочные элементы, находящиеся внутри других блочных элементов.

Все бы хорошо, но это порождает определенные проблемы. ‘Какие именно?’ — спросите вы. Ну, хотя бы то что в случае придания определенных свойств ‘предку’ они унаследуются потомственными элементами. Чтобы мы могли точечно выбирать элементы для форматирования, были придуманы некоторые виды селекторов, в том числе и дочерний.

Давайте представим что нам необходимо воздействовать только на дочерние абзацы блока с классом ‘info’, потомственные нас не интересуют. Для этого мы используем дочерний селектор:

.info>p {
font-family: Arial;
}

Запись выше означает: ‘Отобразить шрифтом Arial все абзацы, являющиеся дочерними блоку с классом info’. Если же нам нужно выделить дочерние пункты маркированного списка, аналогично пишем следующее:

ul>li {
color: blue;
}

Запись выше означает: ‘Перекрасить все дочерние пункты маркированного списка в синий цвет’. Такое правило CSS вполне может пригодиться, ведь внутри одного списка вполне может располагаться другой.

В некоторых случаях может возникнуть необходимость выделения не всех дочерних элементов, а только некоторых. Для управления первым дочерним элементов необходимо воспользоваться псевдоэлемнтом :first-child

.wrapper:first-child {
font-family: Tahoma;
}

Правило выше означает: ‘Отобразить первый дочерний элемент класса ‘wrapper’ шрифтом Tahoma’.

Псевдоэлемент :last-child помогает управлять последним дочерним элементом:

.wrapper:last-child {
font-family: Tahoma;
}

У нас также есть возможность выбирать любой по счету дочерний элемент при помощи псевдоэлемента :nth-child

.wrapper:nth-child(even) {
color: pink;
}

Запись выше означает: ‘Выделить все чётные дочерние элементы класса ‘wrapper’ розовым цветом’. Для выделения нечетных элементов even нужно заменить на odd.

Для выделения каждого 5 элемента необходимо добавить 5n. Если же стоит выделить каждый 4-й элемент начиная с шестого необходимо в скобках указать — 4n+6. Значения в скобках можно менять по-своему усмотрению:

.wrapper:nth-child(3n+2) {
border-bottom: 1px solid black;
}

Правило выше указывает на необходимость подчеркнуть каждый третий дочерний элемент начиная со второго.

Псевдоклассы

Порой бывает необходимо управлять элементами веб-страниц, которые не имеют тегов. Для решения этих задач существуют псевдоклассы и псевдоэлементы. Для управления разными состояниями ссылок есть 4 вида псевдоклассов:

a:link
Отвечает за внешний вид ссылки в спокойном состоянии
a:hover
Отвечает за внешний вид ссылки в момент наведения на неё курсором мыши
a:active
Отвечает за внешний вид ссылки в момент нажатия на неё
a:visited
Отвечает за внешний вид уже посещенной ссылки

Пример того, как могут быть использованы эти псевдоклассы:

a:link {
color: blue;
}

a:hover {
color: orange;
}

a:active {
color: red;
}

a:link {
color: grey;
}

Запись выше означает: ‘Выделить синим цветом ссылки в обычном состоянии. Отображать их оранжевым цветом в момент наведения по ним. Отображать ссылки красного цвета в момент нажатия. Выделить серым цветом уже посещенные ссылки.’

Псевдокласс :hover

Этот псевдокласс можно использовать не только по отношению к ссылкам, ведь мы можем наводить мышкой на любые другие элементы веб-страницы. Например:

img:hover {
border: 1px solid grey;
}

Запись выше означает: ‘Выделить все изображения рамкой серого цвета в момент наведения по ним.’ Таким же образом можно настраивать любые другие элементы в момент проведения по ним курсором.

Псевдоэлементы

При помощи псевдоэлементов :before и :after мы можем добавлять тот или иной контент впереди или в конце элементов веб-страницы. При необходимости добавить что-нибудь впереди абзацев мы пишем следующее:

p.attention:before {
content: "Внимание!";
}

Запись выше означает: ‘Добавить слово ‘Внимание!’ перед абзацами с классом attention’. Для добавления в конце элемента мы пишем:

p.attention:after {
content: "Внимание!";
}

Псевдоэлемент :focus помогает управлять внешним видом полей для ввода:

input:focus {
background-color: blue;
font-style: italic;
}

Запись выше означает — ‘Окрасить фон полей для ввода в синий цвет и использовать курсивное начертание шрифта в момент набора текста’.

При помощи псевдоэлемента ::selection мы можем выбирать цвет шрифта и задний фон в момент выделения текста. По умолчанию текст выделяется синим цветом, а мы можем написать следующее:

::selection {
color: white;
background-color: black;
}

Правило выше означает: ‘Отображать фон черным, а цвет шрифта белым в момент выделения текста’. Этот селектор незнаком для браузера Firefox, и для решения этой задачи необходимо перед правилом добавить следующее:

::-moz-selection {
color: white;
background-color: black;
}

Дочерние элементы по типу

Данный вид селекторов ценен тем, что мы можем управлять не просто дочерними элементами, а теми которые относятся к определенному типу.

Например, мы можем выделить первый дочерний нумерованный список блока с классом container:

.container>ol:first-of-type {
color: yellow;
}

Плюс ко всему мы имеем в распоряжении псевдоэлементы :last-of-type и :nth-of-type, которые имитируют :last-child и :nth-child соответственно.

#main>h2:last-of-type {
color: yellow;
}

В примере выше мы выделили последний дочерний заголовок второго уровня относящийся к блоку с идентификатором main.

Селектор смежных элементов

При помощи данного вида селекторов мы можем форматировать определённый фрагмент веб-страницы, но при условии что ему предшествуют другой элемент. Например, нам нужно выделить каждый первый абзац после заголовка первого уровня. Для этого мы создаем следующее правило:

h1+p {
font: italic 20px Arial;
}

Согласно правилу выше, если между заголовком h1 и абзацем окажется что-то ещё, например изображение, то в этом случае тег p не будет отформатирован. Также вместо знака плюс можно использовать ~ (тильда). При помощи неё будут отформатированы все маркированные списки после заголовка h1:

h1~ul {
color: orange;
}

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

Используя этот вид селектора можно форматировать элементы выбрав их по атрибуту. Для управления всеми внешними ссылками нужно указать следующее:

a[href^="http://"] {
color: aqua;
}

Запись href^=»http://» означает что необходимо выделить все ссылки, начинающиеся на http://. Такие css правила имеют место быть, потому что абсолютные адреса в основном используются для внешних ссылок.

У нас есть возможность выделять ссылки на изображения, видео, книги и прочее. Например, для управления ссылками ведущими на pdf книги можно создать следующее правило:

a[href$=".pdf"] {
color: brown;
}

Знак доллара помогает выбрать только те ссылки, которые оканчиваются на ‘.pdf’. В «http://.pdf» вместо ссылки на книгу можно использовать .jpeg, .png, .mov, .mp4 и так далее.

У вас может возникнуть ситуация, когда нужно выделить те изображения, которые содержат в своем названии определенное слово. Возьмем к примеру интернет-магазин, где нужно сделать рамку для изображений футбольных бутс. С большой долей вероятности их названия содержат в себе слово boots. В таком случае создаем ccs правило:

img[src*="boots"] {
border: 2px dashed grey;
}

Знак звездочки помогает выбрать те изображения, которые в своем названии содержат слово boots.

Для выделения всех изображений, находящихся в блоке с классом relative мы создаем следующее css правило:

.relative[src] {
border: 2px dashed grey;
}

Псевдокласс отрицания

Если вам когда-нибудь приходилось иметь дело с движком WordPress, вы должны знать что в ней все ссылки имеют абсолютный вид. Как мы рассматривали выше, при необходимости выделить внешние ссылки можно использовать селектор по атрибуту, те которые начинаются на http://. Как вы понимаете, такой вариант решения вопроса с движком WordPress не прокатит. Но у нас в арсенале есть гениальный псевдокласс отрицания, который мы можем задействовать:

.a[href^="http://"]:not([href^="http://mysite.com"]) {
border: 2px dashed brown;
}

Правило выше означает: ‘Выделить коричневым цветом все ссылки, начинающиеся на http:// кроме тех, которые начинаются на http://mysite.com’. Псевдокласс отрицания можно использовать не только с селекторами атрибутов, но и с другими простыми селекторами.

Стоит знать что для каждого селектора можно использовать только один псевдокласс отрицания. Следующая запись будет неверной — .container:not(#info):not(h3)

Наверняка вам будет сложно запомнить все виды CSS селекторов, да это и не нужно. Многие из них вы запомните в ходе работы, верстая страницу за страницей. И для того чтобы вы могли в нужный момент найти интересующий вас селектор, как говорится освежить свою память, будет весьма кстати добавить эту страницу в закладки.

На этом у меня все. Надеюсь, данный материал оказался для вас полезным. Если это так:

  1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу
  2. [popup_trigger id=»3874″ tag=»span»]Подписывайтесь[/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на моем блоге

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

site4business.net

Селектор тега

Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу <p> соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет. После селектора следует ставить фигурные скобки {}, внутри которых следует писать CSS свойства.

Давайте покрасим все абзацы в красный цвет:

Соответственно всем остальным тегам соответствуют свои селекторы: тегу <div> соответствует CSS селектор div, тегу <h1> соответствует CSS селектор h1, тегу <h2> соответствует CSS селектор h2 и так далее.

Группировка селекторов

Иногда может возникнуть следующая ситуация: вам нужно сделать одно и то же с разными тегами, например, покрасить все заголовки h2, h3 и абзацы в красный цвет. В этом случае их селекторы можно объединить через запятую:

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

Контекстный селектор (вложенность тегов друг в друга)

Контекстного селектор позволяет обращаться к тегам по их вложенности в другие теги.

Чтобы показать вложенность, между селекторами тегов следует поставить пробел (этот пробел и есть знак контекстного селектора).

Для примера представим ситуацию, когда мы хотим обратиться только к тем тегам i, которые находятся внутри абзацев, и не хотим трогать те теги i, которые находятся внутри заголовков h2.

Например, так — p i — мы обратимся ко всем тегам i, находящимся внутри p, p b — так ко всем тегам b внутри p, а так — div p b — ко всем тегам b, которые находятся внутри абзацев p, которые в свою очередь находятся внутри тега div.

В следующем примере мы обратимся ко всем абзацам внутри div и покрасим их в красный цвет. Абзацы вне дива и другие элементы внутри дива (в нашем случае h2) красными не станут:

Дочерний селектор > (непосредственная вложенность)

Дочерний селектор > позволяет выбирать теги по непосредственной вложенности тегов друг в друга.

Что это значит — разберем на следующем примере: обратимся ко всем тегам <i> (покрасим в красный цвет), которые лежат непосредственно внутри абзаца, не затронув <i>, лежащие сначала внутри <b>, а потом уже внутри абзаца:

Пробелы вокруг знака > не обязательны, но их обычно ставят для красоты.

Соседний селектор +

Соседний селектор + позволяет выбрать элемент по его соседу сверху. К примеру, так: p + h2 — я выберу все h2, которые следуют непосредственно сразу за абзацем p (наличие обычного текста не влияет на соседство, а наличие тегов — влияет).

Давайте обратимся к тегу <i> (покрасим в красный цвет), который лежит непосредственно после тега <b>, не затронув остальные <i>:

Пробелы вокруг знака + не обязательны, но их обычно ставят для красоты.

Родственный селектор ~

Родственный селектор ~ работает подобно соседнему селектору +, но выбирает не непосредственного соседа, а всех соседей снизу.

Давайте обратимся ко всем тегам <i> (покрасим в красный цвет), которые лежат после тега <b>, не затронув <i>, находящиеся перед тегом <b>:

Обратите внимание на то, что наличие посторонних тегов (в нашем случае span) не влияет на выбор. Кроме того, обратите внимание на то, что выбор распространяется до конца родителя (в нашем случае абзаца). Теги <i>, находящиеся вне родителя захватываться не будут (только если перед ними нету своего <b>).

Пробелы вокруг знака ~ не обязательны, но их обычно ставят для красоты.

Универсальный селектор *

Универсальный селектор * позволяет обратиться ко всем элементам на странице. К примеру, таким образом мы покрасим все элементы страницы в красный цвет:

Злоупотреблять этим селектором не рекомендуется, так как он замедляет работу браузера.

Можно использовать * не в чистом виде, а в комбинации с другими селекторами. К примеру, так мы выберем любые теги, лежащие непосредственно внутри абзацев:

А так выберем все теги i, лежащие внутри любого тега, который в свою очередь лежит внутри абзаца:

Селектор по id

Селектор по id позволяет обращаться к элементам по их уникальному названию, указанному в атрибуте id, (другого id с таким именем на странице быть не должно — будет конфликт).

Если мы дадим элементу, к примеру, id test (то есть сделаем следующий атрибут — id=»test»), тогда в CSS мы сможем обратиться к нему таким образом: #test — то есть сначала пишется символ «решетка», а затем то имя, которое мы записали в атрибут id.

Селектор по id имеет приоритет по отношению с селекторам тегов и классам.

Давайте сейчас для всех абзацев зададим красный цвет, а для абзаца с id=»test» — зеленый:

А теперь атрибут id дадим конкретному диву <div> и покрасим содержимое этого дива в красный цвет, обратившись к нему по его id:

А теперь совместим контекстный селектор (который пробел, показывающий вложенность) и id и сделаем так, чтобы только абзацы (но не заголовки h2 в данном случае) из #test стали красного цвета:

Селектор по классу

Классы элементам задаются с помощью атрибута class, в котором мы пишем имя класса. Их преимущество в том, что один и тот же класс может быть у многих элементов на странице, в отличие от id. То есть, если элементы должны вести себя одинаково — мы даем им один и тот же класс.

Как обратиться к элементам с определенным классом в CSS: пусть мы задали нужным нам элементам класс с именем test, тогда в CSS ко всем элементам с этим классом мы можем обратиться следующим образом — .test — вначале символ «точка» и потом имя класса из атрибута class.

В примере ниже и абзацы, и заголовки имеют один и тот же класс .test, который красит эти элементы в красный цвет:

Определенный тег с заданным классом

Бывают такие ситуации, когда разные теги имеют один и тот же класс. К примеру, у абзацев и заголовков h2 одновременно задан класс test. Вам может потребоваться выбрать только абзацы с классом test, не затрагивая заголовков h2 с этим же классом.

В этом случае вместо селектора .test я должен написать следующее: p.test — таким образом я выберу все абзацы с классом test, не затронув заголовки. Если же я напишу h2.test — то выберу все заголовки h2 с классом test, не затронув абзацев.

В следующем примере только абзацы с классом test станут красного цвета, а заголовки с таким же классом — не станут:

Итак, еще раз: p.test — такой селектор выбирает абзацы с классом test. А вот если я сделаю так: p .test (поставлю пробел), то выберу все элементы с классом test, находящиеся внутри абзацев. Прочувствуйте эту разницу.

Давайте теперь выберем только h2 с классом test:

А сейчас сделаем так, чтобы класс test задавал курсив всем элементам, которым он дан, и чтобы при этом все заголовки h2 с классом test красились в красный цвет, а абзацы с этим классом — в зеленый:

Мультиклассы

Элементу можно задать не один класс, а сразу несколько через пробел.

Пусть, к примеру, у нас есть абзац с двумя классами — .www и .ggg, в этом случае мы можем обращаться к этому элементу, как по одному классу, так и по другому. Например, первый класс задает жирный текст, а второй — красный цвет:

Однако, мы можем выбрать также только те элементы, у которых есть одновременно и один класс, и второй, вот таким образом — .www.ggg — так как пробел отсутствует между селекторами классов, это обозначает одновременность, а не вложенность, как было бы вот так — .www .ggg (между классами стоит пробел).

В следующем примере те элементы, у которых есть одновременно и класс .www, и класс .ggg получают размер шрифта в 30px:

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

Давайте посмотрим на примерах.

Выберем только абзацы, у которых есть одновременно класс .www и класс .ggg:

Выберем только заголовки h2, у которых есть одновременно класс .www и класс .ggg:

Выберем элемент с id=»test» и классом .www :

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

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

Можно делать и более сложные селекторы, например, выбрать по тексту, с которого должен начинаться или заканчиваться атрибут.

Выбор по наличию атрибута

Чтобы найти элементы, у которых есть заданный атрибут, его просто нужно указать в квадратных скобках:

Давайте выберем все элементы, у которых есть атрибут type:

Давайте выберем все инпуты, у которых есть атрибут type:

В данном примере мы писали селектор тега input слитно с селектором атрибута type. А слитность, как мы уже разбирали выше дает одновременность, то есть мы выбираем инпуты, у которых одновременно есть атрибут type.

Выбор по значению атрибута

Выбор по содержимому атрибута делается с помощью равно =:

Давайте выберем все инпуты, у которых атрибут type имеет значение text:

Выбор по начальному тексту атрибута

Можно выбрать элемент по тексту, с которого должно начинаться значение атрибута:

Давайте выберем все ссылки, у которых атрибут href начинается с http://:

Выбор по конечному тексту атрибута

Можно выбрать элемент по тексту, на которое должно заканчиваться значение атрибута:

Давайте выберем все ссылки, у которых атрибут href заканчивается на .html:

Выбор по определенному тексту в атрибуте

Можно выбрать элемент по тексту, который должен содержаться в значении атрибута:

Давайте выберем все ссылки, у которых в атрибуте href есть текст /webroot/:

Выбор по одному из значений атрибута

Бывают атрибуты, в которых есть несколько значений через пробел (например, атрибут class). Можно выбрать элементы, у которых в атрибуте присутствует указанное значение:

Давайте выберем все абзацы, у которых в атрибуте class есть слово test:

Выбор по дефису

Бывает такое, что в названии атрибута присутствует какая-то приставка, заканчивающаяся дефисом, к примеру, у элемента может быть класс menu-text. Здесь menu- это и есть такая приставка.

Можно выбирать элементы, у которых одно из значений атрибута начинается с определенной приставки:

Давайте выберем все абзацы, у которых в атрибуте class есть класс, который начинается с menu-:

code.mu

Universal Selector

The universal CSS selector is used to select all elements. It is marked with a *. Here is a universal CSS selector example:

 * {  font-size: 18px; } 

This example selects all HTML elements and set their font-size CSS property.

The universal CSS selector is not so often used alone. It is more often used with a child selector or descendant selector.

Element Selector

The element selector is the most basic CSS selector. It selects all the HTML elements of the same type. For instance, all div elements or p elements.

With the element CSS selector you simply write the element name of the elements to apply the CSS rule to. Here are three examples:

 div {  border: 1px solid black; } p {  font-size: 18px; } input {  border: 1px solid #cccccc; } 

These three CSS rules each have a selector that selects all of a certain type of HTML elements. The first CSS selector selects all div elements. The second CSS selector selects all p elements. The third CSS selector selector selects all input elements.

You can select any HTML element using the element selector. All elements of that type / name will be affected by the CSS rule having the element selector.

Class Selector

The class selector is another very commonly used CSS selector. The class selector selects all HTML elements which have the given CSS class set on them. You set a CSS class on an HTML element by giving the HTML element a class attribute. Here is an example:

 <div class="green"> Text... </div>  <p class="green"> Paragraph... </p> 

As you can see, you can give different types of HTML elements the same CSS class. That is fully valid (in case you need that).

You target these HTML elements by creating a CSS rule with the same name as the CSS class to select, and prefix with a dot (.). Here is a CSS rule example that selects the two HTML elements from the example above:

 .green {  border: 1px solid green; } 

The CSS rule example selects all HTML elements with the CSS class green set on them. Notice the . in the beginning CSS selector part (.green) of the CSS rule. This signals to the browser that this is a CSS class selector, and that the name after the . is the name of the CSS class to select.

You can use any name as a CSS class. There are no built-in CSS class names. Use CSS class names that start with letters — not numbers or other special characters. CSS class names are case sensitive, so GREEN is not the same CSS class as green or Green.

ID Selector

The ID selector selects the HTML element which has the given ID. The ID of an HTML element is set via the id attribute. Here is an example:

 <div id="myElement"> My Element </div> 

You can select this HTML element using an ID selector, by prefixing the CSS selector with a # and then write the ID of the HTML element. Here is an example that selects the above HTML element by its ID:

 #myElement {  border: 1px solid blue; } 

This example uses the # to signal that the selector is an ID selector, and then the ID myElement right after the # to mark what ID to select.

Attribute Selector

The CSS attribute selector is used to select HTML elements by their attributes. Look at this HTML:

 <a href="http://tutorials.jenkov.com"> Java and Web Development Tutorials</a>   <a name="jump-here"></a>  

Notice how the two a elements have different attributes. The first a element has a href attribute, and the second a element has a name attribute.

You can select these two a elements individually using an attribute selector. Here is a CSS attribute selector example:

 [href] {  font-size: 18px; } 

This example CSS rule selects all HTML elements that have an href attribute. That means the first a element in the HTML shown earlier will be targeted by the CSS rule, but the second a element will not.

It is the [attrName] that makes up the attribute selector. Inside the square brackets ([ ]) you write the name of the attribute to target.

You can also select HTML elements based on their attribute values. I will show you a few ways to do that in the following sections.

Attribute Equals

You can select an HTML element based on its attribute value like this:

 [href="http://jenkov.com"] 

You add a = after the attribute name, and then you write the desired attribute value. In this case I want to select all HTML elements that have an href attribute with the value http://jenkov.com.

Attribute Begins With

You can select HTML element based on what an attribute value starts with. Instead of using the = sign between attribute name and attribute value, you write ^=. Here is an example:

 <a href="http://jenkov.com"></a>    <style>  [href^="http://"] {  font-size: 18px;  }  </style>  

This example will select all HTML elements that has an href attribute which value starts with http://.

Attribute Begins With Language Code

The CSS attribute begins with language code selector is used select HTML elements with a given language code. Look at this HTML:

 <p lang="en" > English text</p>  <p lang="en-UK"> UK English text</p>  <p lang="en-US"> US English text</p>  

You can then use the CSS attribute begins with language code selector to select all HTML elements with a language code that starts with en-, like this:

 [lang|="en"] {  font-size: 18px;  } 

Notice the |= part of the selector in the above CSS rule. That part signals that the attribute value should either be en or start with en- in the language code.

Attribute Ends With

You can also select HTML elements based on what an attribute value ends with. Instead of writing ^= you write $= between the attribute name and attribute value. Here is another example:

 <a href="http://jenkov.com"></a>   <style>  [href$=".png"] {  font-size: 18px;  } </style> 

This example CSS rule selects all HTML elements which have an href attribute which value ends in .png.

Attribute Contains

The CSS attribute contains selector is used to select all HTML elements with a given attribute which contains the specified substring. Here is a CSS attribute contains selector example:

 [href*="jenkov.com"] {  font-size: 18px;  } 

This example CSS rule selects all HTML elements with an href attribute which contains the substring jenkov.com somewhere in its attribute value. Thus, it will select the two first of the below a elements, but not the third:

 <a href="http://jenkov.com">Jenkov.com</a>  <a href="http://tutorials.jenkov.com">Tutorials</a> <a href="http://google.com">Google</a> 

Attribute Contains Word

The CSS attribute contains word selector can select HTML elements with attribute which value contains a given word. The difference between this selector and the attribute contains selector is, that for this selector the targeted substring must be surrounded by spaces in the attribute value. Put differently, it must appear as a word inside the attribute value, not just an arbitrary substring.

Look at these two HTML elements:

 <div myattr="iamaprogrammer"></div>   <div myattr="i am a programmer"></div>  

Both of these div elements contains the substring programmer inside their myattr attribute values, but only the second div element contains it as a whitespace separated word. Thus, the selector in this CSS rule:

 [myattr~="programmer"] {  } 

… will only select the second of the div elements shown above.

Group Selector

The CSS group selector is used to group together multiple selectors into one, big CSS selector. That means, that all elements targeted by any of the selectors will be affected by the CSS rule. Here is a CSS group selector example:

 div, p {  font-size : 18px; } 

This example CSS rule sets the font size of both div and p elements.

Notice how the example has two selectors separated by a comma (div and p). The comma makes this a group selector, meaning the CSS rule is applied to all elements matching one (or more) of the selectors that are grouped together.

Child Selector

The child CSS selector is used to select all elements that are immediate children of some other element. Here is a child CSS selector example:

 li>a {  font-size: 18px; } 

This example selects all a elements which are children of li elements. Thus, only the second a element would be selected in this HTML:

 <a href="...">This will not be selected</a>  <ul>  <li><a href="...">This WILL be selected</a></li> </ul> 

The first a element is not a child of a li element. Thus it is not selected by the child selector. The second a element on the other hand, is a child of a li element, so the CSS rule is applied to that element.

It is the > character which marks a selector as a child selector. Notice the > character between the li and a in the selector in the example above.

You can use more than one level of child selectors. Here is an example:

 ol>li>a {  font-size: 18px; } 

This example only selects the a elements which are children of li which are again children of ol elements. Thus, the CSS rule is not applied to a elements nested inside a ul (unordered list).

Descendant Selector

The descendant CSS selector is used to select elements that are descendants of other elements. The selected elements do not have to be immediate children of the specified ancestor. They just have to be nested inside the ancestor somewhere. That is how descendant selectors are different from child selectors. Look at this HTML:

 
  1. Link 1

You can select all a elements nested inside the ol element using this CSS rule:

 ol a {  font-size : 18px; } 

The descendant selector is marked via the space character. Notice the space between the ol and the a in the selector in the above CSS rule. This space specifies that this selector is a descendant selector, and that it selects all a elements that are descendants of (nested inside) ol elements. It does not care how far down in the element hierarchy the a is nested, as long as it has a ol as an ancestor somewhere higher up in the hierarchy.

Adjacent Sibling Selector

The adjacent sibling CSS selector is used to select HTML elements that are adjacent siblings of some other HTML element. Look at this HTML:

 <body>  <h1>Headline</h1>   <p>   </p>   <p>   </p>   <table>   </table>   <table>   </table> </body>  

All of the HTML elements in this example are siblings, meaning the have the same parent HTML element (the body element). But they are not all adjacent siblings. By adjacent is meant that the elements are following each other immediately, with no other HTML elements in between.

You can select the first p element after the h1 using this adjacent sibling selector:

 h1+p {  } 

This selects all p elements which are have a h1 element preceding it as sibling. In the HTML above, that means the first p element after the h1 element, but not the following p elements, because they are preceded by a p element, not a h1 element.

Similarly you could select all table elements adjacent to a p element using this adjacent sibling selector:

 p+table {  } 

General Sibling Selector

The CSS general sibling selector is used to select HTML elements which have the same parent. Unlike with the adjacent sibling selector, the general sibling selector selects all elements that are preceded by another element (inside the same parent), even if the two elements are not directly adjacent.

Look at this HTML example:

 <body>  <h1>Headline</h1>   <p>   </p>   <p>   </p>  </body> 

A CSS rule using a general sibling selector can be used to select all p elements which are preceded by another p element somewhere (inside the same parent), like this:

 p~p {  } 

Notice the ~ character between the two p‘s in the selector part of the CSS rule. The ~ character is what marks this as a general sibling selector.

Pseudo Classes

CSS has defined a set of pseudo classes which you can use in your CSS selectors. A CSS pseudo class is actually a state of an HTML element. Thus, you can assign different CSS styles to HTML elements depending on the HTML element state. CSS 3.0 added quite a few new CSS pseudo classes to the standard. I will cover each of these CSS pseudo classes in the following sections.

a:link, a:visted, a:hover, a:active

The a element (which represents a link) can be in four different states, each of which has an associated pseudo class:

Pseudo Class Description
a:link Selects all links that have not yet been visited.
a:visited Selects all links that have already been visited.
a:hover Selects all links the mouse hovers over.
a:active Selects all links that have been clicked — until the new page is loaded.

The a:active pseudo class does not «live long». It is only applied in the short time between a user clicks a link (that thus becomes active), and until the browser loads the page the link points to.

Here are some a element pseudo class examples:

 a:link { color: #00ff00; } a:visited { color: #009900; } a:hover { color: #66ff66; } a:active { color: #ffff00; } 

These example set the colors of the link (a element) to different colors depending on the link state (pseudo class).

:first-child, :last-child

The :first-child CSS pseudo class selects all elements that are the first child of some parent HTML element. The :last-child CSS pseudo class selects all elements that are the last child of some parent HTML element. Here is an example:

 <div>  <p>First child</p>  <p>Second child</p> </div>   <style>  p:first-child {  background-color: #ff00ff;  }  p:last-child {  background-color: #00ff00;  } </style> 

This example’s first CSS rule selects all p elements that are the first child of their parent elements. In this example that would be the p element with the body First Child. This HTML element has its background color set to #ff00ff.

The example’s second CSS rule selects all p elements that are the last child of their parent elements. In this example that would be the p element with the body Second Child.

:nth-child()

The :nth:child() CSS pseudo class selects the nth elements of some parent. The n could be every element, every 2nd element, every 3rd element etc. Here is an example:

 <div>  <p>1st child</p>  <p>2nd child</p>  <p>3rd child</p>  <p>4th child</p>  <p>5th child</p>  <p>6th child</p> </div>  <style>  p:nth-child(2n) {  background-color: #ffff00;  } </style>  

This example CSS rule selects every second p element inside their parent elements. This means the p elements with the bodies 2nd child, 4th child and 6th child.

It is the 2 in p:nth-child(2n) that specifies that it is every second p element that is to be selected. If you write p:nth-child(3n) instead, you would select every third p element of their parents.

:first-of-type, :last-of-type

The :first-of-type CSS pseudo class selects elements that are the first child of its type inside its parent element. The :last-of-type CSS pseudo class selects elements that are the last of its type inside its parent element. Here is an example:

 <div>  <h2>1st h2</h2>  <p>1st p</p>   <h2>2nd h2</h2>  <p>2nd p</p>   <h2>3rd h2</h2>  <p>3rd p</p> </div>  <style>  p:first-of-type {  background-color: #ffff00;  }  p:last-of-type {  background-color: #00ff00;  } </style> 

This example contains 2 CSS rules. The p:first-of-type will select the p elements that are the first p elements of their parents, regardless of what other elements the parent contains. In this example that is the p element with the body 1st p. The p:last-of-type will select the p elements that are the last p elements of their parents. In this example that would be the p element with the body 3rd p.

:nth-of-type()

The nth-of-type() CSS pseudo class selects all the elements that are the nth of their type inside their parents. Inside the parentheses you specify if they are to be every element, every second, every third etc. element of its type in its parent. Here is an CSS nth-of-type() example:

 <div>  <h2>1st h2</h2>   <p>1st p</p>  <p>2nd p</p>   <p>3rd p</p>  <p>4th p</p>   <p>5th p</p>  <p>6th p</p> </div>  <style>  p:nth-of-type(2n) {  background-color: #ffff00;  } </style> 

The CSS rule in this example selects every second p element inside their parent elements. Thus, the p elements with the bodies 2nd p, 4th p and 6th p. You could change the 2n to 3n and get every third element of its kind inside its parent.

:nth-last-child()

The :nth-last-child() CSS pseudo class selects the nth last child of its parent. It works similarly to the :nth-child() pseudo class, except it counts the elements backwards from the last towards the first.

:nth-last-of-type()

The :nth-last-of-type() CSS pseudo class selects the nth last child of its kind inside its parent. It works similarly to the :nth-of-type() pseudo class except it counts the elements backwards, from the last element and towards the first element inside each parent.

:only-child

The :only-child CSS pseudo class selects all elements that are the only child of their parent.

:only-of-type

The :only-of-type CSS pseudo class selects all elements that are the only child of its kind inside their parent.

:empty

The :empty CSS pseudo class selects all HTML elements that are empty, meaning they have no text or child elements inside their body. Here is an example :empty pseudo class example:

 div:empty {  } 

This CSS rule selects all div elements that are empty.

:not()

The :not() CSS pseudo class selects all of those HTML elements that do not match the CSS selector given as parameter (inside the parentheses) to the :not() pseudo class. Here is an example:

 p:not(:last-child) {  border-bottom: 1px solid #cccccc; } 

This CSS rule selects all p elements which are not the last child of their parents.

:checked

The :checked CSS pseudo class selects all input fields that are checked, meaning all checkboxes. Here is a :checked example:

 input[type="checkbox"]:checked {  } 

This CSS rule selects all input fields which have a type attribute with the value checkbox, and which are checked.

:enabled, :disabled

The :enabled and :disabled CSS pseudo classes selects HTML elements that are either enabled or disabled. This will typically be input fields. Here is an example:

 input:enabled {  border: 1px solid #6666ff; }  input:disabled {  border: 1px solid #666666; } 

This examples sets a blue border color on all enabled input elements, and a gray border on all disabled input fields.

Pseudo Elements

CSS pseudo elements are parts elements that can be styled, but which are not by themselves real HTML elements.

Pseudo elements are specified in the CSS selector using a double colon (::) and then the name of the pseudo element. That syntax is new from CSS 3.0. Here is a CSS 3.0 pseudo element example:

 p::first-letter {  font-size : 20px; } 

Before CSS 3.0 the standard was a single colon, like this:

 p:first-letter {  font-size : 20px; } 

For backwards compatibility, the single colon notation still works in most browsers, but you are encouraged to use the double colon notation.

There are several different pseudo elements you can use. The CSS pseudo elements are covered in the following sections.

::first-letter

The :first-letter CSS pseudo element can be used to select the first letter of HTML elements. For instance, to select the first letter of all p elements you would write:

 p::first-letter {  font-size: 20px; } 

This example sets the first letter inside all p elements to font size 20px.

::first-line

Like with :first-letter you can select the first line of an HTML element, and style that differently. The first line is not the first sentence. It is the first horizontal line of text, regardless of whether that constitutes a less than or more than a full sentence.

Here is a :first-line pseudo element example:

 p::first-line {  font-size: 19px; } 

This example sets the first line of all p elements to font size 19px.

::before, ::after

The :before and :after CSS pseudo elements matches a virtual first and last child of the selected HTML element. This is normally used to insert some extra content (text or HTML) before or after that virtual last child using the content CSS property. The content CSS property is used to generate content and insert into the DOM via CSS. Here is an example:

 <div id="#theId">  HTML Text </div>  <style>  #theId::after {  content : " - Generated Content";  } </style> 

This example inserts the content defined in the content CSS property after the last child (last content) of the element with the id theId (the div element.

If you had used the :before pseudo element instead, the generated content would have been inserted before the first content instead of after the last content.

::selection

The ::selection pseudo element refers to the selected content when the user selects e.g. a passage of text with the mouse. This pseudo element is supported in IE and Chrome, but not in Firefox. It was part of the CSS 3.0 propposal, but is no longer part of the specification.

Here is a ::selection CSS pseudo element example:

 ::selection {  background-color: #ff00ff; } 

This example sets the background-color of the selected text to purple.

tutorials.jenkov.com


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.