Css селекторы правила. Специальные селекторы в CSS. Соседние, дочерние, контекстные селекторы и селекторы по атрибуту тега. Дефис в значении атрибута
В прошлом уроке мы разбирали способы подключения CSS. Теперь перейдём к самому языку.
Как и любой другой язык, CSS имеет свой, однако предельно простой синтаксис. Состоит всего из двух компонентов:
1. Селектор
(выбор объекта, с которым будем работать. Например, заголовок, div, таблица и тд.)
2. Блок стилей
- описание одного или нескольких свойств объекта - цвет, размер и тд. Заключается в фигурные скобки {}
Мы видим, как заголовку - селектор, в блоке стилей присваивается свойство цвет текста (color
) - синий.
Блок стилей
состоит из свойств
и их значений
, которые при перечислении разделяются точкой с запятой (;)
, как в примере ниже.
Теперь мы добавляем ещё одно свойство
- форматирование текста (font)
. В нём мы придаём значение
размер текста - 20 пикселей
.
Пример работы CSS
Создайте в любом месте папку, например, урок 2 . В ней создайте файл style.css . В него скопируйте весь код ниже. В коде CSS мы задаём свойства для тега и заголовкови
.
Код CSS (файл style.css )
Body{
background: gray;
color: white;
}
h1{color:#0085cc;}
h2{color:white;}
Обратите внимание, не будет разницы, записывать блок стилей в строчку (h1,h2) или в столбик (body). И тот, и другой вариант будут работать. Выбирайте так, как Вам удобно.
Теперь создаём HTML-файл. Неважно, какое будет название, главное, чтобы путь к файлу с CSS кодом был указан верно. Указывается также как и в ссылках, путях к изображениям. В примере ниже указан путь (style.css) в ту же директорию, что и html-файл. То есть оба файла должны быть в одной папке.
Код HTML
Заголовок h1
Заголовок h2
Результат работы кода можно увидеть по ссылке ниже.
Селекторы CSS
В примерах выше в качестве селекторов использовались элементы страницы : body, h1, h2. Однако бывают ситуации, когда нужно работать с конкретным элементом, а не со всеми. Например, все заголовки были синего цвета, а один, в конце, чёрного. Для это существуют разные виды селекторов. Давайте рассмотрим их подробнее.Идентификаторы
Идентификатор элемента - это селектор, который присваивается одному элементу и делает его уникальным. Задаётся при помощи параметра id .
Данному параграфу присвоен id. У него будут уникальные свойства.
Параметры текста останутся по умолчанию.
Разберём пример
Код HTML и CSS
Текст который будет синего цвета, потому что есть id
Цвет текста останется по умолчанию.
Сначала в стилях у всех параграфов в свойстве цвета указан черный цвет, а текст параграфа с id "blue" будет синим. Селектор в данном случае состоит из элемента (p - параграф), разделителя (# - обозначение идентификатора) и имени идентификатора (blue).
Важно отметить то, что идентификатор в теории даётся только одному элементу, которому хотим придать уникальные свойства. Да, в некоторых браузерах, если дать один и тот же идентификатор двум элементам, то может сработать. Однако, такое получится не во везде.
Если хотите задать стили для нескольких элементов, то следует использовать классы .
Классы
Класс (class) - это селектор, который позволяет применить стили к одному и более элементам. Например, id применим только к одному уникальному элементу. В качестве значения принимается имя элемента.
Рассмотрим пример:
Код HTML и CSS
Цвет текста чёрный.
Текст синего цвета.
Текст полужирный и синего цвета.
Цвет текста чёрный.
В результате параграф с идентификатором (id
) blue будет иметь текст синего цвета, элементы с class
blue будут выделены полужирным шрифтом и синим цветом. А все остальные элементы p
будут иметь шрифт чёрного цвета.
Как видите, класс можно применить несколько раз. Соответственно всё элементы будут иметь свойства описанные для данного класса.
Унифицированные селекторы
Унифицированные селекторы (.) - это селектор, который можно присвоить разному типу элементов, например, и заголовкам, и параграфам, и блокам (div). Самый распространённый вариант. До этого мы использовали конструкцию в коде CSS p#blue и p.blue , то есть сначала указывали тип элемента (p - параграф), а потом уже сам идентификатор или класс. Так вот можно указывать конструкцию проще, сразу начинать с .blue . Подобный селектор будет применим уже не только к параграфам, а к другим элементам.
Код HTML и CSS
Заголовок с идентификатором.
Цвет текста чёрный.
Текст полужирный и синего цвета.
Текст в строчном элементе тоже полужирный и синего цвета
В результате унифицированный селектор, в данном случае класс .blue
, мы применили и к парафграфу (p), и к блоку (div), и к строковому элементу (span). Результат везде одинаковый - текст полужирный и синего цвета.
Контекстные селекторы
Контекстный селектор - это селектор, который выделяет один элемент в группе других элементов. В написании выделяется пробелом. Чтобы было легче, сразу перейдём к примеру. Допустим мы хотим, чтобы полужирный текст, содержащийся в параграфах выделялся ещё каким-либо цветом.
Код HTML и CSS
Цвет текста чёрный. Но теги полужирный шрифта тут не упоминаются.
Обычный полужирный текст, который не содержится в параграфе. Поэтому и цвет у него не меняется.
И внимание!!! Параграф с фразой полужирным шрифтом синего цвета
Соответственно синим будет выделен только тот полужирный текст (strong), который будет в параграфе (p).
Группировка селекторов
Группировка селекторов - это такая конструкция таблицы стилей, где блок объявления стилей обращён к одному и более ранее упоминаемым элементам и добавляет новое свойство.
По тексту сложно понять. Лучше сразу к примеру.
H1, h2, h3{ color:blue; }
h1{ font-size:18px; }
h2{ font-size:16px; }
h3{ font-size:14px; }
В первой строке мы упоминаем сразу несколько элементов
. Для того, чтобы обратиться сразу к нескольким элементам надо в селекторе перечислить их через знак ,
(запятую) и пробел. Перед последним перечисляемым элементом запятая и пробел НЕ нужны
.
Последующими упоминаниями данных элементов мы добавляем им значения новых свойств. В данном случае размера шрифта.
Код HTML и CSS
Заголовок h1
Заголовок h2
Заголовок h3
В результате все заголовки будут синего цвета. Однако разных размеров, так как последующие записи в таблице стилей давали заголовкам разный размер.
Использование группировки - вопрос спорный. Среди преимуществ можно отметить то, что удаётся избегать крупных частей кода, которые по содержание будут во многом дублировать себя. Из недостатков можно сказать, что использование подобного кода, где свойства к тому или иному элементу дописываются в разных местах достаточно проблемно и неудобно. Конечно, при грамотном последовательном написании можно избежать подобных минусов, но это уже другой вопрос.
Спасибо за внимание! Урок окончен!
CSS - каскадные таблицы стилей.
Внимание! У Вас нет прав для просмотра скрытого текста.
Мир CSS - это волшебный мир бесконечного комбинирования свойств и внешнего вида (стилей) -объектов и элементов. И, самое главное действующее лицо на этом «празднике жизни» CSS - это селектор CSS .
Селекторы в CSS - термины и определения
Как известно, стили (внешний вид и свойства) -элементов
могут быть , и .
Встроенные стили
Встроенные стили указываются напрямую в HTML-тегах и с ними, пожалуй - проще всего. Действие встроенных стилей распространяется исключительно на тот HTML-элемент, в открывающий тег которого он вставлен (встроен). Например, вот такой код: text - создаст красный фон только внутри элемента span и не более того. Результат - text
Внутренние стили
Внутренние стили указываются в виде отдельно стоящего кода, который может располагаться в исходном коде веб-страницы, где только ему не заблагорассудится - в начале страницы, в её конце или посредине. Пример кода внутреннего стиля:
Внешние стили
Самый сложный вариант - это внешние стили. В случае использования внешних стилей, код каждого стиля записывается во внешнем файле с расширением «.css». Таких файлов может быть несколько и находится они могут где угодно, даже на другом сайте.
В отличие от встроенного стиля, действие кода внутреннего и внешнего стилей распространяется сразу на всю веб-страницу. При этом, на поле самой веб-страницы может находиться огромное количество различных похожих HTML-элементов. Чтобы точно указать браузеру к какому элементу относится тот или иной стиль, в технологии CSS применяются классы, псевдоклассы, идентификаторы и селекторы . Таким образом, «селектор в CSS» - это служебный символ для описания элемента или группы элементов, к которым применяется указанное правило стиля.
Прим. Справедливости ради нужно отметить, что такие вещи, как - классы и идентификаторы - относятся больше в HTML-коду, нежели к CSS-стилям. И только «CSS-селекторы» и псевдоклассы - это истинно CSS-наработка. О чём, собственно и речь.
Селектор в CSS - «мыслью по древу»
Исходя из вышесказанного, для себя лично, я так определил понятие термина «селектора в CSS»:
«селектор в CSS» - это служебный знак, который сообщает браузеру, где и как применить указанный стиль HTML-элемента.
Как и в обычной жизни, обозначает всего лишь банальный выбор HTML-элемента для последующего назначения ему стиля (внешнего вида, свойств и т.д.).
Зачем нужен селектор в CSS
Селектор в CSS - это, своего рода - связующее звено между кодами CSS и HTML. Установив селектор (сделав выбор элемента), мы указываем браузеру место, объект и правила для применения прописанных CSS-свойств (стилей). Чтобы перейти от зауми к практике, наверное, будет уместно вспомнить про жизнь в CSS без селекторов.
Глобальные свойства в CSS
(жизнь без селекторов)
Жизнь без селекторов возможна! Но, разве это жизнь? Без селекторов, каскадные таблицы стилей (CSS) полностью теряют свой смысл. Во-первых, в имя класса без селектора возможно записать только имя реального тега из реальной существующей спецификации . Во-вторых, такая запись будет распространяться абсолютно на все теги с указанным именем на HTML-странице, которые только там найдутся.
Например, запись вида:
A{background:#000;}
- закрасит в чёрный цвет все ссылки на странице
table{background:#000;}
- закрасит в чёрный цвет все таблицы на странице
div{background:#000;}
- закрасит в чёрный цвет все блоки (div-ы) на веб-странице, и т.д.
Короче, все прописанные CSS-стили и свойства будут применяться не выборочно, а глобально, распространяясь в своём действии сразу на все теги страницы...
Безусловно, в такой записи без селекторов есть своя прелесть. Ведь, именно так, в CSS объявляются глобальные стили для всех HTML-объектов. Самый распространённый пример объявления глобальных свойств - это кроссбраузерный сброс отступов (маржинов и паддингов). Его код в CSS выглядит, примерно так: html,body,div,ul,li,dl,dt,h1,h2,h3,h4,h5,h6{margin:0;padding:0;} , хотя могут быть и другие варианты. Другой популярный пример глобальных настроек (стилей), действующих на все HTML-объекты на странице - это кроссбраузерное форматирование новых : header,section,footer,aside,nav,article{display:block;} . Тут, опять-таки, тоже возможны другие варианты.
Однако, в любом случае - всё это будут глобальные стили CSS, установленные для всего веб-документа - свойства, распространяющиеся абсолютно на все указанные теги и элементы страницы HTML. А вот, чтобы настройки CSS подействовали только на указанный нужный элемент или группу элементов HTML - потребуется селектор .
Что такое селектор в CSS
Подведём итоги.
Первое. Код самого HTML-элемента и код его стиля могут находиться в разных местах веб-страницы, сайта и даже на разных сайтах.
Второе. Чтобы обозначить HTML-элемент, ему присваивается класс или идентификатор, код которого добавляется в код HTML-элемента.
Приветствую Вас, уважаемые читатели. В предыдущих статьях мы изучали, в основном, атрибуты стилей CSS. Их очень много. Одни задают параметры шрифтов, другие параметры фона, третьи параметры отступов и рамок.
В этой статье мы поговорим о селекторах стилей. В одной из статье мы уже затрагивали . А сегодня рассмотрим еще несколько видов селекторов, которые не явно привязывают правило стиля к элементу веб-страницы. Это так называемые специальные селекторы. Их бывает несколько видов.
Комбинаторы в CSS (Соседний, дочерний и контекстный селекторы)
Комбинаторы — это разновидность css селекторов, привязывающие правило стиля к элементу web-страницы на основании его местоположения относительно других элементов.
Первый комбинатор символ плюс (+) или соседний селектор . Плюс устанавливается между двумя селекторами:
<селектор 1> + <селектор 2> { <стиль> }
Стиль в этом случае применяется к селектору 2 , но только в том случае если он является соседним для селектора 1 и идет сразу после него. Рассмотрим пример:
strong + i {
}
...
Это обычный текст. Это жирный текст, обычный текст, красный текст
Это обычный текст. Это жирный текст, обычный текст, и это обычный текст.
Результат:
Стиль описанный в примере будет применен только к первому тексту заключенному в тег , т.к. он следует сразу же после тега .
Комбинатор тильда (~) также применяется к соседним селекторам, но в этот раз между ними могут быть другие элементы. При этом оба селектора должны быть вложены в один и тот же родительский тег:
<селектор 1> ~ <селектор 2> { <стиль> }
Стиль будет применен к селектору 2 , который должен следовать за селектором 1 . Рассмотри пример:
strong ~ i {
color: red; /* Красный цвет текста */
}
...
Это обычный текст. Это жирный текст, обычный текст, красный текст к нему применилось правило соседних селекторов.
Это обычный текст. Это жирный текст, обычный текст, а это красный текст.
Результат:
Как видим, в этот раз правило стиля сработало для обоих текстов заключенных в тег , несмотря на то, что во втором случае между тегом и стоит тег .
Комбинатор > относится к дочерним селекторам . Позволяет привязать стиль CSS к элементу веб-страницы, непосредственно вложенному в другой элемент:
<селектор 1> > <селектор 2> { <стиль> }
Стиль будет привязан к селектору 2 , который непосредственно вложен в селектор 1 .
div > strong {
}
...
И результат:
Как видно на рисунке, правило стиля подействовало только на первый тег
, который непосредственно вложен в тег
, поэтому правило на него не действует. Следующим рассмотрим контекстный селектор <пробел>
. Он позволяет привязать CSS стиль к элементу вложенному в другой элемент, причем может быть любой уровень вложенности: <селектор 1> <селектор 2> { <стиль> } Стиль будет применен к селектору 2
, если он так или иначе вложен в селектор 1
. Рассмотрим предыдущий пример, только при описании CSS правила применим контекстный селектор: div strong { Это обычный текст. А это тоже курсивный жирный текст. Обычный текст и просто жирный текст Результат: Как видим, на этот раз правило подействовало на оба тега
, даже на тот, который вложен и в контейнер
. На тег
, который просто вложен в абзац
правило css никак не действует. Селекторы атрибутов — это специальные селекторы, которые привязывают стиль к элементу на основании, присутствует ли в нем определенный атрибут или имеет ли он определенное значение. Существует несколько вариантов применения таких селекторов. Имеет вид: <селектор>[<имя атрибута тега>] { <стиль> } И привязывает стиль к тем элементам, внутри которых добавлен указанный атрибут. Например: strong{ Автомобиль это механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами. Результат: На рисунке можно заметить, что правило css (красный цвет текста) применяется к элементу strong
, к которому добавлен атрибут title
. Синтаксис этого селектора следующий: <селектор>[<имя атрибута тега>=<значение>] { <стиль> } Привязывает стиль
к элементам, теги которых имеют атрибут с указанным именем
и значением
. Пример: a{ Результат: Как видим, оба элемента типа гиперссылка имеют атрибут target
, но правило css, которое увеличивает текст ссылки в полтора раза и изменяет его цвет в красный, применяется к тегу
у которого атрибут target
имеет значение «_blank»
. Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы задать правило стиля при наличии в списке значений атрибутов требуемого значения применяется следующий селектор: [<имя атрибута тега>~=<значение>] { <стиль> } Стиль применяется в том случае, если у атрибута имеется требуемое значение или оно входит в список значений, разделенных пробелами. Например: { Наш телефон: 777-77-77 Наш адрес: Москва ул. Советская 5 Получиться следующий результат: Правило применяется к элементу, у которого среди значений атрибута class
имеется значение tel
. В значениях идентификаторов и классов допускается использовать дефис. Для привязки стиля к элементам, значения атрибутов которых могут содержать дефис можно воспользоваться следующей конструкцией: [атрибут|="значение"] { стиль } Стиль применяется к тем элементам, у которых значение атрибута начинается с указанного значения после, которого идет дефис. Например: { Результат: В примере правило стиля применяется только к тем элементам списка, у которых имя класса начинается со значения «menu- „
. Данный селектор устанавливает стиль для элемента, если значение атрибута тега начинается с определенного значения. Может быть два варианта: [<имя атрибута тега>^=<подстрока>] { <стиль> } В первом случае стиль
применяется ко всем элементам, теги которых имеют атрибут с указанным именем
и значением, начинающимся с указанной подстроки
. Во втором случае тоже самое, только к определенным элементам указанным в основном селекторе
. Пример: a{ Результат: В примере показано, как по разному отобразить внешние ссылки и внутренние ссылки. Внешние ссылки всегда начинаются со строки «http://». Поэтому в селекторе указываем, что стиль применять только к ссылкам, у которых атрибут href
начинается со значения http://
. Привязывает стиль к элементам, у которых значение атрибута заканчивается указанным текстом. Имеет следующий синтаксис: [<имя атрибута тега>$=<подстрока>] { <стиль> } В первом случае стиль
применяется ко всем элементам, у которых имеется атрибут
с указанным именем
и имеет значение оканчивающееся указанной подстрокой
. Во втором случае тоже самое, только к указанным селекторам
. Таким способом, например, можно по разному отображать различные форматы графических изображений. Например: IMG { Картинка формата gif Картинка формата png Результат: В примере все картинки с расширением gif будут отображаться с красной рамкой толщиной пять пикселей. Этот селектор привязывает стиль к тегам, значение атрибута которых содержат определенный текст. Синтаксис: [<имя атрибута тега>*=<подстрока>] { <стиль> } Стиль
привязывается к элементам, у которых имеется атрибут
с указанным именем и его значение содержит указанную подстроку
. Например: IMG { Картинка из папки gallery Картинка из другой папки Результат: В примере стиль применяется к картинкам, которые загружены из папки «gallery»
. На этом об селекторах атрибутов все. Все перечисленные методы можно комбинировать между собой: Селектор[атрибут1="значение1"][атрибут2="значение2"] { стиль } Кроме того напомню о специальных селекторах CSS: В следующих статьях мы рассмотрим также псевдоэлементы и псевдоклассы, которые предоставляют мощный инструмент управления стилями. На этом все, до новых встреч. Что такое селектор в css
– это описание того элемента или группы элементов, которое показывает браузеру какой элемент выбрать для применения к нему стиля. Давайте рассмотрим основные CSS селекторы. CSS селектор по классу Х
. Разница между id и классом в том, что один и тот же класс может быть у нескольких элементов на странице, а id всегда уникален. Классы стоит использовать для применения одного и того же стиля к нескольким элементам. CSS селектор по id
. Знак решетки перед CSS селектором Х выбирает элемент у которого id = Х. Навешивая стили по id всегда стоит помнить, что он должен быть уникальным – только один такой id должен быть на странице. Поэтому лучше использовать селекторы по классам, комбинациям классов или названиям тэгов. Тем не менее, селекторы по id отлично применяются в автоматизированном тестировании, т.к. позволяют сразу взаимодействовать именно с нужным элементом и иметь уверенность что он только один такой на странице. CSS селектор всех элементов
. Символ звездочки выбирает все элементы которые есть на странице. Многие разработчики используют его для того, чтобы убрать (обнулить) значения отступов (margin и padding) у всех элементов страницы. Тем не менее, на практике лучше так не делать потому, что этот CSS селектор довольно сильно грузит браузер перебором всех элементов на странице. Символ * также можно использовать чтобы выделить все дочерние элементы: #header * {
border: 5px solid grey;
}
В этом примере выделяются все дочерние элементы (потомки) элемента с #header . Но всегда стоит помнить, что этот селектор достаточно тяжел для браузера. CSS селектор типа
. Как выбрать все элементы одного типа, если у них нет ни id ни классов? Стоит использовать CSS селектор по типу элемента. К примеру, чтобы выбрать все упорядоченные списки на странице, используйте ol {...} как это показано выше. CSS селектор потомков
или CSS селектор дочерних элементов
используется чаще всего. Его используют если необходимо выбрать элементы определенного типа из множества дочерних элементов. Например, нужно выделить все ссылки, которые находятся в элементе li. В этом случае используйте этот селектор. Используя цепочки таких селекторов, всегда спрашивайте себя, а можно ли для выделения данного элемента использовать еще более короткую последовательность селекторов. Смежный селектор элементов
выбирает только
элемент типа Y, который идет сразу после элемента Х. В этом случае каждый параграф следующий сразу после каждого элемента div будет получать специальный тип и размер шрифта. CSS селектор потомков
. Разница между селекторами Х Y и X > Y в том, что рассматриваемый CSS селектор будет выбирать только непосредственные дочерние элементы (выберет только прямых потомков). К примеру: CSS селектор #content > ul выберет только ul, который является прямым потомком блока div с id="container" . Он не выберет ul, являющийся потомком первого li. Это достаточно выгодный по скорости работы CSS селектор. Селектор сестринских (саблинговых) элементов
менее строгий чем X + Y. Он выберет не только первый, но и все остальные элементы p, идущие за ol. Псевдо-класс:link
используется для выбора всех ссылок, на которые еще не кликнули. Если же нужно применить определенный стиль к уже посещенным ссылкам, то для этого используется псевдо-класс:visited
. CSS селектор по атрибуту
. В этом примере выбираются только те ссылки, у которых есть атрибут title. Звездочка означает, что искомое значение должно быть где-нибудь в атрибуте (в любой части атрибута href). Таким образом, будут выбраны и ссылки с https://www..stijit.. Ко всем выбранным ссылкам будет применен золотой цвет. На некоторых сайтах рядом со ссылками, ведущими на другие сайты, проставлены небольшие иконки со стрелочками, чтобы показать что это внешние ссылки. Карат “^” – это символ для обозначения начала строки. Таким образом для выбора всех тэгов, у которых href начинается с http, нужно использовать CSS селектор с каратом, как это показано на примере выше. Здесь используется регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением.jpg. Здесь мы применяем CSS селектор по пользовательскому атрибуту
. Добавляем наш собственный атрибут data-filetype в каждую ссылку: ссылка
Теперь, с помощью приведеного выше CSS селектора, можно выбирать все ссылки ведущие на картинки с любым расширением. Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных пробелом. Можно прописать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Таким образом можно указать, что ссылка является внешней и ведет на изображение. ссылка
С помощью такого приема мы можем выбирать элементы с нужными нам комбинациями атрибутов: /* Выбрать элемент, атрибут data-info которого содержит значение external */
a {
color: green;
}
/* Выбрать элемент, атрибут data-info которого содержит значение image */
a {
border: 2px dashed black;
}
Этот псевдокласс выделяет только такие элементы, как checkbox или radio button, причем только когда они уже в отмеченном состоянии. Псевдоклассы:before и:after очень полезные – они создают контент до и после выбранного элемента. Clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
Здесь при помощи псевдо-класса:after после блока с классом.clearfix создается пустая строка, после чего очищается. Этот подход используется если невозможно применить свойство overflow: hidden . Применяет к элементу определенный стиль, когда на него наводится курсор мыши. Старые версии Internet Explorer применяют:hover только к ссылкам. A:hover {
border-bottom: 1px dotted blue;
}
Псевдокласс not (отрицания)
бывает полезен когда, к примеру, нужно выбрать все div, за исключением того, который имеет id="content" . По такому же принципу можно выбрать все элементы кроме p: *:not(p) {
color: blue;
}
Псевдоэлементы могут использоваться для применения стилей к фрагментам элементов – к примеру к первой строке абзаца или первой букве в слове. Применимо только к блочным элементам. Выбор первой буквы параграфа: P::first-letter {
font-family: cursive;
font-size: 30px;
font-weight: bold;
padding-right: 1px;
}
Выбор первой строки в параграфе: P:first-line {
font-size: 28px;
font-weight: bold;
}
Псевдокласс first-child
выбирает только первого потомка родительского элемента. Часто используется чтобы убрать border в первом элементе списка. Этот псевдокласс был еще начиная с CSS 1
. Псевдокласс last-child
выбирает последнего потомка родительского элемента. Он появился только начиная с CSS 3
. Псевдокласс only-child
позволяет выбрать те элементы, которые являются единственными потомками для своих родителей. Выбирает дочерний элемент по номеру, указанному в параметре. Селектор nth-child
принимает целое число в качестве параметра, однако отсчет ведется c 1, т.е. если нужно выбрать второй пункт списка, используйте li:nth-child(2) . Все псевдоклассы с использованием nth-child появились только начиная с CSS 3
. Если у вас большой список элементов в ul и нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(109) , можно использовать селектор последних потомков nth-last-child
. Этот метод такой же как и предыдущий, но отсчет ведется с конца. Если на странице есть четыре неупорядоченных списка и нужно применить стиль только к третьему из них, не имеющему уникального id, стоит использовать nth-of-type. Псевдокласс nth-last-of-type(n)
предназначен для выбора n-ого элемента определенного типа с конца. Псевдокласс only-of-type
выбирает элементы, не имеющие соседей в пределах родительского элемента. К примеру можно выбирать все ul, которые содержат только одинокие li. Псевдокласс first-of-type
выбирает первый элемент заданного типа. Сегодня мы рассмотрим такое понятие как селекторы CSS и как с их помощью мы можем сократить нашу разметку HTML, сделав её чище. Селектор CSS – это тот элемент, к которому мы собираемся применять CSS свойства. Слово «селектор» говорит само за себя, оно обозначает выбор. P {color: red}
div span {background: green}
ul li {list-style: none}
В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:
На что стоит обратить внимание: Смотрим пример:
#first {color: red;} /* обращаемся к id с именем first */
.second {color: blue;} /* обращаемся к классу с именем second */
#first .second {color: orange;} /* обращаемся к классу с именем second, ТОЛЬКО если он находится ВНУТРИ тега с идентификатором first */
.first .third {color: grey;} /* обращаемся к классу с именем third, ТОЛЬКО если он находится ВНУТРИ тега с классом first */
В нашем случае последние две инструкции не сработают, так как у нас нет классов, вложенных внутрь тегов с заданными атрибутами. Как вы могли заметить, чтобы обозначить, что мы обращаемся именно к id, нужно перед его именем без пробелов поставить знак решётки (#), если мы обращаемся к классу, то перед именем класса должны поставить точку (.). Использование классов и идентификаторов очень удобно, но оно увеличивает нашу HTML разметку, в идеале (которого никогда нет) мы вовсе не должны их использовать, вместо них мы будем использовать комбинации и группировки селекторов, о них и будет вся остальная часть статьи, но! Но это совсем не означает, что вы должны полностью отказаться от использования классов и идентификаторов, просто вы должны иметь ввиду, что очень часто вместо создания нового class или id можно обойтись приёмами, описанными ниже и они также могут быть вполне удобны. Кроме приведённых выше различий, стоит ещё отметить, что у свойств заданных id приоритет выше, чем у свойств, заданных классу. То есть, если мы напишем:
То цвет текста станет красным, несмотря на то, что класс находится ниже по коду и если бы у них был равный приоритет текст стал бы синим. По синтаксису: в случаи с классом мы можем выбрать, у какого именно тега должен находиться данный класс, для этого после имени тега БЕЗ пробела мы должны обратиться к классу. Пример: Myclass {свойства} /* применятся ко всем тегам, которые содержат класс myclass */
div.myclass {свойства} /* применятся только к тегам div, которые содержат класс myclass */
Для id это тоже будет работать, но такая запись лишена всякого смысла, так как id не может повторяться на странице, а значит достаточно просто объявлять id, без тега к которому оно относится:
Вроде бы осталось только одно неоговорённое отличие, и оно касается темы, которую в ближайшем будущем я не планировал затрагивать на этом блоге – Javascript. Но всё же обязан доложить вам о нём: если вы хотите обратиться к элементу с помощью Javascript, то для этой цели очень удобным будет наличие id у этого элемента. Чтобы обратиться к элементу по его классу в Javascript нет такой встроенной возможности, вам придётся использовать вспомогательные функции + это не всегда кроссбраузерно. Итог: id и class используем, но в меру, при этом всегда спрашивая себя, а можно ли здесь обойтись без них и насколько это целесообразно. Div p {color: green;} /* Селектор по потомку */
p {color: red;} /* селектор по тегу */
Но как я уже писал в предыдущей статье, в первом случае CSS свойства применятся ко всем тегам p вложенным на ЛЮБУЮ глубину тега div. А что если мы хотим применить свойства только к прямым наследникам, то есть к первому уровню вложенности:
Третий уровень Прямой наследник (первый уровень) Второй уровень Прямой наследник (первый уровень) В таком случае мы должны использовать так называемый родственный селектор, для его обозначения используется угловая скобка, пробелы можете ставить, можете не ставить, я бы не советовал: Div>p {color: blue;} /* только первый уровень вложенности */
div p {color: blue;} /* абсолютно все параграфы внутри div */
С этим разобрались, у нас на вооружении уже 3 вида селекторов, теперь хочу вам рассказать о весьма необычном селекторе, который выделяется среди всех остальных – это так называемый универсальный селектор, который обозначается звёздочкой (*):
* {margin: 0; padding: 0;}
Так у меня начинается каждый новый проект, советую вам делать также. Универсальный селектор распространяется на все элементы страницы (теги), но имеет нулевой приоритет (ниже только отсутствие приоритета вовсе). Его обычно используют, чтобы перебить CSS свойства, которые браузеры устанавливают по умолчанию для некоторых тегов. Представьте себе, и такое имеет место быть! Достаточно многим тегам браузеры по умолчанию устанавливают свои свойства, например, тегу гиперссылки синий цвет текста и подчёркивание, тегу body они задают поля (padding) и тд. Нам это запоминать, знать и использовать совсем не к чему, поэтому самые банальные свойства мы сразу же убираем с помощью универсального селектора, однако я бы не советовал дописывать в него что-то ещё (или дописывать, но аккуратно), несмотря на наименьший (нулевой) приоритет универсального селектора, он в некоторых случаях всё же может перебить вам другие свойства, так что имейте это в виду. Кстати говоря, при работе с селекторами, как и при любой работе связанной с вёрсткой макета очень удобно использовать просмотр элементов страницы. Если вы ещё не в курсе таких вещей как Opera Dragonfly, Firebug и веб-инспекторы в целом, то вам без преувеличений срочно нужно прочесть статью по ссылке выше! А кто уже использовал подобные вещи, прошу дальше за мной. В отличие от классов, псевдо-классы не нужно указывать в HTML разметке, они сами вычисляются браузером. У нас есть 4 статических псевдо-класса и 3 динамических псевдо-класса, без учёта CSS 3, о нём ближе к концу. К статическим относятся (:first-child, :link, :visited, : lang()):
Прямой наследник (первый уровень) Третий уровень Прямой наследник (первый уровень) Второй уровень Прямой наследник (первый уровень) Результат: Естественно можно комбинировать селекторы как захотим, например: Div>span p:first-child {color: green;} /*сработает, если p является первым ребёнком своего родителя и находится внутри тега span, который является прямым потомком тега div */
Название представленного выше псевдо-класса говорит само за себя first-child - первый ребёнок. Следующие два статических псевдо-класса применяются только к тегу гиперссылки (:link, :visited), они применяют CSS свойства в зависимости от того, посещалась данная ссылка конкретным пользователем или нет: A:link {color: blue;} /* у не посещённых ссылок задаём синий цвет, и по умолчанию они подчёркнуты */
a:visited {color: green; text-decoration: none;} /* у посещённых ссылок текст будет красным, убираем подчёркивание */
Псевдо-класс:lang() используется для задания разного стиля оформления в зависимости от языка. В скобочках указывается язык, к которому нужно применить оформление. Это можно использовать, например, для задания разных стилей кавычек в цитатах: Q:lang(de) {quotes: "\201E" "\201C";} /* кавычки для немецкого языка */
q:lang(en) {quotes: "\201C" "\201D";} /* кавычки для английского языка */
q:lang(ru) {quotes: "\00AB" "\00BB";} /* кавычки для русского языка */
Это, пожалуй, единственный из всех возможных видов селекторов, который я никогда не использовал. Динамические псевдо-классы – это:active, :hover, :focus. Динамические псевдо-классы срабатывают по определённому действию на странице, они работают для всех тегов, а не только для ссылок как многие думают и даже утверждают в своих блогах! Рассмотрим их применение: P:active {background: red;} /* стиль, который применится к тегу по нажатию на него (клику мышью) */
input:focus {width: 400px;} /* стиль, который применится к элементу, на котором в данный момент фокус (работает, к примеру, для текстовых полей ввода: textarea, input). В данном случае по взятию в фокус, ширина input станет равна 400 пикселей, удобно использовать для красивого эффекта удлинения поля по клику. */
div:hover {background: green;} /* срабатывает по наведению курсора на элемент, в основном применяется для создания красивого эффекта при наведении на ссылки. */
Примените данные стили к нашему примеру выше, и вы сами всё увидите. Смежные селекторы – это ближайший сосед ниже по коду, не ребёнок! Очень удобный селектор:
текст в параграфе первого div текст в параграфе ВНЕ div текст в параграфе второго div снова параграф вне div Результат: Обобщённые смежные селекторы действуют точно также как и обычные смежные селекторы, за исключением того, что свойства применяются не только к первому соседу ниже, а ко всем заданным соседям ниже:
параграф параграф параграф параграф параграф параграф в диве параграф в диве параграф Результат: Селекторы атрибутов позволяют нам обратиться к тегам, имеющим необходимый нам атрибут или даже конкретное его значение: P {свойства} /* применить ко всем тегам p, у которых есть атрибут align */
p {свойства} /* где значение атрибута align равно center */
p {свойства} /* где значение атрибута align начинается на center */
p {свойства} /* где значение атрибута align содержит center */
p {свойства} /* где site может находиться среди других слов, отделенных пробелами () */
p {свойства} /* где значение атрибута class состоит только из слова site или начинается им, после чего ставится дефис и пишется остальная часть значения ( или ) */
p {свойства} /* где значение атрибута align заканчивается на center */
Вы уже ознакомились со всеми основными селекторами и вам на первых парах этого должно хватить с горкой. Однако в CSS 3 появилось множество новых псевдо-классов, теперь мы можем брать не только первого ребёнка, но и любого другого по счёту, можем идти от обратного, брать не первого, а последнего ребёнка и так далее и тому подобное. Всё это очень удобно и практично, разве что у вас могут возникнуть проблемы со старыми версиями IE. Давайте соберём все силы в кулак и пробежимся по всем оставшимся селекторам, чтобы потом уже вы могли иметь их ввиду при вёрстке собственного макета. :last-child – аналог:first-child, только берёт не первого, а последнего ребёнка. :only-child – сработает, если элемент (тег) является единственным ребёнком. :only-of-type - сработает, если элемент (тег) является единственным ребёнком своего типа. :nth-child() – обращается к потомкам по их порядковым номерам, можно обращаться ко всем чётным или нечётным (even или odd) числам. Например:
параграф параграф параграф параграф параграф параграф параграф параграф параграф Результат: :nth-last-child – работает также как и предыдущий, но отчёт начинается с конца. :first-of-type – первый ребёнок своего типа в рамках прямого родителя. :last-of-type – последний ребёнок своего типа в рамках прямого родителя. :empty – сработает для тех тегов, внутри которых нет ни одного символа (без текста). :not() – делает исключение для заданных элементов. Пример:
параграф с классом roll параграф параграф параграф с классом roll Результат: :enabled - применяется к доступным элементам интерфейса как формы, кнопки, переключатели и тд. По умолчанию все элементы интерфейса являются доступными. :disabled - применяется к заблокированным элементам интерфейса как кнопки, формы и так далее. Элементы интерфейса являются заблокированными, если к ним в HTML добавить атрибут disabled или в XHTML disabled=”disabled”. :checked – применяется к элементам интерфейса типа флажки (radio) и переключатели (checkbox), когда они находятся во включённом положении. Псевдо-элементы, аналогично псевдо-классам вычисляются браузером автоматически, нам об этом заботиться не нужно. Чтобы не путать псевдо-элементы с псевдо-классами в спецификации CSS 3 было решено использовать двойное двоеточие, вместо одинарного, как было в CSS 2. Поэтому в Интернете вы можете встретить псевдо-элементы как с одинарным двоеточием так и с двойным – и тот и тот вариант верен. Однако для лучшей совместимости с IE рекомендуют использовать одинарное двоеточие. :first-line – первая строка внутри блочного или табличного элемента. :first-letter – первая буква внутри блочного элемента. Итоги: теперь вы знаете и можете использовать всю мощь каскадных таблиц стилей, однако это не значит, что нужно сразу ринуться верстать макеты сайтов, используя как можно больше изученных сегодня селекторов, псевдо-классов и псевдо-элементов. Я перечислил все возможные инструменты, а вы должны выбрать лишь самое нужное для себя. Суть всего написанного выше отчасти заключается в том, чтобы отказаться от повсеместного использования атрибутов class и id в HTML, тем самым возложив всё на плечи могучих таблиц стилей. Внешние файлы стилей, как и внешние файлы Javascript отлично кэшируются, а это значит, что зайдя первый раз на любую страницу вашего сайта, браузер пользователя запоминает эти файлы и более их не скачивает, в отличие от самой страницы сайта, то есть вашей HTML разметки, картинок и текста, которую браузер загружает снова и снова. Тоже самое касается и поисковых систем, им вообще нет дела до ваших внешних файлов, но вот до объёма и содержания вашей HTML разметки им дело есть. Поисковым системам приходится сканировать всю структуру страницы и в ваших же интересах помочь им в этом, сосредоточить их усилия на контенте, а не на громоздкой стене разметки состоящей из кучи классов и идентификаторов или того хуже – Javascript обработчиков событий и CSS стилей прямо в атрибутах тегов (и такое до сих пор бывает). Вы можете со мной поспорить, мол, мы можем заставить клиентский браузер скачивать себе в локальную среду все подключаемые файлы, картинки, закэшировать всю страницу целиком и так далее и тому подобное. На таком фоне подобная мелочь совсем теряется, но так или иначе максимально сократив HTML разметку, вы только выигрываете, при этом ничего не потеряв, кроме возможной привычки. Подытожим: благодаря оптимизации и сокращению HTML мы имеем совсем небольшой выигрыш в скорости загрузки сайта и в SEO (поисковой оптимизации), а также более чистый код.
font-style: italic /* Курсив */
}
...
Селекторы по атрибутам тега
1. Простой селектор атрибута
color:red;
}
...
2. Селектор атрибута со значением
color:red;
font-size:150%;
}
...
.ru" target="_blank">Ссылка в новом окне3. Одно из нескольких значений атрибута
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }
color:red;
font-size:150%;
}
...
4. Дефис в значении атрибута
Селектор[атрибут|="значение"] { стиль }
color:red;
font-size:150%;
}
...
5. Значение атрибута начинается с определенного текста
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }
color:green;
font-weight:bold;
}
...
6. Значение атрибута заканчивается определенным текстом
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }
border: 5px solid red;
}
...
7. Значение атрибута содержит указанную строку
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }
border: 5px solid red;
}
...
1) .Х
.topic-title {
background-color: yellow;
}
2) #X
#content {
width: 960px;
margin: 0 auto;
}
Какими браузерами поддерживается:
3) *
* {
margin: 0;
padding: 0;
}
Какими браузерами поддерживается:
4) X
a {
color: green;
}
ol {
margin-left: 15px;
}
Какими браузерами поддерживается:
5) Х Y
li a {
font-weight: bold;
text-decoration: none;
}
Какими браузерами поддерживается:
6) Х + Y
div + p {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 18px;
}
Какими браузерами поддерживается:
7) Х > Y
#content > ul {
border: 1px solid green;
}
Какими браузерами поддерживается:
8) Х ~ Y
ol ~ p {
margin-left: 10px;
}
Какими браузерами поддерживается:
a:link {
color: green;
}
a:visited {
color: grey;
}
Какими браузерами поддерживается:
10) X
a {
color: red;
}
Какими браузерами поддерживается:
11) X
a {
color: yellow;
}
Какими браузерами поддерживается:
12) X
a {
color: #dfc11f;
}
Какими браузерами поддерживается:
13) X
a {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 15px;
}
Какими браузерами поддерживается:
14) X
a {
color: green;
}
Какими браузерами поддерживается:
15) X
a {
color: green;
}
Какими браузерами поддерживается:
16) X
Какими браузерами поддерживается:
17) X:checked
input:checked {
border: 3px outset black;
}
Какими браузерами поддерживается:
18) X:after
Какими браузерами поддерживается:
19) X:hover
div:hover {
background-color: rgba(11,77,130,0.5);
}
Какими браузерами поддерживается:
20) X:not(selector)
div:not(#content) {
color: grey;
}
Какими браузерами поддерживается:
21) X::pseudoElement
p::first-line {
font-weight: bold;
font-size: 24px;
}
Какими браузерами поддерживается:
22) X:first-child
ul li:first-child {
border-top: none;
}
Какими браузерами поддерживается:
23) X:last-child
ul > li:last-child {
border-bottom: none;
}
Какими браузерами поддерживается:
24) X:only-child
div p:only-child {
color: green;
}
Какими браузерами поддерживается:
25) X:nth-child(n)
li:nth-child(3) {
color: black;
}
Какими браузерами поддерживается:
26) X:nth-last-child(n)
li:nth-last-child(2) {
color: red;
}
Какими браузерами поддерживается:
27) X:nth-of-type(n)
ul:nth-of-type(3) {
border: 1px dotted black;
}
Какими браузерами поддерживается:
28) X:nth-last-of-type(n)
ul:nth-last-of-type(3) {
border: 2px ridge blue;
}
Какими браузерами поддерживается:
29) X:only-of-type
li:only-of-type {
font-weight: bold;
}
Какими браузерами поддерживается:
30) X:first-of-type
ul:first-of-type > li:nth-child(3) {
font-style: italic;
}
Какими браузерами поддерживается:
Селекторы class и id
Как обратиться к классу или id в файле стилей (CSS)?
В чём различие class и id?
Родственный селектор
Универсальный селектор
Псевдо-классы
Динамические псевдо-классы
Смежные селекторы
Обобщённые смежные селекторы
текст в спане
текст в спане
Селекторы атрибутов
CSS 3 псевдо-классы
текст в спане
Управление полями, формами, переключателями и флажками в CSS
Псевдо-элементы
Преимущества оптимизации HTML за счёт CSS