Селекторы. CSS-селекторы
Поскольку мы не хотим стилизовать все наши элементы HTML одновременно, нам требуется возможность выбрать подмножество этих элементов.
Селекторы CSS определяют, к каким элементам мы хотим применить стиль.
Базовые селекторы тегов
Нацелиться на базовые теги HTML легко: просто используйте имя тега.
Есть прямая связь между именем тега HTML и используемым селектором CSS.
Классы
Учитывая, что мы, вероятно, не желаем стилизовать все абзацы или все заголовки одинаково, нам надо их различать.
Из всех атрибутов HTML атрибут class является наиболее важным для CSS. Он позволяет определить группу элементов HTML, на которые мы можем точно нацелиться. Просто поставьте точку перед именем класса который вы хотите использовать:
Date { color: red; }
С другой стороны есть атрибут HTML class со значением date . Он должен совпадать с именем класса CSS.
Вы можете использовать любое имя для вашего класса, но оно не должно начинаться с цифры.
Селектор класса .date будет нацелен на все элементы HTML с атрибутом class="date" . Таким образом, следующие элементы HTML все будут стилизованы:
Мероприятие произойдёт в субботу.
Имейте в виду, что имя тега не важно , учитывается только атрибут class .
Идентификаторы
Можно также использовать атрибут id в вашем HTML и определить его в вашем CSS с помощью решётки:
#tagline{ color: orange;}
Этот заголовок будет оранжевым.
Идентификаторы похожи на классы, так как они тоже основаны на атрибуте HTML.
Пример
Объединение селекторов
Давайте воспользуемся нашим предыдущим примером, в котором мы хотим сделать наши даты красными:
Мероприятие произойдёт в субботу.
Если мы захотим вместо этого, чтобы наши даты внутри отображались синим цветом? Мы можем добавить следующее правило CSS:
Em.date { color: blue; }
em.date объединяет в себе:
- селектор тега em ;
- селектор класса .date .
Он будет применяться только к элементам . Это не повлияет на другие .date или .
Иерархия селекторов
Пробел в селекторе определяет отношение предок/потомок. Скажем, мы хотим, чтобы ссылки в нашем заголовке были красного цвета:
Header a { color: red; }
Псевдоклассы
Элементы HTML могут иметь разные состояния. Наиболее распространённый случай - когда вы наводите курсор на ссылку. В CSS возможно применить другой стиль, когда происходит такое событие.
Псевдоклассы привязаны к обычным селекторам и начинаются с двоеточия.
Всем привет, хабрчане.
Сегодня CSS окружает нас вокруг, и даже маломайский программист должен понимать его.
Самыми используемыми являются старые добрые #id и.class они знакомы всем, кто хоть раз работа с CSS.
На этом конечно мир Селекторов далеко не ограничивается. Я уже довольно давно работаю с CSS и хочу поделится как можно большим количеством полезных селекторов. Все они определяют стиль того или иного объекта.
CSS Selectors
Объясняю многие селекторы применимо к указанному примеру.
.class
(Пр. .main) Данный селектор объединяет все элементы с классом «main». Родился он давно и активно учувствует в разработке.#id
(Пр. #Block_Form) Этот селектор объедение элементы с id=«Block_Form» В чем скажите разница между.class и #id - а разницу можно понять на примере: то что ПАСПОРТНЫЙ НОМЕР = id, ФАМИЛИЯ = class. Также немало важно то, что - Идентификатор (id) можно вызвать из скрипта используя функцию GetElementById, в отличие от класса.Класс может быть использован многократно, идентификатор же должен быть уникальным.
*
Выбирает, объединяет все элементы(Пр. *) { background-color:yellow; })
element
(Пр. p) Объединяет все элементы тега p.element,element
(Пр. div,p) Объединяет все элементы div и все элементы p.
Так же в эту группу можно выделить похожие селекторы:
element element
(Пр. div p) Выбирает все элементы p внутри div.element>element
(Пр. div>p) Объединяет все p для которых родителем выступает div.element+element
(Пр. div+p) Объединяет все p которые расположены сразу после div. (Пр. ) Объединяет все элементы с атрибутом target (Пр. ) Объединяет все элементы с заданным target="_blank" (Пр. ) Объединяет все элементы, которые в своем title содержат «Apple» (Пр. ) Объединяет все элементы с атрибутом class начиння с «top»Все теги написаны были без "<>".
Дальше считаю обязательно нужно показать именно эти селекторы, так как они являются очень важными и крайне часто используются в решении многих задач - от Простых анимашек с наведением курсора, оформлением ссылок, картинок и прочего до более глобальной цели уменьшения кода в целом.
Так же их называют Псевдокласы:
:link
(Пр. a:link) Объединяет все ссылки, которые еще не посещались (Пр. a:visited) Объединяет все ссылки, которые пользователь уже успел посетить:active
(Пр. a:active) Псевдокласс:active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.:hover
(Пр. a:hover) Когда проводишь мышкой, ссылка может менять стиль:focus
(Пр. input:focus) Изменяет стиль при фокусировке. на практике часто используется для подсветки полей формы при фокусировке на нем:first-letter
(Пр. p:first-letter) Определяет стиль для первого символа в тексте элемента:first-line
(Пр. p:first-line) Определяет стиль первой строки. Использую для изменения цвета текста, цвета фона и шрифта, но как показывают народные хабрумельцы на этом его функции не ограничиваются:first-child
(Пр. p:first-child) Что бы просто объяснить - применяет стилевое оформление к первому дочернему элементу своего родителя. В примере если р есть первым элементом своего родителяДальше идут два очень интересных класса:
:before
(Пр. p:before):after
(Пр. p:after)Они применяются в тех случаях, когда - нужно отобразить нужный контент до или после содержимого элемента, к которому он добавляется. Работает совместно со свойством content:. Так же я их использую как дополнительные элементы вместо div, в таком случае нужно прописывать content:"";. Также нужно помнить о том, что при добавлении:before к блочному элементу, значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block. При добавлении:before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
:before наследует стиль от элемента, к которому он добавляется.
:lang(language)
(Пр. p:lang(it)) Довольно простой, но порой нужный элемент - для примера: Определяет стиль каждого p с атрибутом lang, значение которого начинается с «it»Селекторы CSS3
Данные селекторы вызывают большой интерес, так как они мало кем используются и, конечно, хочется разобраться как ими пользоваться, поэтому буду приводить примеры. Также в данной группе селекторов в многострадальном IE8 и раньше DOCTYPE должен быть объявлен.
element1~element2
(Пр. p~ul)p~ul { background:red; } Устанавливает цвет фона для всех ul элементов, которые предшествуют p с таким же родителем. Грубо говоря - на этом примере, красным будет бэкграунд только у тех «списков» которые стоят после родителя тега р.
- Item
- Item
- Item
- Item
- Item
- Item
а в этом случае поля Айтемов будут иметь бэк-цвет - красный. (Пр. a) По примеру определяет стиль каждого a для которого значение элемента src начинающегося с «https». Вот еще пример:
Item4
Проще говоря – данный селектор дает возможность установить цвет фона на всех div элементов, которые имеют значение атрибута класса, начинающихся с «тест» – а именно item3, item4. (Пр. a) Выбирает каждый тег a, для которого SRC значение атрибута заканчивается на ". PDF. И вот еще один наглядный пример:
Item4
На этом примере очень хорошо будет видно использование данного селектора, а именно в Красный цвет перекрасятся Item1 (по тому что класс заканчивается на _test) и item3. (Пр. a) Выбирает каждый тег a, для которого значение атрибута SRC содержит подстроку «w3schools».
Item4
В этом примере результатом будут закрашенные строки item1, item3, item4.
:first-of-type
(Пр. p:first-of-type) Задает правила стилей для первого элемента в списке дочерних элементов своего родителя.:last-of-type
(Пр. p:last-of-type) Соответственно задает правила стилей для последнего элемента в списке дочерних элементов своего родителя.:only-of-type
(Пр. p:only-of-type) А вот этот применяется к дочернему элементу указанного типа, только если он единственный у родителя. Аналогично как:first-of-type:last-of-type или:nth-of-type(1):nth-last-of-type(1).:only-child
(Пр. p:only-child) Такой элемент применяется по примеру к дочернему элементу p, только если он единственный у родителяСледующие два можно также неплохо использовать для определенной последовательности – нечетные (odd), четные(even) или число(1,2,3… или выражения 2n+1), заданные в (Х):
:nth-child(n)
(Пр. p:nth-child(2)) Для каждогоКоторый является вторым дочерним элементом у родителя.
:nth-last-child(n)
(Пр. p:nth-last-child(2)) Тот же смысл, что и у предыдущего, кроме того, что отсчет ведется не от первого элемента, а от последнего.:nth-of-type(n)
(Пр. p:nth-of-type(2)) Используется для добавления стиля к элементам указанного типа на основе нумерации. Например, для картинок у заглавия применить со значением Float: -left or –right.:nth-last-of-type(n)
(Пр. p:nth-last-of-type(2)) Тоже, что и предыдущий, но отсчет ведется не от первого элемента, а от последнего.:last-child
(Пр. p:last-child) Данный селектор задает стилевое оформление последнего элемента своего родителя.Также стоит выделить:
:root
(Пр. :root) Такой селектор определяет корневой элемент документа, иначе говоря - .:empty
(Пр. p:empty) Определяет пустые элементы - без каких-либо дочерних элементов, текста или пробелов.:target
(Пр.#news:target) Грубо говоря – это определение на основе целевого элемента. В примере определение текущего id - #news element. Используется для URL.:enabled
(Пр. input:enabled) Применяется к формам, как доступ к доступным (не заблокированным - disabled) элементам форм, простите за тавтологию.:disabled
(Пр. input:disabled) Иначе говоря – применимо к стилю заблокированных элементов формы.:checked
(Пр. input:checked) Данный псевдокласс применим к элементам интерфейса, таким как переключатели (checkbox) и флаги (radio), когда они включены, конечно же.:not(selector)
(Пр. :not(p)) На примере стиль применяется ко всем элементам, которые не p. В качестве селектора могут быть псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов.". Итак, селектор - это элемент, к которому применяется объявление в правиле стиля.
Термины, используемые в описании правил CSS.
Рис.1. Обычное правило CSS. Рис.2. Пример правила CSS.
Коротко про синтаксис записи правил CSS:
- Объявление стиля в парвиле берётся в фигурные скобки - {}
- Свойство и значение в объявлении разделяются двоеточием - :
- В одном объявлении (в одной паре фигурных скобок) может быть указано сколько угодно пар свойство: значение
- В конце каждой пары свойство: значение ставится точка с запятой - ;
- После последней пары свойство: значение точку с запятой ставить не обязательно.
- Синтаксис CSS не чувствителен пробельным символам (пробелы, табуляция, переносы сток).
- Синтаксис CSS не чувствителен к регистру символов.
В качесте селекторов может выступать любой тег HTML, также есть селекторы класса либо id-селекторы. Рассмотрим всё по порядку.
Селекторы тегов
Как писалось ранее, любой тег может быть селектором в правиле CSS. Рассмотрим пример.
Привет!
Заголовок h2!
Кстати, можно группе селекторов задать одно объявление. Например, мы хотим чтобы теги заголовков
,
и
были синего цвета и выравнивались по центру блока. Для этого можно в селекторе перечислить эти теги, разделив их запятой. Вот пример кода:
были синего цвета и выравнивались по центру блока. Для этого можно в селекторе перечислить эти теги, разделив их запятой. Вот пример кода:
Привет h1!
Заголовок h2!
Такая запись стиля равносильна следующей группе правил:
Селекторы потомков
Можно назначать стилевые правила элементам в зависимости от того, вложен ли этот элемент в другой. Если один тег вложен в другой, то вложенный тег называется его потомком, а тег в который вложен потомок называется предком. Например, нужно задать абзацам
Внутри таблицы