Css child not first: css — not:first-child selector — Stack Overflow

Leave a Comment / Css / By alexxlab / 13.01.2023

Содержание

Псевдокласс :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+

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

Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/selector.html#first-child

Версии 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. Ссылки с линией слева

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

CSS по теме

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

Статьи по теме

Рецепты CSS

Псевдокласс :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. Ссылки с линией слева

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

Спецификация	Статус
Selectors Level 4	Рабочий проект
Selectors Level 3	Рекомендация

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

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

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

Браузеры


7	12	4	9.5	4	3


1	1	10	3.1

Браузеры

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

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

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

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

См. также

:first-child и :last-child

:first-of-type и :last-of-type
Псевдокласс :first-of-type
Псевдокласс :last-child
Псевдоклассы в CSS

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

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

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

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

css —

css — не: селектор первого дочернего элемента — Qaru спросил

10 лет, 2 месяца назад

Изменено 7 месяцев назад

Просмотрено 1,2 млн раз

У меня есть тег div , содержащий несколько тегов ul .

Я могу установить свойства CSS для первых ul только тег:

 div ul:first-child {
    цвет фона: #900;
}

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

 div ul:not:first-child {
    цвет фона: #900;
}
div ul: не (: первый ребенок) {
    цвет фона: #900;
}
div ul: первый ребенок: после {
    цвет фона: #900;
}

Как написать в CSS: «каждый элемент, кроме первого»?

CSS
css-селекторы

Одна из опубликованных вами версий действительно работает во всех современных браузерах (где поддерживаются селекторы CSS уровня 3):

 div ul:not(:first-child) {
    цвет фона: #900;
}

Если вам нужно поддерживать устаревшие браузеры или вам мешает ограничение селектора :not (он принимает только простой селектор в качестве аргумента), вы можете использовать другой метод:

Определите правило с большей областью действия, чем вы намереваетесь, а затем условно «отзовите» его, ограничив область действия тем, что вы действительно намереваетесь:

 div ul {
    цвет фона: #900; /* применяется к каждому ul */
}
div ul: первый ребенок {
    цвет фона: прозрачный; /* ограничивает область действия предыдущего правила */
}

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

Это решение CSS2 («любой ul после другого ul «) тоже работает и поддерживается большим количеством браузеров.

 див ул + ул {
  цвет фона: #900;
}

В отличие от :not и :nth-sibling , селектор соседнего родственного элемента поддерживается IE7+.

Если у вас JavaScript изменяет эти свойства после загрузки страницы, вы должны посмотреть на некоторые известные ошибки в реализациях IE7 и IE8 . См. эту ссылку.

Для любой статической веб-страницы это должно работать идеально.

Поскольку :not не принимается IE6-8 , я бы посоветовал вам следующее:

 div ul:nth-child(n+2) {
    цвет фона: #900;
}

Таким образом, вы выбираете каждый ul в его родительском элементе , кроме первого .

Дополнительные сведения см. в статье Криса Койера «Полезные рецепты :nth-child» n-й ребенок примеров.

Вы можете использовать псевдокласс «first-child» внутри псевдокласса «not()».

 div ul:not(:first-child){
    цвет фона: #900;
}

 
  <голова>
    <мета-кодировка="UTF-8">
    
    
    Псевдоклассы

<тело>
  <дел>
    <ул>
       Главная
       Товары
    
    <ул>
       О нас
       Контакты
    
    <ул>
       Услуги
       Загрузки
    
    <ул>
       Фейсбук
       Инстаграм

Альтернативные способы,

С помощью «nth-child()» будет выбран n-й номер дочернего элемента.

 div ul:not(:nth-child(1)){
    цвет фона: #900;
}

 
  <голова>
    <мета-кодировка="UTF-8">
    
    
    Псевдоклассы

<тело>
  <дел>
    <ул>
       Главная
       Товары
    
    <ул>
       О нас
       Контакты
    
    <ул>
       Услуги
       Загрузки
    
    <ул>
       Фейсбук
       Инстаграм

С помощью «nth-of-type()» он выберет n-й номер элемента своего родитель.

 div ul:not(:nth-of-type(1)){
    цвет фона: #900;
}

 
  <голова>
    <мета-кодировка="UTF-8">
    
     0">
    Псевдоклассы

<тело>
  <дел>
    <ул>
       Главная
       Товары
    
    <ул>
       О нас
       Контакты
    
    <ул>
       Услуги
       Загрузки
    
    <ул>
       Фейсбук
       Инстаграм

С помощью «nth-last-child()» будет выбрано n-е количество дочерних элементов, считая от последнего дочернего элемента. Если у вас есть 4 тега «ul», вы можете написать так.

 div ul:not(:nth-last-child(4)){
    цвет фона: #900;
}

 
  <голова>
    <мета-кодировка="UTF-8">
    
    
    Псевдоклассы

<тело>
  <дел>
    <ул>
       Главная
       Товары
    
    <ул>
       О нас
       Контакты
    
    <ул>
       Услуги
       Загрузки
    
    <ул>
       Фейсбук
       Инстаграм

С «nth-last-of-type()» будет выбран n-й номер элемента своего родителя, считая от последнего дочернего элемента. Если у вас есть 4 тега «ul», вы можете написать так.

 div ul:not(:nth-last-of-type(4)){
    цвет фона: #900;
}

 
  <голова>
    <мета-кодировка="UTF-8">
    
    
    Псевдоклассы

<тело>
  <дел>
    <ул>
       Главная
       Товары
    
    <ул>
       О нас
       Контакты
    
    <ул>
       Услуги
       Загрузки
    
    <ул>
       Фейсбук
       Инстаграм

Это один из лучших способов справиться с такими ситуациями.

not(:first-child) больше не работает. По крайней мере, с более поздними версиями Chrome и Firefox.

Вместо этого попробуйте следующее:

 ul:not(:first-of-type) {}

 раздел ли~ли {
    красный цвет;
}

Поддерживает IE7

Вы можете использовать любой селектор с , а не

 p:not(:first-child){}
p: не (: первый тип) {}
р: не (: проверено) {}
р: не (: последний ребенок) {}
p: не (: последний тип) {}
p: не (: первый тип) {}
p: не (: n-последний тип (2)) {}
p: не (n-последний ребенок (2)) {}
р: не (: n-й ребенок (2)) {}

Вы можете использовать свой селектор с :not , как показано ниже, вы можете использовать любой селектор внутри :not()

 any_CSS_selector:not(any_other_CSS_selector){
    /*ТВОЙ СТИЛЬ*/
}

вы также можете использовать :не без родительского селектора.

 : не (: n-й ребенок (2)) {
        /*ТВОЙ СТИЛЬ*/
   }

Еще примеры

 any_CSS_selector:not(:first-child){
    /*ТВОЙ СТИЛЬ*/
}
any_CSS_selector: не (: первый в своем роде) {
    /*ТВОЙ СТИЛЬ*/
}
any_CSS_selector: не (: проверено) {
    /*ТВОЙ СТИЛЬ*/
}
any_CSS_selector: не (: последний дочерний элемент) {
    /*ТВОЙ СТИЛЬ*/
}
any_CSS_selector: не (: последний тип) {
    /*ТВОЙ СТИЛЬ*/
}
any_CSS_selector: не (: первый в своем роде) {
    /*ТВОЙ СТИЛЬ*/
}
any_CSS_selector: не (: n-последний тип (2)) {
    /*ТВОЙ СТИЛЬ*/
}
any_CSS_selector: не (: n-последний ребенок (2)) {
    /*ТВОЙ СТИЛЬ*/
}
any_CSS_selector: не (: nth-child (2)) {
    /*ТВОЙ СТИЛЬ*/
}

Мне не повезло с некоторыми из вышеперечисленных,

Это было единственное, что действительно сработало для меня

ul:not(:first-of-type) {}

Это сработало для меня, когда Я пытался, чтобы первая кнопка, отображаемая на странице, не зависела от опции margin-left.

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

ul:not(:first-child)

Поскольку я использовал ul:not(:first-child) — идеальное решение.

 div ul:not(:first-child) {
    цвет фона: #900;
}

Почему это идеально, потому что, используя ul:not(:first-child) , мы можем применять CSS к внутренним элементам. Например, li, img, span, теги a и т. д.

Но при использовании других решений:

 div ul + ul {
  цвет фона: #900;
}

 раздел li~li {
    красный цвет;
}

 ul:not(:first-of-type) {}

 div ul:nth-child(n+2) {
    цвет фона: #900;
}

Они ограничивают только CSS уровня ul. Предположим, мы не можем применить CSS к li как `div ul + ul li’.

Для элементов внутреннего уровня первое решение работает идеально.

 div ul:not(:first-child) li{
        цвет фона: #900;
    }

и так далее. ..

 ли + ли {
    цвет фона: красный;
}

 div ul::nth-child(n+2){
    цвет фона: #900;
}

Тоже работает

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

css — Как пропустить первого ребенка?

спросил 12 лет, 6 месяцев назад

Изменено 3 года, 6 месяцев назад

Просмотрено 59 тысяч раз

 <дел>
   один 
   два 
   три 
   четыре 
   пять 
<дел>

Я не хочу применять CSS к первому

One

 p {color:red}

Мне нужно прямо напротив :first-child .

css
css-селекторы

С псевдоклассом отрицания:

 p:not(:first-child) { color: red; }

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

 p { color: red; }
p: первый ребенок { цвет: черный; }

и:

 * + p { цвет: красный; }

Решение Квентина :not() прекрасно работает в современных браузерах:

 p:not(:first-child) { color: red; }

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

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

Селектор соседнего брата, который соответствует любому p , который идет непосредственно после p :
```
 р + р { цвет: красный; }
 
```
Общий родственный селектор, который соответствует любому p , который следует за p :
```
 р ~ р { цвет: красный; }
 
```

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

Думаю, :nth-child() поможет.

 p: n-й ребенок (n + 2) {
  цвет фона: красный;
}

Этот стиль определяет все теги p , кроме первого, поскольку он начинается со второго дочернего элемента. Затем вы можете стилизовать первый тег p отдельно с помощью p:first-child .

Работает всегда и не требует отмены:

 p + p {
  /* делаем 15 специальных действий */
}

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

Вы также можете использовать оператор «тильда» ( ~ )

 

<голова>
    <стиль>
    р ~ р {
        фон:#ff0000;
        }
    

<тело>
     Это заголовок 
    Первый абзац.
    Второй абзац.
    Третий абзац.
    Четвертый абзац.

Вот демо JSFiddle http://jsfiddle.

Css child not first: css — not:first-child selector — Stack Overflow

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

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

Версии CSS

Описание

Синтаксис

Значения

CSS по теме

Статьи по теме

Статьи по теме

Рецепты CSS

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

Синтаксис

Обозначения

Пример

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

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

Браузеры

Браузеры

См. также

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

css — не: селектор первого дочернего элемента — Qaru спросил

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

css — Как пропустить первого ребенка?

Это заголовок

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

Рубрики