Что такое дочерний элемент в css

Селекторы. Часть 4.

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

Селекторы типов дочерних элементов

Псевдокласс :first-of-type

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

Отличие псевдокласса :first-of-type от :first-child заключается в том, что он выбирает первый дочерний элемент определенного типа, а не первый дочерний элемент этого типа. Псевдокласс :first-child мы с Вами рассматривали в предыдущей статье учебника «Селекторы. Часть 3».

Рассмотрим пример, в котором главное содержимое страницы заключено в блоки

В этом примере с использованием псевдокласса :first-of-type мы стилизовали первые абзацы внутри каждого блока.

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

Рис. 25а Пример использования псевдокласса :first-of-type.

Псевдокласс :last-of-type

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

Псевдокласс :last-of-type работает как и :last-child, но применяется к дочернему элементу определенного типа, а не к элементу с любым типом. Псевдокласс :last-child мы с Вами рассматривали в предыдущей статье учебника «Селекторы. Часть 3».

Рассмотрим пример, в котором главное содержимое страницы заключено в блоки

В этом примере с использованием псевдокласса :last-of-type мы стилизовали последние абзацы внутри каждого блока.

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

Рис. 25б Пример использования псевдокласса :last-of-type.

Псевдокласс :nth-of-type

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

Псевдокласс :nth-of-type работает, как и :nth-child, но применяется к чередующимся дочерним элементам определенного типа, а не к элементу с любым типом. Псевдокласс :nth-сhild мы с Вами рассматривали в предыдущей статье учебника «Селекторы. Часть 3».

Псевдокласс имеет следующий синтаксис:

В качестве значения псевдокласса :nth-of-type может выступать не только порядковый номер дочернего элемента определенного типа, но и ключевые слова, которые могут определять целую группу элементов. В качестве ключевого слова можно использовать два значения:

Кроме того псевдокласс :nth-of-type, как и :nth-child в качестве значения может использовать простую математическую формулу:

Этот селектор означает, что каждый четвёртый элемент

, начиная со второго внутри родительского элемента будет стилизована:

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

Этот селектор означает, что каждый четвёртый элемент

, начиная с третьего (-1 элемента нет по объективным причинам, поэтому происходит сдвиг влево), будет стилизован:

Рассмотрим пример, в котором главное содержимое страницы заключено в блоки

В этом примере с использованием псевдокласса :nth-of-type мы стилизовали первые абзацы внутри каждого блока.

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

Рис. 25в Пример использования псевдокласса :nth-of-type.

Отличие :nth-child от :nth-of-type()

Давайте разберем еще очень важный пример, чтобы понять в чем заключается отличие псевдокласса :nth-child от псевдокласса :nth-of-type, который выбирает каждый указанный элемент определенного типа, при этом он является дочерним элементом своего родительского элемента.

Допустим, у нас есть статья, в которой два параграфа и мы хотим стилизовать абзац №2 отлично от первого, установив задний фон цвета khaki:

Допустим мы стоим перед выбором какой селектор использовать: p:nth-child(2) или p:nth-of-type(2). Попробуем проверить как работают оба варианта:

Что не удивительно оба селектора работают для данной задачи. Но в чём разница?

Давайте рассмотрим на примере, ах да, мы добавим к нашей статье заголовок второго уровня (тег

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

Рис. 25г Пример использования псевдоклассов :nth-of-type() и :nth-child().

В данном примере селектор p:nth-child(2) выбирает второй дочерний элемент своего родителя, а с добавлением заголовка второго уровня (тег

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

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

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

Перед нами стоит задача стилизовать все абзацы (элементы

Рис. 26 Выбор смежных элементов в документе.

Обратите внимание, что элементы считаются сестринскими если они расположены на одном уровне в пределах одного родителя, мы с Вами ранее уже рассматривали это в статье «Селекторы. Часть 2». Какие сестринские элементы не отмечены на изображении?.

Что касается смежных элементов, то для того, чтобы нам выбрать все элементы

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

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

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

Рис. 26а Пример использования селектора смежных элементов.

Селектор следующих элементов

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

Использование селектора следующих элементов (элемент 1

Перед нами стоит задача стилизовать все абзацы (элементы

, которые являются сестринскими по отношению к друг другу (они выделены оранжевым цветом на изображении):

Рис. 27 Выбор смежных и сестринских элементов в документе.

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

Для того, чтобы нам выбрать все элементы

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

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

). Для этого нам необходимо использовать селектор следующих элементов с универсальным селектором:

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

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

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

Рис. 27а Пример использования селектора следующих элементов.

Вопросы и задачи по теме

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

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

Источник

Селекторы. Часть 2.

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

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

Древовидная структура HTML документа

Рассмотрим следующее изображение:

Рис. 8 Пример древовидной структуры HTML.

Рис. 8а Предок в HTML документе.

Рис. 8б Потомки в HTML документе.

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

Рис. 8в Потомок для нескольких элементов.

Рис. 8г Родительские элементы в HTML документе.

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

, и является дочерним именно для него.

Рис. 8д Дочерние элементы в HTML документе.

Еще раз акцентирую ваше внимание на том, что сестринские элементы расположены на одном уровне в пределах одного родителя. К примеру, элементы

Рис. 8е Сестринские элементы в HTML документе.

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

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

Например, во всех заголовках

Вместо h2 i в нашем случае можно воспользоваться и универсальным селектором h2 *, так как внутри элемента

У Вас может возникнуть вопрос: почему мы просто не создали селектор класса для i? Благодаря селектору потомка у нас отсутствует необходимость с использованием глобального атрибута class назначать каждому элементу свой класс, что может значительно сэкономить наше время.

Рассмотрим этот пример:

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

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

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

Рис. 10 Древовидная структура страницы.

При создании селектора потомков вы объединяете селекторы вместе согласно «ветви дерева» документа, помещая самого старшего родителя слева, а форматируемый элемент располагаете справа.

Селекторы, которые будут работать аналогично и выбирать элементы внутри элементов :

Обратите внимание, что селекторы потомков могут включать более двух элементов, то есть содержать весь путь по дереву страницы, или наоборот могут не включать какие-то элементы, которые вложены по пути к форматируемому элементу и это тоже будет работать. Старайтесь без необходимости не включать «лишние» селекторы по пути к форматируемому элементу и использовать короткие селекторы.

Используя селектор потомков, давайте отформатируем ссылки, которые находятся только внутри элементов маркированного списка:

Как вы понимаете, ссылка, помещённая внутри элемента

не будет отформатирована, для неё мы создадим свой стиль:

Теперь соберем это в одном примере и посмотрим результат:

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

Рис. 11 Пример декорирования ссылок с использованием селекторов потомков.

Продвинутое использование селекторов потомка

Рассмотрим пример, который более приближен к текущим реалиям, а именно комбинирование селекторов класса, а не селекторов типа, как мы рассматривали в примерах выше.

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

Предлагаю каждого сотрудника поместить в отдельный контейнер (элемент

Затем мы создаем стили для контейнера и селекторов потомков:

Теперь соберем это в одном примере и посмотрим результат:

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

Рис. 12 Пример стилизации карточки сотрудников с использованием селекторов потомков.

Вопросы и задачи по теме

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

Практическое задание № 3.

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Что вы не знали о селекторах CSS?

CSS Selectors

Объясняю многие селекторы применимо к указанному примеру.

.class

Выбирает, объединяет все элементы

element

(Пр. p ) Объединяет все элементы тега p.

element,element

(Пр. div,p) Объединяет все элементы div и все элементы p
.
Так же в эту группу можно выделить похожие селекторы:

element element

(Пр. div p) Выбирает все элементы p внутри div.

element>element

(Пр. div>p) Объединяет все p для которых родителем выступает div.

element+element

(Пр. div+p) Объединяет все p которые расположены сразу после div.

[attribute]

(Пр. [target]) Объединяет все элементы с атрибутом target

[attribute=value]

(Пр. [target=_blank]) Объединяет все элементы с заданным target=»_blank»

[attribute

=Apple]) Объединяет все элементы, которые в своем title содержат «Apple»

[attribute|=value]

(Пр. [class|=top]) Объединяет все элементы с атрибутом class начиння с «top»

Все теги написаны были без «<>«.

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

Так же их называют Псевдокласы:

:visited

:active

:hover

:focus

:first-letter

:first-line

:first-child

:before

:after

:lang(language)

(Пр. p:lang(it)) Довольно простой, но порой нужный элемент — для примера: Определяет стиль каждого p с атрибутом lang, значение которого начинается с «it»

Селекторы CSS3

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

element1

ul)
Устанавливает цвет фона для всех ul элементов, которые предшествуют p с таким же родителем. Грубо говоря — на этом примере, красным будет бэкграунд только у тех «списков» которые стоят после родителя тега р.
— в этом случае ничего не произойдет, а в
а в этом случае поля Айтемов будут иметь бэк-цвет — красный.

[attribute^=value]

(Пр. a[src^=«https»]) По примеру определяет стиль каждого a для которого значение элемента src начинающегося с «https». Вот еще пример:

Проще говоря – данный селектор дает возможность установить цвет фона на всех div элементов, которые имеют значение атрибута класса, начинающихся с «тест» – а именно item3, item4.

[attribute$=value]

(Пр. a[src$=».pdf»]) Выбирает каждый тег a, для которого SRC значение атрибута заканчивается на «. PDF. И вот еще один наглядный пример:

На этом примере очень хорошо будет видно использование данного селектора, а именно в Красный цвет перекрасятся Item1 (по тому что класс заканчивается на _test) и item3.

[attribute*=value]

(Пр. a[src*=«w3schools»]) Выбирает каждый тег a, для которого значение атрибута SRC содержит подстроку «w3schools».

В этом примере результатом будут закрашенные строки item1, item3, item4.

Дальше перейдем к псевдоклассам

:first-of-type

:last-of-type

:only-of-type

:only-child

(Пр. p:only-child) Такой элемент применяется по примеру к дочернему элементу p, только если он единственный у родителя

Следующие два можно также неплохо использовать для определенной последовательности – нечетные (odd), четные(even) или число(1,2,3… или выражения 2n+1), заданные в (Х):

:nth-child(n)

, который является вторым дочерним элементом у родителя.

:nth-last-child(n)

:nth-of-type(n)

:nth-last-of-type(n)

:last-child

(Пр. p:last-child) Данный селектор задает стилевое оформление последнего элемента своего родителя.

Также стоит выделить:

:empty

:target

:enabled

:disabled

:checked

:not(selector)

(Пр. :not(p)) На примере стиль применяется ко всем элементам, которые не p. В качестве селектора могут быть псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов.

Источник

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

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

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

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

.container p <
color: red;
>

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

.container > p <
color: red;
>

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

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

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

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

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

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

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

Источник