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

Примеры употребления слова селектор в литературе.

Не было такого сообщения, но на всякий случай сейчас проверим, — Бирюков нажал клавишу селектора: — Голубев!

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

Он включил селектор, связался с секретаршей, попросил разыскать какого-то Витченко, верстальщика, отдал еще несколько распоряжений.

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

Наконец в трубке раздался его голос: — Милош, сейчас у нас состоится разговор, как бы по селектору.

Шаманов взглянул на часы и нажал кнопку селектора: — Наташа, Николадзе явился?

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

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

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

По счастью для Яблочкина, лицо которого покрылось смертельной бледностью, в селекторе громкой связи раздался голос генерала Потапова: — Авраам Люцеферович, заканчивайте инструктаж.

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

В этот момент над селектором возник белесый голокуб с бюстом шефа в объеме.

Голос Валка был звонок и чист, как голос шефа, отдающего приказы по селектору.

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

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

Источник: библиотека Максима Мошкова

поискслов.рф

Селекторы в CSS

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

P{ 	Стили… }

В данном случае селектором выступает p – тег абзацев. Такое правило добавит стили для всех абзацев на веб-странице.

Какими бывают css селекторы?

Селектор тега – самый простой. Он был продемонстрирован в примере. Чтобы записать его в css, нужно написать имя тега без угловых скобок. Стили будут применены ко всем элементам с таким тегом.
Table{} – стили для всех таблиц
Li{} – стили для всех пунктов списка
A{} – стили для всех ссылок

Стилевой класс – к любому элементу на веб-странице можно привязать стилевой класс. Даже к одной букве. Потом в css-файле можно обратиться к этому элементу, прописав для него собственные стили. Для этого нужно поставить точку и написать имя стилевого класса после нее. Примеры :
.about{} – правила применятся ко всем элементам, которые имеют атрибут class = "about"
.down{} – правила применятся ко всем элементам, которые имеют атрибут class = "down"
.float{} – правила применятся ко всем элементам, которые имеют атрибут class = "float"

Как видите, главное поставить точку. Стилевой класс можно привязывать к неограниченному количеству элементов. Элементу можно прописать несколько классов.

Идентификатор – еще один вид селекторов. Один идентификатор можно задать только одному элементу. Он не может иметь двух идентификаторов, а также id привязанный к этому элементу, не может быть прописан нигде более.

Задается он так:

<p id = “first”>Абзац</p>

То есть также, как и класс, только используется атрибут id в качестве значения которого используется любое слово.

Чтобы обратиться к элементу с идентификатором через css нужно написать значение id и перед ним поставить решетку.

#first{ 	Font-size: 22px }

Мы обратились к абзацу с id = first. Стиль применится только к нему. У остальных абзацев размер шрифта не изменится.

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

О псевдоклассах я написал отдельную статью, поэтому не вижу смысла повторяться.

Объединение селекторов

Еще одно важное правило, о котором нужно знать. Селекторы стилевых классов можно записать, не отделяя их друг от друга. Например:
.class1.class2 – выберет те элементы, у которых есть оба этих класса.
.class1.class3.class8 – выберет элементы, к которым привязаны все три стилевых класса.

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

Если отделять селекторы друг от друга пробелами, то можно оттянутся до нужного нам элемента. Примеры:
Table td – выберет все ячейки, лежащие в таблицах
Ul li a – выберет все ссылки, лежащие в пунктах списков (а пункты списков в свою очередь лежат в самих списках)
.class1 p – выберет все абзацы с атрибутом class = “class1”
.class2 p span – выберет все содержимое тегов , лежащее в абзацах с классом class2.

Вкладывать и комбинировать таким образом можно сколько угодно раз. Примеры:
<strong>#header .logo span:first-letter{}</strong> – выберет первую букву в спане логотипа, который расположен в шапке
.class1.class2:hover{} – определит стиль при наведении мышки для элементов, которые имеют оба стилевых класса.

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

Если вам нужно задать стили для элементов родителя, которые являются НАПРЯМУЮ дочерними, то нужно прописать это так:
Ul > li{} – выберет пункты списка, которые вложены в него напрямую, а не лежат в других тегах
P > a{} – выберет только те ссылки в абзацах, которые лежат непосредственно в них, а не вложены в другие теги (которые, в свою очередь, уже вложены в абзацы)
Пример:

<p><blockquote><a href = “#”></a></blockquote></p>

Если прописать такой селектор P > a, то применятся ли стили к ссылке в вышеприведенном примере? Нет, потому что она еще вложена в другой тег, то есть не является напрямую дочерней.

Соседние селекторы

Последнее, что мы сегодня рассмотрим. Если прописать в css так:
.class1 + .class4 {}, то этот селектор выберет элемент с атрибутом class = "class4", и этот элемент должен стоять в HTML-коде сразу же за элементом с классом class1. Только в этом случае все будет работать. Опять же рассмотрим на примере:

<p class = “class1”></p> <img> <p class = “class4”></p>

Сработает ли вышеуказанный селектор (.class1 + .class4 {})? Нет, потому что элементы не стоят рядом. Между ними находится тег img. Вот если его удалить, тогда все заработает.

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

Приоритет css селекторов

Чтобы определить, какие стили являются более приоритетными, пользуйтесь простыми правилами:
Идентификатор является самым приоритетным селектором. Если у элемента есть стилевой класс и id, и в обоих назначены одинаковые свойства с разными значениями, то будет выполнены те стили, которые записаны для идентификатор.

Класс является более приоритетным селектором, чем селектор тега (p, table, ul). Псевдокласс имеет такой же вес, что и простой класс. p:first-line приоритетнее, чем .firstline, потому что во втором селекторе просто класс, а в первом — селектор тега + псевдокласс.

Еще одно полезное правило — чем конкретнее селектор, тем более приоритетными являются стили для него. Например, между body и p битву выигрывает абзац, поскольку это более конкретный селектор, чем body (потому что это вся страница, то есть не очень конкретно). Table p, в свою очередь, конкретнее, чем просто p. В общем, просто знайте о таких правилах.

Итог

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

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

dolinacoda.ru

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

Это могут быть:

+ Текст (вполоть для каждой буквы, каждого абзаца и.т.д.)

+ Изображения

+ Таблицы (каждая их строка, столбец или ячейка, и.т.д.)

+ Списки

+ и.т.д.

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

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

В технологии CSS это можно сделать с помощью так называемых селекторов.

Селекторы ( от англ. select — выбирать) — это элементы каскадной таблицы стилей CSS, которые указывают на тот элемент на веб-странице, к которому должны будут применяться стили.

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

В CSS селекторы располагаются самой первой составляющей стиля.

Синтаксис здесь следующий:

селектор {  стили, которые будут применяться к элементу выбранному этим селектором  }

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

По-сути, весь CSS-файл и состоит из таких конструкций, указания селекторов и стилей, которые к ним относятся.

селектор1 {   стили  }    селектор2 {   стили  }    селектор3 {   стили  }  и.т.д.

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

Курс «Быстрый старт в CSS».

webgyry.info

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

Селекторы – это правила, на основании которых осуществляется выбор элементов в HTML документе для того чтобы к ним применить определённые стили с помощью свойств CSS.

Например:

  p {  text-align: center;  font-size: 20px;  }  

где: p – это селектор, text-align и font-size – это свойства, а center и 20px – значения.

Основные виды селекторов

Основные виды:

• селектор элемента (например: div);
• селектор класса (например: .center);
• селектор идентификатора (например: #footer);
• селектор * (выбор всех элементов);
• селекторы атрибутов (например: [href*="youtube"]);
• селекторы псевдоклассов (например: p:first-of-type).

Селектор: элемент

Выбор всех элементов в HTML документе, имеющих указанный тег.

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

Выбор всех элементов в HTML документе, имеющих указанный класс.

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

Выбор элемента в HTML документе, имеющего указанный идентификатор.

Селектор: *

Выбор всех элементов в HTML документе.

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

Селекторы атрибутов предназначены для выбора элементов в зависимости от указанного атрибута элемента или его значения. Различают следующие виды атрибутов: [атрибут], [атрибут=значение], [атрибут^=value], [атрибут|=value], [атрибут$=value], [атрибут*=value], [атрибут~=value].

Селектор: [атрибут]

Выбор всех элементов в HTML документе, имеющих указанный атрибут.

Селектор: [атрибут=значение]

Выбор всех элементов, имеющих атрибут="значение".

Селектор: [атрибут^=value]

Выбор всех элементов, имеющих атрибут, значение которого начинается с value.

Селектор: [атрибут|=value]

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

Селектор: [атрибут$=value]

Выбор всех элементов, имеющих атрибут, значение которого заканчивается на value.

Селектор: [атрибут*=value]

Выбор всех элементов, имеющих атрибут, значение которого содержит подстроку value.

Селектор: [атрибут~=value]

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

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

Псевдоклассы используются для определения особого состояния элемента. В отличие от настоящих классов, они явно не указываются в HTML. В CSS имя псевдокласса начинается с знака двоеточия(:). Различают следующие виды псевдоклассов: :link, :visited, :active, :hover, :focus, :lang(язык), :first-child, :first-of-type, :last-child, :last-of-type, :only-child, :only-of-type, :nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n), :root, :empty, :target, :enabled, :disabled, :checked, :not(selector).

Селектор :link

Выбор всех не посещённых ссылок.

Селектор :visited

Выбор всех посещённых ссылок.

Селектор :active

Выбор элемента, при нажатии на него.

Селектор :hover

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

Селектор :focus

Селектор :focus предназначен для выбора элемента, который находится в фокусе. Он предназначен для элементов, которые принимают события клавиатуры или других устройств ввода.

Селектор :lang(язык)

Селектор :lang() используется для выбора элементов с языковым атрибутом, которые имеют указанное значение.

Селектор :first-child

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

Селектор :first-of-type

Псевдокласс :first-of-type применяется для выбора указанных элементов, если они являются первыми дочерними элементами данного типа (тега) своего родителя. В отличие от псведокласса :first-child, данный псевдокласс :first-of-type учитывает только элементы с указанным тегом.

Селектор :last-child

Псевдокласс :last-child применяется для выбора указанных элементов, если они являются последними дочерними элементами своего родителя.

Селектор :last-of-type

Псевдокласс :last-of-type применяется для выбора указанных элементов, если они являются последними дочерними элементами данного типа (тега) своего родителя. В отличие от псведокласса :last-child, данный псевдокласс :last-of-type учитывает только элементы с указанным тегом.

Селектор :only-child

Псевдокласс :only-child применяется для выбора указанных элементов, если они являются единственными дочерними элементами своего родителя.

Селектор :only-of-type

Псевдокласс :only-of-type применяется для выбора указанных элементов, если они являются единственными дочерними элементами данного типа (тега) своего родителя. В отличие от псведокласса :only-child, данный псевдокласс :only-of-type учитывает только элементы с указанным тегом.

Селектор :nth-child(n)

Псевдокласс :nth-child(n) применяется для выбора указанных элементов, если они являются n-ыми дочерними элементами своего родителя. Отсчёт элементов начинается с 1. В псевдоклассе :nth-child(n) вместо n можно использовать ключевые слова odd и even, которые предназначены для выбора дочерних элементов, которые имеют соответственно чётные или нечётные индексы (индексы дочерних элементов начинаются с 1). Кроме этого в псевдоклассе :nth-child можно вместо n использовать формулу an + b, где a и b – это числа, задаваемые пользователем. А n – это счётчик, который принимает значения: 0, 1, 2, 3, ….

Селектор :nth-last-child(n)

Псевдокласс :nth-last-child(n) аналогичен классу :nth-child(n) с разницей в том, что отсчёт дочерних элементов ведётся с конца. Также в псевдоклассе :nth-last-child(n) вместо n можно использовать odd, even или формулу an + b.

Селектор :nth-of-type(n)

Псевдокласс :nth-of-type(n) применяется для выбора указанных элементов, если они являются n-ыми дочерними элементами данного типа (тега) своего родителя. В отличие от псведокласса :nth-child(n), псевдокласс :nth-of-type(n) учитывает только элементы с указанным тегом. Кроме этого, данный псевдокласс :nth-of-type(n) также позволяет использовать ключевые слова odd, even и формулу an+b.

Селектор :nth-last-of-type(n)

Псевдокласс :nth-last-of-type(n) аналогичен классу :nth-of-type(n) с разницей в том, что отсчёт дочерних элементов данного типа (тега) ведётся с конца.

Селектор :root

Псевдокласс :root предназначен для выбора корневого элемента HTML документа, т.е. элемента <html>. В отличие от селектора html {...} данный псевдокласс имеет более высокий приоритет:

Селектор :empty

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

Селектор :target

Псевдокласс :target предназначен для выбора элемента с идентификатором (например: part1), который указан в URL после символа #.

Селектор :enabled

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

Селектор :disabled

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

Селектор :checked

Псевдокласс :checked предназначен для выбора элементов radio (<input type="radio">), checkbox (<input type="checkbox">) и option, которые находятся во включенном положении.

Селектор :not(selector)

Псевдокласс :not(селектор) предназначен для выбора всех элементов, которые не попадают под действие указанного селектора.

itchief.ru

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

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

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

Пример правила 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