Первый дочерний элемент css: Селекторы дочерних элементов CSS. Дополнительные псевдоклассы — учебник CSS – Как для CSS выбрать все дочерние элементы родителя? — Хабр Q&A — Вебджем.рф

Содержание

Псевдокласс :first-child | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Псевдокласс :first-child применяет стилевое оформление к первому дочернему элементу своего родителя.

Синтаксис

элемент:first-child { … }

Значения

Нет.

Пример 1

XHTML 1.0CSS2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>first-child</title>
  <style type="text/css">
    B:first-child {
     color: red; /* Красный цвет текста */
    }
  </style>
 </head>
 <body>
   <p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b> 
   adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt ut lacreet 
   dolore magna aliguam erat volutpat.</p>
   <p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b> 
   exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo 
   consequat</b>.</p>
 </body>
</html>

Результат примера показан на рис. 1. В данном примере псевдокласс :first-child добавляется к селектору b и устанавливает для него красный цвет текста. Хотя контейнер <b> встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т.е. текст «Lorem ipsum». В остальных случаях содержимое контейнера <b> отображается черным цветом. Со следующим абзацем все начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.

Рис. 1. Выделение цветом первого дочернего элемента абзаца

Пример 2

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Меню</title>
  <style>
   .links { 
    background: #F6967D; /* Цвет фона */
   }
   .links a {
    color: #FFFDEB; /* Цвет ссылок */
    display: inline-block; /* Строчно-блочный элемент */
    border-left: 1px solid #B62025; /* Параметры рамки слева */
    padding: 5px 10px; /* Поля вокруг ссылок */
   }
   .links a:first-child {
    border-left: none; /* Убираем первую линию слева */
   }
  </style>
 </head>
 <body>
  <div>
    <a href="1.html">uno</a>
    <a href="2.html">dos</a>
    <a href="3.html">tres</a>
    <a href="4.html">cuatro</a>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Ссылки с линией слева

Аспекты HTML & CSS / Habr

В данном материале собраны аспекты, которые полезно знать и помнить html developer-у. Часть вопросов посвящена IE — сам отказался от поддержки IE6, однако знать особенности его поведения не будет лишним.

1. Режимы браузера

Стандартный:
Standards mode – таблицы стилей, присутствующие в документе, соответствуют спецификации CSS 2.1 (последним версиям)

Нестандартный режим (режим обратной совместимости):
Quirks mode – браузер игнорирует часть правил CSS, имитируя поведение старого движка.

Режим, приближенный к стандартному:
Almost standards mode – Opera, Firefox, Safari, в котором расположение рисунков в ячейках таблицы отображается в режиме совместимости.

2. Селекторы, псевдоклассы, псевдоэлементы

1) Селекторы:

Селектор тегов — в качестве селектора может выступать любой тег HTML, для которого определены правила форматирования.
tagName { property1: value1; property2: value2; … }
tag name – регистр не имеет значения
Селектор классов — селекторов в документе может быть любое количество.
.className { … }
className – регистр учитывается
Селектор ID — идентификатор определяет уникальное имя элемента.
#idName { … }
idName – регистр учитывается
Контекстные селекторы — состоит из селекторов тегов, селекторов классов, селекторов id и т.д., разделенных пробелами.
sel1 sel2 … { … }
Соседние селекторы — элементы документа, когда они следуют друг за другом в коде. В синтаксисе CSS значения применяются к свойствам элемента, следующего после +
<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>
b, var – соседние
sel1 + sel2 { … }
Дочерние селекторы — располагаются непосредственно внутри родительского элемента. В синтаксисе CSS значения стиля применяются только к дочернему элементу.
<p><em>Lorem ipsum dolor sit amet</em>, consectetuer adipiscing
elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
em – дочерний элемент p
sel1 > sel2 { … }
sel1 – родительский селектор
sel2 – дочерний селектор
Селекторы атрибутов:
[attribute] { … }
Универсальный селектор — определяет стиль для всех элементов документа.
* { … }

2) Псевдоклассы:

sel:pClass {
…
}

• :link – непосещенная ссылка ( можно не указывать )
• :visited – посещенная ссылка
• :hover – наведение на ссылку

• :active – щелчок по ссылке
• :focus – придание фокуса элементу ( a, input, select, textarea )
• :first-child – применяется к первому дочернему элементу селектора
• :lang(lang)

3) Псевдоэлементы:

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

• :first-line – стиль первой строки
• :first-letter – стиль первого символа
• :after { content: “…”; } – применяется для вставки назначенного контента после элемента
• :before { content: “…”; } – применяется для вставки назначенного контента до элемента

3. Каскадирование и специфичность

Правила каскадирования определяют следующие приоритеты:
1) Пользовательские стили, отмеченные флажком !important
2) Авторские стили, отмеченные флажком !important
3) Авторские стили
4) Пользовательские стили
5) Стили по умолчанию браузера

Специфичность:
Для вычисления каждому типу селекторов присваивается числовое значение. Специфичность вычисляется путем суммирования значения каждого селектора. Вычисление происходит в системе с неопределенно высоким основанием.

abcd

1) если стиль встроенный, a = 1
2) b равно общему количеству селекторов идентификаторов
3) c равно общему количеству классов, псевдоклассов и селекторов атрибутов
4) d равно количеству селекторов типов и псевдоэлементов

4. hasLayout

hasLayout – свойство IE, которое определяет, как элемент располагается в потоке, его размеры, позиционирование, реакцию на события и влияние на другие элементы. В основном, элементы в Internet Explorer не отвечают за организацию самих себя. Тег или может иметь положение, как в исходном коде и потоке документа, но их контент упорядочивает ближайший предок с лейаутом (обычно ). Такие элементы полагаются на предка, чтобы он сделал для них всю тяжелую часть по определению размера и единиц измерения.

Элементы, которые имеют hasLayout по умолчанию:
• html, body
• table, tr, th, td
• img
• hr
• input, button, select, textarea, fieldset, legend
• iframe, embed, object, applet
• marquee
Следующие значения перечисленных свойств дают элементу «layout» (hasLayout = true):
• position: absolute
• float: left или right
• height, width: любое значение кроме auto
• display: inline-block
• zoom: любое значение кроме normal (невалидное свойство)
• writing-mode: tb-rl
• overflow, overflow-x, overflow-y: auto|scroll|hidden (только в IE7)
• position: fixed (только в IE7)
• min-width, min-height: любое значение (только в IE7)
• max-width, max-height: любое значение кроме none (только в IE7)

Чтобы скинуть hasLayout, нужно указать значение, отличное от перечисленных выше (например: width: auto или float: none).

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

5. Баги IE и их решения

1) Условные комментарии:

 <!--[if IE 6]>content for IE 6<![endif]-->

<!--[if gt IE 7]>content for greater than IE 7<![endif]-->

<!--[if gte IE 8]>content for greater or equal than IE 8<![endif]-->

<!--[if lt IE 6]>content for later than IE 6<![endif]-->

<!--[if lte IE 7]>content for later or equal than IE 7<![endif]-->

2) Ошибка с двойным маргином плавающих элементов:

Проблема: в IE 6 у плавающих элементов создается двойной маргин.

Решение: добавить display: inline.

3) Абсолютное позиционирование в контейнере, позиционированном относительно:

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

4) Абсолютно позиционированные контейнеры внутри абсолютно/относительно позиционированных:

Проблема: в IE абсолютно позиционированные контейнеры внутри относительно позиционированных при наложении выстраиваются не в соответствии с z-index.
Решение: добавить z-index к родительским абсолютно/относительно позиционированным элементам.

Псевдокласс :first-child | CSS | WebReference

Псевдокласс :first-child задаёт стиль первого элемента в группе братских элементов (имеющих одного родителя).

В качестве примера рассмотрим следующий код HTML:

<article>
  <h2>Роль цитокинов при дорсалгии</h2>
  <p>Автор: Гордон Фримен, канд. физ.-мат. наук</p>
  <p>Содержание статьи</p>
  <address>Почта: [email protected]</address>
  <p>Опубликовано: <time datetime="2018-11-27">27 ноября 2018</time></p>
</article>

Псевдокласс :first-child без указания селектора выберет все первые элементы внутри <article> и установит для них красный цвет текста. Здесь первыми идут <h2> и <time>, они и будут выбраны.

article :first-child { color: red; }

При добавлении селектора к :first-child сперва берётся первый элемент, затем смотрится какого он типа. Если элемент совпадает с указанным селектором, то он будет выбран. Таким образом, выбирается элемент, если он удовлетворяет двум условиям одновременно: это первый элемент и это элемент указанного типа. Здесь красным цветом будет выделен заголовок, поскольку первым идёт именно <h2>.

article h2:first-child { color: red; }

Если вместо h2 использовать другой селектор, то ничего выбрано не будет, поскольку не выполняется условие «первый элемент это <p>».

article p:first-child { color: red; }

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

Вместо :first-child допустимо использовать :nth-of-child(1).

Синтаксис ?

Селектор:first-child { ... }

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>first-child</title>
  <style>
    B:first-child {
     color: red; /* Красный цвет текста */
    }
  </style>
 </head>
 <body>
   <p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b> 
   adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt ut lacreet 
   dolore magna aliguam erat volutpat.</p>
   <p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b> 
   exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo 
   consequat</b>.</p>
 </body>
</html>

Результат примера показан на рис. 1. В данном примере псевдокласс :first-child добавляется к селектору b и устанавливает для него красный цвет текста. Хотя контейнер <b> встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т. е. текст «Lorem ipsum». В остальных случаях содержимое контейнера <b> отображается чёрным цветом. Со следующим абзацем всё начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.

Рис. 1. Выделение цветом первого дочернего элемента абзаца

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Меню</title>
  <style>
   .links { 
    background: #F6967D; /* Цвет фона */
   }
   .links a {
    color: #FFFDEB; /* Цвет ссылок */
    display: inline-block; /* Строчно-блочный элемент */
    border-left: 1px solid #B62025; /* Параметры рамки слева */
    padding: 5px 10px; /* Поля вокруг ссылок */
   }
   .links a:first-child {
    border-left: none; /* Убираем первую линию слева */
   }
  </style>
 </head>
 <body>
  <div>
    <a href="page/1.html">uno</a>
    <a href="page/2.html">dos</a>
    <a href="page/3.html">tres</a>
    <a href="page/4.html">cuatro</a>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Ссылки с линией слева

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 06.08.2018

Редакторы: Влад Мержевич

Комбинатор дочерних элементов | CSS селектор
Поддержка браузерами
Описание
Комбинатор дочерних элементов обозначается знаком «больше чем» (>) и используется внутри селектора, между двумя простыми селекторами указывая взаимосвязь между ними. Задача данного селектора — выбор указанных дочерних элементов внутри родительского элемента, чтобы стало понятнее рассмотрим это на небольшом примере.
div > p { background-color: yellow; }
Селектор состоит из трёх частей: первым указывается простой селектор представляющий родительский элемент, после него указывается комбинатор дочерних элементов (>) и затем простой селектор, определяющий дочерний элемент. Комбинатор определяет взаимосвязь между двумя селекторами, показывая, что ко всем элементам <p>, которые являются дочерними по отношению к элементу <div> будет применен указанный стиль.
Примечание: между простым селектором и комбинатором дочерних элементов допускается ставить пробел, он никак не повлияет на работу селектора:
div>p

div> p

div >p

div > p

Пример:
<!DOCTYPE html> <html> <head> <style type="text/css"> div > span { background-color: yellow; } </style> </head> <body> <h2>Добро пожаловать!</h2> <div> <h3>Меня зовут Арни.</h3> <span>Я живу в Дакбурге.</span> </div> <div> <p><span>К этому элементу не будет применен стиль.</span></p> </div> <p>Моего кота тоже зовут Арни.</p> </body> </html>
Результат данного примера:
Добро пожаловать!
Меня зовут Арни.
Я живу в Дакбурге.
К этому элементу не будет применен стиль.
Моего кота тоже зовут Арни.
Псевдо-класс :first-child — первый элемент
Поддержка браузерами

12.0+ 7.0+ 3.0+ 4.0+ 9.6+ 3.1+
Описание
CSS псевдо-класс :first-child позволяет выбрать только первый дочерний элемент внутри родителя.
Ниже мы рассмотрим пример с псевдо-классом :first-child, применённым к элементу <p>. Обратите внимание, что стиль применяется только к первому, расположенному в коде, элементу <p> и третьему, так как первый элемент является и первым дочерним элементом для <body>, а третий будет первым дочерним элементом уже относительно <div>.
Пример:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Пример</title> <style> p:first-child { color: red; } </style> </head> <body> <p>Этот абзац является первым дочерним элементом своего родителя(body).</p> <h2>Добро пожаловать!</h2> <p>Этот абзац является третьим дочерним элементом своего родителя(body).</p> <div> <p>Этот абзац является первым дочерним элементом своего родителя(div).</p> <p>Этот абзац является вторым дочерним элементом своего родителя(div).</p> </div> </body> </html>
Результат данного примера:
Этот абзац является первым дочерним элементом своего родителя(body).
Добро пожаловать!
Этот абзац является третьим дочерним элементом своего родителя(body).
Этот абзац является первым дочерним элементом своего родителя(div).
Этот абзац является вторым дочерним элементом своего родителя(div).

Первый дочерний элемент css: Селекторы дочерних элементов CSS. Дополнительные псевдоклассы — учебник CSS – Как для CSS выбрать все дочерние элементы родителя? — Хабр Q&A

Псевдокласс :first-child | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Аспекты HTML & CSS / Habr

1. Режимы браузера

2. Селекторы, псевдоклассы, псевдоэлементы

1) Селекторы:

2) Псевдоклассы:

3) Псевдоэлементы:

3. Каскадирование и специфичность

4. hasLayout

5. Баги IE и их решения

Псевдокласс :first-child | CSS | WebReference

Синтаксис ?

Обозначения

Пример

Спецификация ?

Спецификация

Браузеры

Автор и редакторы

Комбинатор дочерних элементов | CSS селектор

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

Описание

Пример:

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

Добро пожаловать!

Меня зовут Арни.

Псевдо-класс :first-child — первый элемент

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

Описание

Пример:

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

Добро пожаловать!

Добавить комментарий Отменить ответ

Рубрики