Что значит в css: Что в CSS означает знак «>»? — Хабр Q&A

Определение CSS селекторов | База знаний

В этой статье подробно разберем, как найти CSS селекторы, которые необходимы для сбора данных с сайта

Важно! Не переживайте, если ранее не были знакомы с html и CSS, здесь не потребуется специальных знаний в программировании 😉

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

Поиск нужного элемента

Для начала откройте html код страницы вашего сайта. Сделать это можно кликнув правой кнопкой мыши и выбрав «Показать код элемента»/Inspect (здесь и далее рассматривается работа в браузере Chrome). 

Откроется дополнительная панель браузера, где во вкладке Elements отобразится весь html код страницы, загруженный в данный момент. На скриншоте примера выделен тег, на который как раз был клик правой кнопкой мыши.

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

• кликнуть на конкретную область, нажать на правую кнопку мыши и еще раз выбрать «Показать код элемента»/Inspect;
• переключиться на выбор элемента на странице из консоли, нажав на соответствующую кнопку в консоли браузера;

• через поиск найти тег прямо в html коде. Для этого кликните на любой тег, нажмите сочетание клавиш Ctrl + F и в появившейся строке поиска введите любой текст с сайта. Браузер сам подсветит элемент и рядом напишет количество совпадений на странице. В нашем примере видно, что «записаться» повторяется на странице дважды. При нажатии Enter в строке поиска, браузер переключает к следующему элементу на странице (этот момент поможет вам проверять уникальность селектора на странице либо уточнять, все ли найденные элементы соответствуют вашим задачам, когда их должно быть несколько).

Основные понятия в html коде

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

Тег — это элемент, который может быть состоять из начального и конечного, и содержать внутри себя текст (span в примере — название тега), а может быть одиночным, например <br> (перенос текста на новую строку). 

Атрибут тега — дополнительные параметры тега, которые влияют на содержимое тега, например текст. Например,
— здесь  style=»font-size: 200%; text-align: center;» является атрибутом и в нашем примере он сделает размер текста Записаться в два раза крупнее и разместит его по центру.
У одного тега может быть несколько атрибутов, которые будут разделены пробелами, например, так:

здесь два атрибута у одного тега — class и style.

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

Расположение тегов — в html коде все теги должны располагаться по четким правилам, как матрешки, один в другом либо рядом. У всех тегов есть родители (теги, внутри которых они находятся) и у многих дети. Например, тег <strong></strong> ребенок и тега <h3></h3>, и тега <div></div>, а они соответственно его родители:

Правила обозначения CSS селекторов

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

Название тега — достаточно просто указать span, div, img, h3  в месте, где нужно прописать селектор, и такой селектор будет учитывать все теги с таким названием на странице. Обычно этого хватает для записи названия страницы, так как обычно оно присутствует в теге h2, который не повторяется. Например, так будет выглядеть настройка записи в свойство события «Посещение страницы» названия страницы:

Атрибуты class и id — это уникальные в нашем случае атрибуты, которые обознаются не так, как все остальные. Пример:

Здесь селектор  class мы запишем как .text или .wrapper2, то есть просто добавим точку перед значением. Если мы хотим указать, что нам нужен тег, где в обязательном порядке присутствуют оба значения, то пропишем так .text.wrapper2 (без пробела).

Значение id должно являться уникальным по правилам html и иметь только одно значение внутри этого тега. Про примеру оно будет обозначаться так #section24.

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

Другие атрибуты — все остальные атрибуты записываются по единому правило: название тега[атрибут и его значение]. Например, укажем CSS селектор для тега с конкретной картинкой, используя атрибут scr (ссылку на картинку):

img[src=»//s.filesonload.ru/img/shadowbottom/1.png»]

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

Сначала пробуем ближайшего родителя, то есть тег <span>. Селектор будет выглядеть так: span strong, то есть нам достаточно написать названия тегов в нужном порядке и такой селектор выберет все теги <strong>, которые находятся в теге <span>. Аналогично будет выглядеть и с родителей <h3>: h3 strong. 

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

Можно использовать цепочку из названий тегов и их атрибутов, которые в конечном итоге укажут на нужный тег: h3.font-header span span strong.

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

В этом примере все просто: мы имеем ввиду 2 тега, клик на которые будут записываться в хронологию пользователя, как отдельное событие. Первый селектор div.button input[type=»submit»] обозначает, что нам нужны все теги <input>, в которых есть атрибут type=»submit» и они должны являться детьми тега <div>, в котором есть атрибут. В упрощенном варианте это будет выглядеть так в html (на самом сайте, конечно, будет больше всего вокруг): 

<div class=»button»>
<input type=»submit»></input>
</div>

Тут же, через запятую, прописан еще один селектор: все теги <button> с атрибутом.

Проверка уникальности CSS селектора

Уникальность CSS селектора для нас очень важна. Если селектор прописан неверно и он не является уникальным, то сбор данных будет не точным, а значит — бесполезным. 

Проверить уникальность можно прямо в браузере через поиск в панеле Elements. Нажмите сочетание клавиш Ctrl + F, и введите в строке поиска найденный вами ранее CSS селектор. Браузер сам подсветит тег, путь к которому вы указали и напишет количество таких совпадений на странице.

В большинстве случаев, совпадение должно быть только одно (будет написано — 1/1). Иногда требуется, чтобы совпадений было несколько, но все они указывали на нужные вам теги, например, свойство «Товары в корзине» подтягивает названия товаров из списка товаров в самой корзине. При настройке такого свойства количество совпадений по селекторам должно равняться реальному количеству товаров в корзине на данный момент.

Как проверить, правильно вы настроили сбор данных в Carrot quest, можно посмотреть в этой статье. При любых сложностях — пишите нам в чат, будем рады помочь.

Групповые селекторы | CSS справочник

Значение и применение

В CSS допускается задать единый стиль не только одному селектору, но и группе селекторов. В группу могут входить как селекторы типа, селекторы класса, id селекторы и так далее. При перечислении любых селекторов необходимо обязательно разделять их запятой.

Поддержка браузерами

CSS синтаксис:

 
element, element {
блок объявлений;
}

Версия CSS

Пример использования

<style>
h2, h3,.test,#test { /* выбираем заголовки первого и второго уровня, элементы с классом test и элемент с идентификатором test */
background-color: green;  /* задаем цвет заднего фона */ 
}
.test, #test { /* выбираем элементы с классом test и элемент с идентификатором test */
color: blue; /* задаем цвет текста */ 
}
</style> 

Первым групповым селектором мы указываем, что заголовки <h2> и <h3>, элементы с классом test и элемент с идентификатором test получат цвет заднего фона зеленый.

Вторым групповым селектором мы указываем, что кроме заднего фона элементы с классами

Рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Групповые селекторы</title>
<style>
h2, h3,.test,#test { /* выбираем заголовки первого и второго уровня, элементы с классом test и элемент с идентификатором test */
color: red;  /* задаем цвет текста */ 
}
h4,h5 { /* выбираем заголовки третьего и четвертого уровня */
color: blue; /* задаем цвет текста */ 
}
h2,h3,h4,h5 { /* выбираем заголовки от первого до четвертого уровня */
font-style: italic;  /* задаем стиль шрифта - курсивное начертание */ 
}
</style>
</head>
<body>
	<h2>Заголовок первого уровня</h2>
	<h3>Заголовок второго уровня</h3>
	<p class = "test">Абзац с классом test</p>
	<h4>Заголовок третьего уровня</h4>
	<p id = "test">Абзац с идентификатором test</p>
	<h5>Заголовок четвертого уровня</h5>
	</body>
</html> 

В этом примере мы использовали три групповых селектора:

• Первым групповым селектором мы указываем, что заголовки <h2> и <h3>, элементы с классом test и элемент с идентификатором test получат цвет текста красный.
• Вторым групповым селектором мы указываем, что заголовки <h4> и <h5> получат цвет текста синий.
• Третьим групповым селектором мы указываем, что все заголовки (от <h2> до <h5>) будут иметь курсивное начертание шрифта.

Результат нашего примера:

CSS. Селекторы

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

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

Псевдоклассы пользовательского интерфейса

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

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

input:enabled { .... }

input:disabled  {
    margin: 10px;
    box-shadow: 0 0 10px rgba(0,0,0, 0.  5);
}
				

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

input:indeterminate { .... }

input:checked  {
    width: 3vh;
    height: 3vh;
    box-shadow: 0 0 10px rgba(0,0,0, 0.5);
}
				

Псевдоклассы, имеющие отношение к дереву документа

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

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

p b:first-child { 
    color: green;
    text-transform: uppercase;
}

p b:last-child {
    color: red;
    text-transform: uppercase;
}
				

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

p b:only-child { 
    font-weight: 600;
    color: hsl(190, 60%, 70%);
    text-transform: uppercase;
}
				

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

Псевдокласс :first-of-type выберет первый элемент своего типа внутри родителя, в то время как псевдокласс :last-of-type выберет последний элемент этого типа внутри родителя. Псевдокласс

div p:first-of-type { 
    color: green;
    text-transform: uppercase;
}

div p:last-of-type {
    color: red;
    text-transform: uppercase;
}

div img:only-of-type {
    border: thin solid #000;
}
				

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

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

Когда от милой моей долины поднимается пар и полдневное солнце стоит над непроницаемой чащей темного леса и лишь редкий луч проскальзывает в его святая святых, а я лежу в высокой траве у быстрого ручья и, прильнув к земле, вижу тысячи всевозможных былинок и чувствую, как близок моему сердцу крошечный мирок, что снует между стебельками, наблюдаю эти неисчислимые, непостижимые разновидности червяков и мошек и чувствую близость всемогущего, создавшего нас по своему подобию, веяние вселюбящего, судившего нам парить в вечном блаженстве, когда взор мой туманится и все вокруг меня и небо надо мной запечатлены в моей душе, точно образ возлюбленной, — тогда, дорогой друг, меня часто томит мысль: «Ах!

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

В приведённом выше примере псевдоклассы div p:first-of-type и div p:last-of-type выберут, соответственно, первый и последний абзацы в статье, независимо от того, являются ли они на самом деле первыми или последними детьми в статье. Селектор div img:only-of-typeопределяет изображение, как единственное изображение появляющееся в статье.

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

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

Так же в каестве значения могут выступать ключевые слова odd — нечётные номера элементов и even — чётные номера элементов.

Использование чисел и выражений в псевдоклассах

Как уже упоминалось, использование конкретного числа в псевдоклассе вычисляет с начала или с конца дерева документа и выбирает один соответствующий элемент. Например, селектор li:nth-child(4) выберет четвёртый пункт в списке. Подсчёт начинается с первого пункта списка и увеличивается на единицу для каждого пункта списка, пока, наконец, не обнаружит четвёртый пункт и выберет его. При указании конкретного числа оно должно быть положительным.

Выражения для псевдоклассов бывают в формате an, an+b, an-b, n+b, -n+b и -an+b. То же самое выражение может быть переведено и читаться как (a*n)±b. Переменная a обозначает множитель, с учётом которого будут вычисляться элементы, в то время как переменная b обозначает, откуда будет начинаться или происходить отсчёт.

Например, селектор li:nth-child(3n) будет определять каждый третий элемент пункта списка. Использование этого выражения соответствует 3×0, 3×1, 3×2 и так далее. Как вы можете видеть, результаты этого выражения выбирают третий, шестой и каждый элемент кратный трём

Кроме того, в качестве значений могут быть использованы ключевые слова odd и even. Как и следовало ожидать, они будут выбирать, соответственно, нечётные или чётные элементы. Если ключевые слова не привлекают, то выражение 2n+1 выберет все нечётные элементы, а выражение 2n выберет все чётные элементы.

Селектор li:nth-child(4n+7) определит каждый четвёртый пункт списка, начиная с седьмого пункта. Опять же, использование этого выражения эквивалентно (4×0)+7, (4×1)+7, (4×2)+7 и так далее. Результаты этого выражения приведут к выбору седьмого, одиннадцатого, пятнадцатого и каждого четвёртого элемента.

При использовании аргумента n без числа впереди, переменная a расценивается как равная 1. Селектор li:nth-child(n+5) выберет каждый пункт списка, начиная с пятого, оставив первые четыре пункта списка не выбранными. В выражении это разбирается как (1×0)+5, (1×1)+5, (1×2)+5 и так далее.

Для создания более сложных вещей могут быть задействованы отрицательные числа. Например, селектор li:nth-child(6n-4) будет отсчитывать каждый шестой пункт списка, начиная с -4, выбрав второй, восьмой, четырнадцатый пункты списка и так далее. Тот же селектор li:nth-child(6n-4) также может быть записан как li:nth-child(6n+2), без использования отрицательной переменной b.

Отрицательная переменная или отрицательный аргумент n должен сопровождаться положительной переменной b. Когда аргументу n предшествует отрицательная переменная a, то переменная b определяет, насколько высоко будет достигнут отсчёт. Например, селектор li:nth-child(-3n+12) выберет каждый третий пункт списка в первых двенадцати пунктах. Селектор li:nth-child(-n+9) выберет первые девять пунктов списка, так как переменная a без заявленного числа по умолчанию равна -1.

Декларация !important в CSS | CSS-Tricks по-русски

Декларация !important в CSS

Декларация !important валидна с первой версии CSS, но похоже она приобрела плохую репутацию в последние годы. Однако если её использовать с осторожностью, то это будет полезным и мощным инструментом. Статья представляет собой руководство к тому как работает декларация и как её надо использовать.

Как использовать?

Декларация !important — это ключевое слово, которое может быть добавлено в конце любой пары ключ/значение. Например:

p {margin-left: 5px !important}
p {margin: 10px 5px 0 10px !important}

Каково её влияние?

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

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

• Источник правила — если одно правило находится в таблице стилей сайта, а второе непосредственно на клиентском компьютере, то применено будет правило клиента.
• Специфика — если два или более правил имеют отношение к одному и тому же свойству, одного и того же элемента, а также один уровень важности и один источник, то будет применено правило более конкретного селектора.
• Порядок — если у двух правил один вес, то будет применено последнее.

Иногда необходимо поменять приоритет правил. Разорвать цепочку каскада можно с помощью декларации !important. В случае её использования, отмеченное правило будет иметь самый высокий «вес» и именно оно будет использоваться.

В следующем примере, второй селектор является более конкретным и объявлено в конце, но использоваться будет именно первое правило, поскольку в нём используется декларация !important, которое заменяет все остальные правила.

p {margin-left: 5px !important}
#id p {margin-left: 10px}

Когда необходимо использовать !important?

Несколько примеров и тонкостей использования:

IE 5/6

Internat Explorer 5 и 6 игнорируют !important, если одно и тоже свойство объявлено в правиле дважды.

p {
	margin-left: 5px !important; 
	margin-left: 10px
}

Internat Explorer 5 и 6 применят значение 10px, тогда как остальные браузеры — 5px.

Замена inline-стилей

!important может использоваться для переопределения inline-стилей, которые обычно генерируются WYSIWYG-редакторами в различных CMS.

Форматирование текста в таких редакторах осуществляется с помощью вставленных напрямую в html-разметку стилей. Эти стили можно переопределить в таблице стилей, используя декларацию !important.

Например, пользователь хочет вывести текст красным цветом

<div><p>Some text</p></div>

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

#content p {color:black !important}

Стилевые файлы для печати

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

Обратная сторона

Есть только один способ переопределить стиль отмеченный !important — это использовать более конкретный селектор и также отметить используемый стиль декларацией. Всё это может сделать файл стилей сильно запутанным и сложным для понимания.

В CSS1 декларация !important автора сайта имела больший приоритет над пользовательским файлом стилей. Это правило изменилось в CSS2, то есть пользователь всегда может переопределить внешний вид сайта.

Заключение

Использование декларации !important может сделать файл стилей сложным для понимания и отладки, однако если быть аккуратным, то она поможет вам сохранить время и нервы.

Основы CSS | Основы современной вёрстки

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

Для визуального оформления WEB-страницы создан язык CSS. CSS переводится как каскадные таблицы стилей (Cascading Style Sheets). Именно этот язык отвечает за то, как наши HTML-элементы будут выведены пользователю в браузере.

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

Стили CSS

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

Чтобы добавить стиль к элементу, необходимо использовать селектор. Он указывает, к какому именно элементу или элементам нужно добавить наши стили. Для примера возьмём следующую HTML-разметку:

<p>Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.</p>

Изменим размер и цвет шрифта в этом предложении. Это можно сделать следующей CSS-записью:

p {
  color: red;
  font-size: 20px;
}

Что означает эта таинственная запись выше? Её можно условно разбить на три основные составляющие:

1. p — это селектор. Здесь мы говорим, чтобы браузер выбрал все параграфы на странице. О том, какие бывают селекторы, мы поговорим чуть позже.
2. Фигурные скобки { }. Они отделяют селектор от правил. Все правила записываются уже внутри этих фигурных скобок.
3. Свойства. Они записываются по схеме, которая представлена ниже. Чем больше у вас будет практики, тем больше различных свойств и их значений вы будете знать. Не пытайтесь выучить их все сразу. Всегда используйте документацию. Даже опытные разработчики прибегают к ней, чтобы вспомнить правильные значения того или иного свойства.

Разберём некоторые свойства, которые помогут вам оформлять текст:

• font-size. Это свойство позволяет задать размер шрифта. Со временем вы узнаете множество различных единиц, в которых можно записать значение. На начальном этапе используйте значения в пикселях. Это достаточно простая и понятная единица измерения, которая не зависит от того, какие ещё стили указаны у текста.
• color. Это свойство поможет вам установить новое значение цвета для выбранного текста. Цвет может записываться разными способами. Помимо этого есть большой набор цветов, которые можно записать словами. Это отличный способ познакомиться со свойством color. Посмотреть на все такие записи можно здесь.
• text-align. Свойство, устанавливающее положение текста. Может принимать одно из следующих значений: left, right, center, justify.

Подключение CSS

Использовать CSS на странице можно с помощью нескольких способов:

• использование специального файла;
• использование тега <style> внутри HTML-разметки;
• записывая стили непосредственно у нужного тега. Этот способ называется инлайн (inline) записью.

Разберёмся с каждым способом отдельно.

Использование отдельного CSS-файла.

Данный способ один из самых удобных в реальной разработке. Так как стилей в проекте обычно много, то держать их в HTML-файле не очень удобно. Связано это с тем, что HTML-файл становится очень большим и ориентироваться в нём становится невозможно. Чтобы этого избежать, можно создать отдельный CSS-файл. Этот файл будет иметь расширение .css, имя же может быть произвольным.

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

site/
├── css/
│   ├── main.css
├── html/
│   ├── index.html

Добавим основную информацию в файл index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
</head>
<body>

</body>
</html>

Теперь необходимо подключить файл main.css в наш файл index.html. Для этого используется специальный тег link. У данного тега необходимо указать атрибут href, значением которого будет путь до файла main.css. Тег link указывается в секции head.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>

</body>
</html>

Дополнительно разберём эту запись: ../css/main.css. Её можно условно разбить на три составляющие:

1. ../ — переход в директорию выше. Изначально файл index.html находится в директории html, поэтому мы «выходим» из неё в директорию site.
2. css/ — переход в директорию css.
3. main.css — указание имени и расширения файла, который мы хотим подключить.

Если бы наши файлы index.html и main.css находились в одной директории, то подключение выглядело бы следующим образом: href="main.css".

После подключения файла мы можем записывать все нужные стили именно в файле main.css. Они автоматически подключатся на наш сайт.

Использование тега style

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>

    <style>
        p {
          color: red;
          font-size: 20px;
        }
    </style>
</head>
<body>
    <p>Параграф с размером шрифта 20 пикселей. Текст написан красным цветом.</p>
</body>
</html>

Данный способ не является основным, хотя и рекомендуется для некоторых стилей. Это позволит отобразить некоторые стили ещё до того, как загрузится CSS-файл. Какие стили рекомендовано так выносить, вы сможете узнать в процессе становления вас как профессионала.

Inline-стили

Последним вариантом использования CSS являются инлайн-стили. Они подключаются с помощью атрибута style у любого тега в разметке. Это наименее предпочтительный способ. Его тяжело читать, особенно если у тега десяток стилей. К тому же вы не сможете записать стили для всех одинаковых тегов. Придётся для каждого указывать отдельно. Это приведёт к постоянному копированию стилей.

Возьмём прошлый пример и добавим inline стили:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
</head>
<body>
    <p>Параграф с размером шрифта 20 пикселей. Текст написан красным цветом.</p>
</body>
</html>

Селекторы

Селекторы — краеугольный камень всего CSS.

«Не так важны стили, как то, к чему они применяются» © Народная мудрость

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

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

1. Селектор по тегу. Такой селектор мы применяли на протяжении всего урока. Цель простая — просто указать тег, для которого будут применяться стили.
2. Селектор по классу. Если нужно выбрать только конкретные элементы в HTML, то можно дать тегу произвольный класс и, используя конструкцию .название-класса, добавить стили.
3. Селектор по идентификатору. Ещё один случай выборки по дополнительному атрибуту тега. Главная разница заключается в самом HTML — идентификатор не может повторяться в рамках одной страницы. Одно имя может использоваться только один раз. В связи с этим нет возможности задать стили для идентификатора и использовать его на других элементах. Для выбора идентификатора используется конструкция #имя-идентификатора.

Рассмотрим все три селектора на реальном примере:

Файл index.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
    <main>
        <h2>Заголовок с идентификатором</h2>
        <p>Просто параграф без класса или идентификатора</p>
    </main>
</body>
</html>

Файл main.css

#main-title {
  color: white;
  font-size: 20px;
  text-align: center;
}

.content {
  background-color: black;
}

p {
  color: white;
}

После применения этих стилей получится следующая картина:

• Чёрный фон секции main. Для этого использовали класс content и селектор .content;
• Заголовок первого уровня имеет белый цвет, размер шрифта 20 пикселей и расположение по центру. У заголовка есть идентификатор main-title, поэтому для добавления стилей мы смогли использовать селектор по идентификатору #main-title;
• Все параграфы будут иметь белый цвет текста. Для этого использовался селектор по тегу.

Вложенность селекторов

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

<section>
    <h3>Новости</h3>

    <article>
        <h3>Новость 1</h3>
        <p>Текст новости</p>
    </article>

    <article>
        <h3>Новость 2</h3>
        <p>Текст новости</p>
    </article>
</section>

<section>
    <h3>Интересные истории</h3>

    <article>
        <h3>История 1</h3>
        <p>Текст истории</p>
    </article>

    <article>
        <h3>История 2</h3>
        <p>Текст истории</p>
    </article>
</section>

Как добиться того, чтобы заголовки новостей были больше? Можно для каждого заголовка в новости добавить свой класс. Это хорошее решение, если новостей немного или нет необходимости для каждой такой секции вводить новые стили для заголовков.

Более простым решением станет использование вложенности селекторов. Вначале посмотрим, как решить нашу задачу:

.news article h3 {
  font-size: 32px;
}

Разберём, что за селектор был указан. Здесь мы указали комбинацию трёх селекторов: .news, article и h3. Каждый из них по отдельности вы уже знаете. Разделив их пробелом мы сказали браузеру: «Возьми все заголовки h3 из article, который лежит внутри элемента с классом news и примени к нему стили». Читать селекторы стоит именно таким образом — справа налево. Такой подход называется вложенностью селекторов. Можно комбинировать что угодно и с какой угодно глубиной.

Важно: для удобной работы не стоит использовать очень большую вложенность. Старайтесь использовать комбинацию не более 2 или 3 селекторов.

Важно понимать, что такая запись .news article h3 выберет все заголовки второго уровня во всех article, которые лежат внутри блока с классом .news. Давайте немного видоизменим вёрстку, чтобы это проверить.

<section>
    <h3>Новости</h3>

    <article>
        <h3>Новость 1</h3>
        <p>Текст новости</p>
    </article>

    <article>
        <h3>Новость 2</h3>
        <p>Текст новости</p>
        <section>
            <h3>Похожие новости</h3>

            <article>
                <h3>Похожая новость 1</h3>
                <p>Текст новости</p>
            </article>
        </section>
    </article>

</section>

Ко второй новости мы добавили блок «Похожие новости». Самое интересное, что наше правило font-size: 32px; применится и к заголовку «Похожие новости», и к заголовку «Похожая новость 1». Так как оба заголовка так или иначе лежат внутри article, которые находятся в блоке с классом .news.

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

Как же нам выбрать только те заголовки, которые относятся непосредственно к новостям, а не к похожим новостям или заголовкам других секций? Здесь нам на помощь придёт дочерний селектор. Его суть в выборе только тех элементов, которые непосредственно лежат внутри нужного нам блока. Без учёта всех остальных вложенностей. Чтобы указать такой селектор, используется символ >. Укажем, что нам нужны только те article, которые лежат внутри .news. И нам нужны заголовки, которые находятся внутри этих article. Это делается следующим образом:

.news > article > h3 {
  font-size: 24px;
}

Теперь размер шрифта для заголовков «Похожие новости» и «Похожая новость 1» не будет увеличен, так как мы указали более конкретный, или как его ещё называют, более специфичный селектор.

Самостоятельная работа

• Создайте у себя на компьютере файлы index.html и style.css. Подключите файл стилей. Создайте разметку любого текста и используя свойства, которые мы изучили в этом уроке, оформите текст.
• Попробуйте скопировать примеры из этого урока.

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

• задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
• расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
• изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.

Об обучении на Хекслете

Селекторы CSS – точечное применение свойств CSS к элементам страницы (тегам)

Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!

22.04.2013

Здравствуйте дорогие подписчики и не менее дорогие гости Site on! Надеюсь, вам были интересны предыдущие статьи раздела HTML + CSS, потому как сегодня скучать точно не придётся, ведь мы рассмотрим такое понятие как селекторы CSS и как с их помощью мы можем сократить нашу разметку HTML, сделав её чище.

Селектор CSS – это тот элемент, к которому мы собираемся применять CSS свойства. Слово «селектор» говорит само за себя, оно обозначает выбор.

p {color: red}
div span {background: green}
ul li {list-style: none}

Селекторы class и id

В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:

<div>текст в первом диве</div>
<div>текст во втором диве</div>
<div>текст в третьем диве</div>

На что стоит обратить внимание:

• Классы и идентификаторы можно присваивать любым (всем) тегам.
• Каждый id уникален и не может повторяться в пределах одной страницы, в отличие от классов!
• Один и тот же класс может быть присвоен любым тегам и может повторяться любое количество раз на странице.
• Если мы хотим задать конкретному тегу несколько классов, мы просто задаём их через пробел.
• Имена классов и идентификаторов могут совпадать, при этом кроме имени, ничего общего между ними не будет.

Как обратиться к классу или id в файле стилей (CSS)?

Смотрим пример:

#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 можно обойтись приёмами, описанными ниже и они также могут быть вполне удобны.

В чём различие class и id?

Кроме приведённых выше различий, стоит ещё отметить, что у свойств заданных id приоритет выше, чем у свойств, заданных классу. То есть, если мы напишем:

 <style>
#first {color: red;}
.blue {color: blue;}
</style>
<div>текст в диве</div>

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

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

.myclass {свойства} /* применятся ко всем тегам, которые содержат класс myclass */
div.myclass {свойства} /* применятся только к тегам div, которые содержат класс myclass */

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

<style>
#super {свойства} /* правильно */
div#super {свойства} /* Неправильно, но работать будет */
</style>
<div>текст</div>

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

Итог: id и class используем, но в меру, при этом всегда спрашивая себя, а можно ли здесь обойтись без них и насколько это целесообразно.

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

Идём дальше. Из статьи о наследовании в CSS вы уже знаете о двух самых простых видах селекторов, это селектор по тегу (элементу) и по потомку. Давайте освежим вашу память:

 div p {color: green;} /* Селектор по потомку */
p {color: red;} /* селектор по тегу */

Но как я уже писал в предыдущей статье, в первом случае CSS свойства применятся ко всем тегам p вложенным на ЛЮБУЮ глубину тега div. А что если мы хотим применить свойства только к прямым наследникам, то есть к первому уровню вложенности:

<div>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <span>
      <p>Третий уровень</p>
    </span>
  </span>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <p>Второй уровень</p>
  </span>
  <p>Прямой наследник (первый уровень)</p>
</div>

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

div>p {color: blue;} /* только первый уровень вложенности */
div p {color: blue;} /* абсолютно все параграфы внутри div */

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

С этим разобрались, у нас на вооружении уже 3 вида селекторов, теперь хочу вам рассказать о весьма необычном селекторе, который выделяется среди всех остальных – это так называемый универсальный селектор, который обозначается звёздочкой (*):

* {margin: 0; padding: 0;}

Так у меня начинается каждый новый проект, советую вам делать также. Универсальный селектор распространяется на все элементы страницы (теги), но имеет нулевой приоритет (ниже только отсутствие приоритета вовсе). Его обычно используют, чтобы перебить CSS свойства, которые браузеры устанавливают по умолчанию для некоторых тегов. Представьте себе, и такое имеет место быть! Достаточно многим тегам браузеры по умолчанию устанавливают свои свойства, например, тегу гиперссылки <a> синий цвет текста и подчёркивание, тегу body они задают поля (padding) и тд. Нам это запоминать, знать и использовать совсем не к чему, поэтому самые банальные свойства мы сразу же убираем с помощью универсального селектора, однако я бы не советовал дописывать в него что-то ещё (или дописывать, но аккуратно), несмотря на наименьший (нулевой) приоритет универсального селектора, он в некоторых случаях всё же может перебить вам другие свойства, так что имейте это в виду.

Кстати говоря, при работе с селекторами, как и при любой работе связанной с вёрсткой макета очень удобно использовать просмотр элементов страницы. Если вы ещё не в курсе таких вещей как Opera Dragonfly, Firebug и веб-инспекторы в целом, то вам без преувеличений срочно нужно прочесть статью по ссылке выше! А кто уже использовал подобные вещи, прошу дальше за мной.

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

В отличие от классов, псевдо-классы не нужно указывать в HTML разметке, они сами вычисляются браузером. У нас есть 4 статических псевдо-класса и 3 динамических псевдо-класса, без учёта CSS 3, о нём ближе к концу. К статическим относятся ( :first-child, :link, :visited, : lang() ):

<style>
p:first-child {color: green;} /* сработает, если p является первым ребёнком своего родителя */
</style>
<div>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <span>
      <p>Третий уровень</p>
    </span>
  </span>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <p>Второй уровень</p>
  </span>
  <p>Прямой наследник (первый уровень)</p>
</div>

Результат:

Естественно можно комбинировать селекторы как захотим, например:

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;} /* срабатывает по наведению курсора на элемент, в основном применяется для создания красивого эффекта при наведении на ссылки. */

Примените данные стили к нашему примеру выше, и вы сами всё увидите.

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

Смежные селекторы – это ближайший сосед ниже по коду, не ребёнок! Очень удобный селектор:

<style>
div + p {background: green; color: white;} /* Применить свойства к тегу p, если сразу после закрывающегося тега div открывается тег p */
p + span {background: orange;} /* не сработает, так как у нас нет открывающегося тега span, сразу после закрывающегося тега p */
</style>
<div>
  <p>текст в параграфе первого div</p>
</div>
<p>текст в параграфе ВНЕ div</p>
<div>
  <p>текст в параграфе второго div</p>
</div>
<span>текст в спане</span>
<p>снова параграф вне div</p>

Результат:

Обобщённые смежные селекторы

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

<style>
div~p{color: green;}
</style>

<div>текст в диве</div>

<p>параграф</p>
<p>параграф</p>
<p>параграф</p>

<span>текст в спане</span>

<p>параграф</p>
<p>параграф</p>

<div>
<p>параграф в диве</p>
<p>параграф в диве</p>
</div>

<span>текст в спане</span>
<p>параграф</p>

Результат:

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

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

p[align] {свойства} /* применить ко всем тегам p, у которых есть атрибут align */

p[align="center"] {свойства} /* где значение атрибута align равно center */

p[align^="center"] {свойства} /* где значение атрибута align начинается на center */

p[align*="center"] {свойства} /* где значение атрибута align содержит center */

p[class~="site"] {свойства} /* где site может находиться среди других слов, отделенных пробелами (<p></p>) */

p[class|="site"] {свойства} /* где значение атрибута class состоит только из слова site или начинается им, после чего ставится дефис и пишется остальная часть значения (<p></p> или <p></p>) */

p[class$="site"] {свойства} /* где значение атрибута align заканчивается на site */

CSS 3 псевдо-классы

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

:last-child – аналог :first-child, только берёт не первого, а последнего ребёнка.

:only-child – сработает, если элемент (тег) является единственным ребёнком.

:only-of-type — сработает, если элемент (тег) является единственным ребёнком своего типа.

:nth-child() – обращается к потомкам по их порядковым номерам, можно обращаться ко всем чётным или нечётным (even или odd) числам. Например:

<style>
div p:nth-child(5) {background-color: green;} /* Обращаемся к 5 по счёту ребёнку, если он является тегом p. */

div p:nth-child(2n) {background-color: yellow;} /* Обращаемся к каждому второму ребёнку, если он является тегом p. */

div p:nth-child(2n+6) {background-color: red;} /* Обращаемся к каждому второму ребёнку начиная с шестого, если он является тегом p. */
</style>

<div>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>

<span>текст в спане</span>

<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
</div>

Результат:

:nth-last-child – работает также как и предыдущий, но отчёт начинается с конца.

:first-of-type – первый ребёнок своего типа в рамках прямого родителя.

:last-of-type – последний ребёнок своего типа в рамках прямого родителя.

:empty – сработает для тех тегов, внутри которых нет ни одного символа (без текста).

:not() – делает исключение для заданных элементов. Пример:

<style>
p:not(.roll) {color: red;} /* для всех параграфов на странице делаем красный цвет текста, за исключением параграфов с классом roll */
</style>

<p>параграф с классом roll</p>

<p>параграф</p>
<p>параграф</p>

<p>параграф с классом roll</p>

Результат:

Управление полями, формами, переключателями и флажками в CSS

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

:disabled — применяется к заблокированным элементам интерфейса как кнопки, формы и так далее. Элементы интерфейса являются заблокированными, если к ним в HTML добавить атрибут disabled или в XHTML disabled=”disabled”.

:checked – применяется к элементам интерфейса типа переключатели (radio) и флажки (checkbox), когда они находятся во включённом положении.

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

Псевдо-элементы, аналогично псевдо-классам вычисляются браузером автоматически, нам об этом заботиться не нужно. Чтобы не путать псевдо-элементы с псевдо-классами в спецификации CSS 3 было решено использовать двойное двоеточие, вместо одинарного, как было в CSS 2. Поэтому в Интернете вы можете встретить псевдо-элементы как с одинарным двоеточием так и с двойным – и тот и тот вариант верен. Однако для лучшей совместимости с IE рекомендуют использовать одинарное двоеточие.

:first-line – первая строка внутри блочного или табличного элемента.

:first-letter – первая буква внутри блочного элемента.

:before и :after – используются чтобы с помощью CSS вставить содержимое до или после элемента, к которому они относятся, лично я ими не пользовался, поэтому сильно расписывать не буду. А как часто вы используете данные псевдо-элементы в своих проектах? Можете поделиться своим опытом в комментариях к данной статье.

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

Преимущества оптимизации HTML за счёт CSS

Суть всего написанного выше отчасти заключается в том, чтобы отказаться от повсеместного использования атрибутов class и id в HTML, тем самым возложив всё на плечи могучих таблиц стилей.

Внешние файлы стилей, как и внешние файлы Javascript отлично кэшируются, а это значит, что зайдя первый раз на любую страницу вашего сайта, браузер пользователя запоминает эти файлы и более их не скачивает, в отличие от самой страницы сайта, то есть вашей HTML разметки, картинок и текста, которую браузер загружает снова и снова. Тоже самое касается и поисковых систем, им вообще нет дела до ваших внешних файлов, но вот до объёма и содержания вашей HTML разметки им дело есть. Поисковым системам приходится сканировать всю структуру страницы и в ваших же интересах помочь им в этом, сосредоточить их усилия на контенте, а не на громоздкой стене разметки состоящей из кучи классов и идентификаторов или того хуже – Javascript обработчиков событий и CSS стилей прямо в атрибутах тегов (и такое до сих пор бывает).

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

Подытожим: благодаря оптимизации и сокращению HTML мы имеем совсем небольшой выигрыш в скорости загрузки сайта и в SEO (поисковой оптимизации), а также более чистый код.

Пожалуйста, оцените эту статью

Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

Вы можете помочь развитию проекта, сделав всего 1 клик:

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

Вы здесь: Главная — CSS — CSS Основы — Дочерние селекторы в CSS

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

Чтобы проблема стала более понятной, давайте приведу небольшой пример. Пусть у нас есть такой HTML-код:

И наша задача сделать красным только «Второй абзац«. Если мы напишем с использованием контекстного селектора:

То у нас станут красным оба абзаца, что нам совсем не нужно. Данная задача очень просто решается с помощью дочерних селекторов в CSS:

Всё, теперь красным у нас стал только «Второй абзац«. Поскольку именно данный абзац является непосредственно дочерним для .container. А «Первый абзац» является дочерним для внутреннего div, таким образом, под действие дочернего селектора он не попадает.

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

• Создано 20.02.2012 09:54:47
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

:: after (: after) — CSS: каскадные таблицы стилей

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

 
a :: after {
  содержание: «→»;
}
  

 / * синтаксис CSS3 * /
::после

/ * Синтаксис CSS2 * /
: после 

Примечание: CSS3 представил нотацию :: after (с двумя двоеточиями), чтобы отличать псевдоклассы от псевдоэлементов.Браузеры также принимают : после , введенного в CSS2.

Простое использование

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

HTML

  
 Вот какой-то старый добрый скучный текст. 
 Вот нормальный текст, который не является ни скучным, ни захватывающим. 
 Вносить свой вклад в MDN легко и весело. 
  

CSS

 .amazing-text :: after {
  content: «<- ЗАХВАТЫВАЕТ!»;
  цвет: зеленый;
}

.boring-text :: after {
  содержание: «<- СКУЧНО»;
  красный цвет;
}
  

Результат

Декоративный пример

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

HTML

   Посмотрите на оранжевую рамку после этого текста. 
  

CSS

  .ribbon {
  цвет фона: # 5BC8F7;
}

.ribbon :: after {
  content: "Это необычная оранжевая коробка.";
  цвет фона: # FFBA10;
  цвет границы: черный;
  стиль границы: пунктирная;
}
  

Результат

Всплывающие подсказки

В этом примере для создания всплывающих подсказок используется :: after в сочетании с выражением CSS attr () и настраиваемым атрибутом данных data-descr . Никакого JavaScript не требуется!

Мы также можем поддержать пользователей клавиатуры с помощью этой техники, добавив tabindex из 0 , чтобы сделать каждый диапазон фокусируемым на клавиатуре, и используя селектор CSS : focus .Это показывает, насколько гибкими могут быть :: до и :: после , хотя для наиболее доступного опыта виджет семантического раскрытия, созданный каким-либо другим способом (например, с элементами подробностей и сводок), вероятно, будет более подходящим.

HTML

  
 Вот несколько
   текст  с несколькими
   всплывающие подсказки .
  

CSS

  span [data-descr] {
  положение: относительное;
  текст-оформление: подчеркивание;
  цвет: # 00F;
  курсор: справка;
}

span [data-descr]: hover :: after,
span [data-descr]: focus :: after {
  содержимое: attr (описание-данные);
  позиция: абсолютная;
  слева: 0;
  верх: 24px;
  минимальная ширина: 200 пикселей;
  граница: 1px #aaaaaa solid;
  радиус границы: 10 пикселей;
  цвет фона: #ffffcc;
  отступ: 12 пикселей;
  цвет: # 000000;
  размер шрифта: 14 пикселей;
  z-индекс: 1;
}
  

Результат

Таблицы BCD загружаются только в браузере

Общие сведения об использовании символов +,> и ~ в селекторах CSS | автор: Аникет Кудале

Селектор CSS может содержать более одного простого селектора.Между простыми селекторами мы можем включить комбинатор.

Комбинатор - это то, что объясняет взаимосвязь между селекторами.

В CSS есть четыре разных комбинатора:

• Селектор потомков (пробел)
• Селектор дочерних элементов (>)
• Селектор соседних братьев и сестер (+)
• Селектор общих братьев и сестер (~)

Давайте посмотрим, как могут использовать разные символы (+,> и ~) в селекторах CSS и их отличия.

Начнем с примера HTML.

 
 
 
 Яблоко 
 
 
 
 
 Яблоко в день убережет доктора! 
 
 
 
 
 Банан 
 
 < p> Cherry 
 
 
 

Это один из наиболее часто используемых селекторов в CSS.

 div.container p {
  font-size : 20px; 
} 

Как вы можете видеть в приведенном выше коде, между div есть пробел.контейнер и п. Он называется селектором Descendant . Он будет нацелен на все теги

в контейнере div. То есть все элементы

, являющиеся дочерними элементами #container на любой глубине.

Это называется дочерним селектором. Правила CSS будут применяться к элементам, которые являются непосредственными дочерними элементами конкретного элемента.

 div.container> p {
  border-bottom : 1 пиксель, пунктирный черный; 
} 

Он будет нацелен (представлен зеленой точкой на изображении HTML) на все теги

, которые являются непосредственными дочерними элементами контейнера

 div + p {
  background-color : желтый; 
} 

 div ~ p {
  background-color : желтый; 
} 

p {цвет: зеленый; } 

п эм {цвет: зеленый; } 

.highlight {цвет фона: #ffcccc; } 

#content {border: 2px сплошной зеленый; } 

p> em {цвет: зеленый; } 

h5 + p {цвет: зеленый; } 

 a: link {color: red} / * непосещенные ссылки * /
a: посещенные {color: blue} / * посещенные ссылки * /
a: hover {color: green} / * пользователь наводит курсор * /
a: active {color: lime} / * активные ссылки * / 

* {border: 1px сплошной синий;} 

* {
   маржа: 0;
   отступ: 0;
} 

  h2 {font-family: sans-serif}
h3 {font-family: sans-serif}
h4 {font-family: sans-serif}
  

  h2, h3, h4 {font-family: sans-serif}
  

  h2 {font-family: sans-serif}
h3..foo {font-family: sans-serif}
h4 {font-family: sans-serif}
  

  h2, h3..foo, h4 {font-family: sans-serif}
  

 p {
 background-color: yellow; 
} 

 h2 {
 text-align: center; 
 цвет: красный; 
} h3 {
 выравнивание текста: по центру; 
 цвет: красный; 
} p {
 text-align: center; 
 цвет: красный; 
} 

 h2, h3, p {
 выравнивание текста: по центру; 
 цвет: красный; 
} 

 #dog {
 background-color: purple; 
} 

 li.roomy {
 margin: 2em; 
} 

 
 Дэвид Уолш 
 

 h3 [rel = "friend"] {
  цвет: фиолетовый;  
} 

 input [type = "checkbox"] {
  цвет: фиолетовый;  
} 

 a [href = "https://blog.bitsrc.io"] {
  цвет: фиолетовый;  
} 

 div h2 {
 цвет фона: фиолетовый; 
}