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

CSS: селекторы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

" (тильда) и за ним селектор выбираемых элементов.

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

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

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

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

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

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

Классы

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

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

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

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

<ul class css-value">menu-top "> . </ul>
<ul class css-value">menu "> . </ul>
<ul class css-value">menu-bottom "> . </ul>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Урок 8. Селекторы CSS. Задаем CSS-правила

Без селекторов задавать стили для элементов html-страницы очень сложно. Необходимо было бы прописывать стили с помощью атрибута style у каждого элемента, это нерационально и долго. Существование селекторов и файла CSS существенно упрощает задачу. В этом css-уроке разберемся с тем, какие же существуют селекторы.

Селекторы по тегу, классу и id

Этот тип селекторов указывает на все элементы страницы с определенным тегом. Чтобы прописать стили по тегу, необходимо взять название тега и в фигурных свойствах отметить все свойства для них. Что касается селектора по классу, то необходимо указать сначала название класс, а потом в фигурных скобках css-свойства для него. Для селектора по id ситуация идентичная.

Например, пропишем свойства для всех абзацей на странице и для последнего из абзацей по классу перебьем значение отступа снизу:

Вложенные и соседние селекторы

Далее поговорим о вариациях, как можно проще задавать стили для различных элементов, не прибегая к использованию классов. Часто мы должны задать стили только для вложенных элементов. Допустим определенные стили ТОЛЬКО у ссылок меню или ТОЛЬКО у абзацей определенного блока, например, блока с контентом. Для этого используется понятие вложенных селекторов. Необходимо слева направо задать порядок вложенности.

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

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

Например, для селектора по классу .sec применется отступ сверху, если он стоит после элемента с классом .first:

Вложенные и соседние селекторы можно комбинировать. Если зададим в примере перед конструкцией .first + .sec класс .content, то свойства применяются для второго класса в случае, если он идет после первого и они оба лежат в блоке с классом .content.

Стили для дочерних селекторов. Чем дочерние элементы отличаются от потомков

С вложенностью селекторов мы познакомилимь. Понятно, что сначала идет родительский элемент (предок), а вложенные в него элементы являются потомками. При чем не важно, какой у них уровень вложенности, все равно для первого элемента они будут потомками. Чтобы задать стили для первого уровня вложенности, т.е. для непосредственного потомка, используют понятие дочернего селектора. Для этого используют символ >, он указывает на дочерний селектор.

В данном примере стили применяются только для элемента span вложенного непосредственно в .content, а для span внутри абзаца не применяются.

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

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

Селекторы и свойства в CSS

Селектор в CSS – элемент (или группа элементов), для которого описываются стили. Например, селектор, тег h1 , а свойство – цвет текста. Пример такого описания:

Селектор может состоять из таких частей:

  • Селектор тега, id селектор или селектор класса
  • Селектор псевдокласса и (или) селектор атрибута

Например, селектор может быть таким:

Можно перечислять несколько разных селекторов и описывать для них одинаковые свойства. Проще показать на примере.

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

Чтобы использовать все функции сайта (например, сохранение прогресса прохождения уроков), вам нужно авторизоваться

  1. Для тегов <h1> и <p> (не дописывайте новые селекторы, все уже есть) укажите два свойства: color: #FF0000 и text-align: center . Не забудьте точки с запятой ( ; ) после свойств

&#8211; Не пропускайте новостей, подпишитесь на нашу страницу ВК, Facebook или Twitter.

&#8211; Не знаете как сделать? Нажмите на кнопку Обсуждение и задайте вопрос!

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

Ваш адрес email не будет опубликован.