Товаров: 0 (0р.)

Все кроме первого css: Все div кроме первого? — Хабр Q&A

Содержание

CSS-выберите всех детей, кроме первого



У меня есть следующее:

<div> 
     <p>chapter 1, paragraph 1</p>
     <p>chapter 1, paragraph 2</p>
     <div>
          <p>chapter 1, section 1, paragraph 1</p>
          <p>chapter 1, section 1, paragraph 2</p>
     </div>
</div>
<div> 
     <p>chapter 2, paragraph 1</p>
     <div>
          <p>chapter 2, section 1, paragraph 1</p>
          <p>chapter 2, section 1, paragraph 2</p>
     </div>
     <div>
          <p>chapter 2, section 2, paragraph 1</p>
          <p>chapter 2, section 2, paragraph 2</p>
     </div>
</div>

Используя CSS, можно ли выбрать все элементы <p>, кроме первого, для каждого элемента .chapter и .section ? Например, я хотел бы выбрать <p>chapter 1, paragraph 2</p>

, <p>chapter 1, section 1, paragraph 2</p> , <p>chapter 2, section 1, paragraph 2</p> , <p>chapter 2, section 2, paragraph 2</p> и так далее.

Спасибо.

css
Поделиться Источник Rui Afonso Pereira     22 ноября 2014 в 22:48

5 ответов

  • Как выбрать всех детей, кроме первого и последнего, с помощью селекторов CSS

    Как бы я выбрал всех детей в таблице, кроме первого и последнего? Я пробовал это сделать, но в конечном итоге выбираю всех детей, которые не являются первыми, и всех детей, которые не являются последними, которые в конечном итоге являются всеми детьми: table.programs tr td:not(:first-child),…

  • CSS селектор, выберите класс, кроме первого вхождения этого класса

    попытка выбрать класс, кроме первого вхождения этого класса. почему это не работает .myClass:not(.myClass:first) ps только css нет jquery, это с jquery Как выбрать все, кроме первого появления класса


2

Вы должны использовать :first-of-type в сочетании с :not

.chapter > p:not(:first-of-type),
.section > p:not(:first-of-type){
  color:#ccc
}
 
<div> 
     <p>chapter 1, paragraph 1</p>
     <p>chapter 1, paragraph 2</p>
     <div>
          <p>chapter 1, section 1, paragraph 1</p>
          <p>chapter 1, section 1, paragraph 2</p>
     </div>
</div>
<div> 
     <p>chapter 2, paragraph 1</p>
     <div>
          <p>chapter 2, section 1, paragraph 1</p>
          <p>chapter 2, section 1, paragraph 2</p>
          <p>chapter 2, section 1, paragraph 3</p>
          <p>chapter 2, section 1, paragraph 4</p>
     </div>
     <div>
          <p>chapter 2, section 2, paragraph 1</p>
          <p>chapter 2, section 2, paragraph 2</p>
     </div>
</div>

Поделиться Gabriele Petrioli     22 ноября 2014 в 22:57


1

Использовать :not(:first-child)

.chapter p:not(:first-child) {
  color: red;
}
<div> 
     <p>chapter 1, paragraph 1</p>
     <p>chapter 1, paragraph 2</p>
     <div>
          <p>chapter 1, section 1, paragraph 1</p>
          <p>chapter 1, section 1, paragraph 2</p>
     </div>
</div>
<div> 
     <p>chapter 2, paragraph 1</p>
     <div>
          <p>chapter 2, section 1, paragraph 1</p>
          <p>chapter 2, section 1, paragraph 2</p>
     </div>
     <div>
          <p>chapter 2, section 2, paragraph 1</p>
          <p>chapter 2, section 2, paragraph 2</p>
     </div>
</div>

Поделиться

Weafs.py     22 ноября 2014 в 22:52


1

Еще один подход, как часть стремления к завершенности, perpaps:

.chapter p:first-child ~ p {
  color: red;
}

.chapter {
  border: 1px solid #000;
}

.section {
  border-top: 1px solid #999;
  margin-left: 2em;
}
<div> 
     <p>chapter 1, paragraph 1</p>
     <p>chapter 1, paragraph 2</p>
     <div>
          <p>chapter 1, section 1, paragraph 1</p>
          <p>chapter 1, section 1, paragraph 2</p>
     </div>
</div>
<div> 
     <p>chapter 2, paragraph 1</p>
     <div>
          <p>chapter 2, section 1, paragraph 1</p>
          <p>chapter 2, section 1, paragraph 2</p>
     </div>
     <div>
          <p>chapter 2, section 2, paragraph 1</p>
          <p>chapter 2, section 2, paragraph 2</p>
     </div>
</div>

Рекомендации:

Поделиться David says reinstate Monica     22 ноября 2014 в 23:23

  • liferay скорость получения первых детей или первого брата

    Есть ли способ вместо того, чтобы получить всех детей или всех братьев и сестер с $var.getChildren() и $var.getSiblings(), получить только первого ребенка или первого брата ? Я не мог найти ничего другого, кроме как петлять по элементам. Работает ли $var.getChildren(1)?

  • Выберите детей верхнего уровня, используя CSS

    Можно ли выбрать всех детей верхнего уровня независимо от их типа с помощью CSS. <div class=parent> <div class=top-level-1> <!— CONTENT —> </div> <div class=top-level-2> <!— CONTENT —> </div> <a class=top-level-3> <!— CONTENT —>…


0

Вы можете использовать nth-child

<style>
 .chapter p:nth-child(2) {
  color: red;
 }
 .section p:nth-child(2) {
  color: blue
 }
</style>
<div> 
     <p>chapter 1, paragraph 1</p>
     <p>chapter 1, paragraph 2</p>
     <div>
          <p>chapter 1, section 1, paragraph 1</p>
          <p>chapter 1, section 1, paragraph 2</p>
     </div>
</div>
<div> 
     <p>chapter 2, paragraph 1</p>
     <div>
          <p>chapter 2, section 1, paragraph 1</p>
          <p>chapter 2, section 1, paragraph 2</p>
     </div>
     <div>
          <p>chapter 2, section 2, paragraph 1</p>
          <p>chapter 2, section 2, paragraph 2</p>
     </div>
</div>

Поделиться Reza Aria     22 ноября 2014 в 22:55


0

Вы можете использовать элемент+селектор элементов для своей задачи, и вот пример.

.chapter p + p,
.section p + p {  };

Он выберет все следующие элементы после первого тега p.

Поделиться alphawow     22 ноября 2014 в 23:01

Похожие вопросы:


jQuery селектор для всех коллов, кроме первого колла на столе

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


Как скрыть всех детей, кроме первого ребенка в Javascript/JQuery и CSS?

HTML: <table id=collapse> <tbody> <tr> <th>Heading</th> </tr> <tr> <td>Text</td> </tr> <tr> <td>Text</td> </tr>…


Выберите все ‘tr’, кроме первого

Как я могу выбрать все элементы tr , кроме первого tr в таблице с CSS? Я попробовал использовать этот метод, но обнаружил, что он не работает.


Как выбрать всех детей, кроме первого и последнего, с помощью селекторов CSS

Как бы я выбрал всех детей в таблице, кроме первого и последнего? Я пробовал это сделать, но в конечном итоге выбираю всех детей, которые не являются первыми, и всех детей, которые не являются…


CSS селектор, выберите класс, кроме первого вхождения этого класса

попытка выбрать класс, кроме первого вхождения этого класса. почему это не работает .myClass:not(.myClass:first) ps только css нет jquery, это с jquery Как выбрать все, кроме первого появления…


liferay скорость получения первых детей или первого брата

Есть ли способ вместо того, чтобы получить всех детей или всех братьев и сестер с $var.getChildren() и $var.getSiblings(), получить только первого ребенка или первого брата ? Я не мог найти ничего…


Выберите детей верхнего уровня, используя CSS

Можно ли выбрать всех детей верхнего уровня независимо от их типа с помощью CSS. <div class=parent> <div class=top-level-1> <!— CONTENT —> </div> <div…


Как ориентироваться на всех детей, а не только на первый уровень?

Это будет нацелено на всех детей первого уровня: $(this).children() Как я могу ориентироваться на всех детей не только первого уровня, но и на детей детей и так далее?


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

У меня есть следующие css, чтобы получить последние четыре :nth-last-child(-n+4){border-bottom: none;} и он возвращает мне этот результат : В этом случае у всех последних четырех детей нет дна…


Как проверить всех детей из селектора кроме первого ребенка в шутку

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

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

Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.

Синтаксис 

Селектор:nth-child(odd | even | <число> | <выражение>) {...}

Обозначения

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

Значения

odd
Все нечётные номера элементов.
even
Все чётные номера элементов.
<число>
Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.
<выражение>
Задаётся в виде an±b, где a и b — целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2…

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

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

Табл. 1. Результат для различных значений псевдокласса
ЗначениеНомера элементовОписание
11Первый элемент, является синонимом псевдокласса :first-child.
55Пятый элемент.
2n2, 4, 6, 8, 10,…Все чётные элементы, аналог значения even.
2n+11, 3, 5, 7, 9,…Все нечётные элементы, аналог значения odd.
3n3, 6, 9, 12, 15,…Каждый третий элемент.
3n+22, 5, 8, 11, 14,…Каждый третий элемент, начиная со второго.
n+44, 5, 6, 7, 8,…Все элементы, кроме первых трёх.
-n+33, 2, 1Первые три элемента.
5n-23, 8, 13, 18, 23,…—
even2, 4, 6, 8, 10,…Все чётные элементы.
odd1, 3, 5, 7, 9,…Все нечётные элементы.

Допустимо комбинировать два псевдокласса :nth-child для выбора диапазона элементов. Здесь будут выбраны все элементы со второго по пятый.

:nth-child(n+2):nth-child(-n+5) { … }

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>nth-child</title> <style> table { width: 100%; /* Ширина таблицы */ border-spacing: 0; /* Расстояние между ячейками */ } tr:nth-child(2n) { background: #f0f0f0; /* Цвет фона */ } tr:nth-child(1) { background: #666; /* Цвет фона */ color: #fff; /* Цвет текста */ } </style> </head> <body> <table border=»1″> <tr> <td>&nbsp;</td><td>2134</td><td>2135</td> <td>2136</td><td>2137</td><td>2138</td> </tr> <tr> <td>Нефть</td><td>16</td><td>34</td> <td>62</td><td>74</td><td>57</td> </tr> <tr> <td>Золото</td><td>4</td><td>69</td> <td>72</td><td>56</td><td>47</td> </tr> <tr> <td>Дерево</td><td>7</td><td>73</td> <td>79</td><td>34</td><td>86</td> </tr> <tr> <td>Камни</td><td>23</td><td>34</td> <td>88</td><td>53</td><td>103</td> </tr> </table> </body> </html>

В данном примере псевдокласс :nth-child используется для изменения стиля первой строки таблицы, а также для выделения цветом всех чётных строк (рис. 1).

Рис. 1. Применение псевдокласса :nth-child к строкам таблицы

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

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

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

Браузеры

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

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

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

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

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

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

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

css — Есть ли CSS-селектор для всех внуков, кроме первого?

В этом JSFiddle как я могу стилизовать все элементы <a>, кроме первого внука? (abc) с одним селектором? Я хочу избежать двух правил любой ценой.

#outer a:not(:first-child){
  color: red;
}
<div>
  <div>
    <a>abc</a>
    <a>def</a>
    <a>hij</a>
  </div>
  <div>
    <a>klm</a>
    <a>opq</a>
  </div>
</div>

1

user2651804 13 Фев 2018 в 13:00

3 ответа

Лучший ответ

Вы можете сделать это (не уверен, сможете ли вы избежать более чем одного селектора) 

#outer >div:first-child a:not(:first-child),
#outer >div:not(:first-child) a{
  color: red;
  border:1px solid;
}
<div>
  <div>
    <a>abc</a>
    <a>def</a>
    <a>hij</a>
  </div>
  <div>
    <a>klm</a>
    <a>opq</a>
  </div>
</div>

1

Temani Afif 13 Фев 2018 в 10:16

Это работает, не совсем уверен, почему!

#outer :not(:first-child) {
  color: red;
}
<div>
  <div>
    <a>abc</a>
    <a>def</a>
    <a>hij</a>
  </div>
  <div>
    <a>klm</a>
    <a>opq</a>
  </div>
</div>

0

barro32 13 Фев 2018 в 10:09

Одно правило 2 селектора:

a ~ a общий братский комбинатор охватывает любой <a>, следующий за другим <a>. Это в основном выбирает все, кроме первого <a> родного брата <a>.

div:nth-of-type(n+2) a . Он нацелен на все <a> внутри второго div и на все предшествующие div в будущем 🟊 .

Демо

a~a,
div:nth-of-type(n+2) a {
  color: red
}
<div>
  <div>
    <a>abc</a>
    <a>def</a>
    <a>hij</a>
  </div>
  <div>
    <a>klm</a>
    <a>opq</a>
  </div>
</div>

🟊 Подсказка Темани Афифу за предложение (n+2).

1

zer00ne 13 Фев 2018 в 10:30

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

Если эффект следующий, псевдо-класс css может его понять ↓↓↓



Для каштана:

 <div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
<style>
.contents{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.contents div{
    height: 150px;
    line-height: 150px;
    width: 150px;
    background: #ccc;
    text-align: center;
    color:#fff;
}
</style>

Способ первый:
: not (селектор) Селектор соответствует каждому элементу, который не является указанным элементом / селектором.
: селектор first-child Выбирает указанный селектор первого дочернего элемента, который принадлежит его родительскому элементу.
<style> .contents div:not(:first-child){ background:blue; } </style>
Метод 2:
Используйте nth-of-type () или nth-child ().
(n начинается с 0, затем n + 2 естественным образом начинается со второго элемента. Аналогично, если вы выбираете особый элемент, то это 2n + 1. Элемент, то он должен быть записан как 2n + 2; конкретную ситуацию можно использовать в соответствии с ситуацией в проекте.)

<style>
.contents div:nth-of-type(n+2){
	background:blue;
}
</style>

Или:

<style>
.contents div:nth-child(n+2){
	background:blue;
}
</style>

Способ 3: Используйте селектор + или ~ умно.
(+ селектор: если вам нужно выбрать элемент сразу после другого элемента, и оба имеют один и тот же родительский элемент, вы можете использовать соседний селектор брата. ~ selector: role Это найти всех братьев и сестер после указанного элемента.)

<style>
.contents div+div{
   background:blue;
}
</style>

Или:

<style>
.contents div~div{
  background:blue;
}
</style>

Примечание. Различия и эффекты селекторов css Brother (+ и ~) заключаются в следующем:Использование и различие селекторов одноуровневых css (+ и ~)
1. + селектор
Если вам нужно выбрать элемент сразу после другого элемента, и оба имеют один и тот же родительский элемент, вы можете использовать соседний селектор брата. Например:

<p>This is paragraph.</p>
<h2>This is a heading.</h2>
<p>This is paragraph.</p>

<style type="text/css">
    h2 + p {
        margin-top:50px;
        color:red;
    }
</style>

Эффект заключается в следующем:

Селектор брата влияет только на стиль тега p ниже, а не на стиль брата выше.

Обратите внимание, что значение «+» отличается от значения «и». Стиль селектора одноуровневого элемента применяется к элементу одноуровневого элемента и не имеет ничего общего со стилем ссылочного элемента. Приведенный выше пример влияет только на стиль элемента p и не влияет на тег h2. стиль. Конечно, это также будет искать в цикле, то есть, когда два родственных элемента одинаковы, он будет искать в цикле:

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</div>
<style type="text/css">
    li + li {
        color:red;
    }
</style>

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

<p>1</p>
<h4>2</h4>
<p>3</p>
<p>4</p>
<p>5</p>
<style type="text/css">
    h2 ~ p{
        color:red;
    }
</style>

После запуска тега h4 шрифт тега p становится красным.

Псевдокласс :not в CSS. Примеры использования

Обычно нам требуется задать некое форматирование для классов, элементов или id.  Однако, бывают случаи, когда нужно назначить форматирование для элементов, которые не имеют какого-либо селектора, либо для всех, кроме определенного селектора. Чаще всего таким селектором является селектор класса, хотя это далеко не единственный вариант. Для таких случаев нам понадобится псевдокласс :not.

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

селектор1:not(селектор2) { свойства }

селектор1:not(селектор2) { свойства }

Давайте рассмотрим несколько примеров форматирования элементов с использованием псевдокласса :not.

Форматирование статей, которые не содержат определенный класс

Для всех статей, которые не имеют класса tag-images, зададим цвет фона, чтобы было заметней.

article:not(.tag-images) { background-color: #b3d5f7; }

article:not(.tag-images) {

  background-color: #b3d5f7;

}

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

Псевдокласс :not и мультиклассы

Для страниц в CMS WordPress характерно назначение большого количества классов для элемента body. Например, так:

<body>

<body>

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

body:not(.home):not(.single):not(.single-post) { width: 90%; }

body:not(.home):not(.single):not(.single-post) {

  width: 90%;

}

Изменяем цвет всех элементов списка, кроме первого

Например, для того чтобы задать цвет для всех элементов списка, кроме первого, необязательно добавлять для него класс. Достаточно использовать псевдокласс :not в таком виде:

.testlist li:not(:first-child) { color: green; }

.testlist li:not(:first-child) {

  color: green;

}

Результат выглядит так, как и планировалось:

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
  • List Item 6

Форматируем ячейки таблицы

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

td:not(:nth-child(2)):not(:nth-child(3)){ text-align: center; background-color: #cde; }

td:not(:nth-child(2)):not(:nth-child(3)){

  text-align: center;

  background-color: #cde;

}

В этом случае текст с выравниванием по центру и светло-голубым фоном будут иметь все колонки, кроме второй и третьей.

Наименование Цвет Артикул Цена, грн.
Стол пластиковый Curver Elise бежевый 17180054bj 1 200
Стол пластиковый Curver Lisa бежевый коричневый 17180053bj 792
Стул пластиковый Allibert Montreal серый 17197675s 1 224
Стул пластиковый Keter Harmony armchair серо-коричневый 17201284br 1 800

Псевдокласс :not для форматирования полей формы

Допустим, у нас есть форма, в которой созданы несколько текстовых полей (<input type="text">, <input type="email"> и  <input type="password">), а также поля типа number (<input type="number">). Только для текстовых полей нам нужно добавить закругления границы и тень, а также ширину и внутренние отступы. Можно это сделать, перечислив типы нужных полей или исключив ненужные с помощью псевдокласса :not:

input:not([type=»number»]){ padding: 10px; width: 290px; border-radius: 6px; box-shadow: 0 0 6px #9ecbf8; }

input:not([type=»number»]){

  padding: 10px;

  width: 290px;

  border-radius: 6px;

  box-shadow: 0 0 6px #9ecbf8;

}

Посмотрим на примере:

Просмотров: 275

CSS псевдоклассы: стилизация элементов по индексам

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 применяет стилевое оформление к первому дочернему элементу своего родителя. Синтаксис Значения XHTML 1.0 CSS2.1 IE Cr Op […]

6 ответов

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

div ul:not(:first-child) { background-color: #900;}

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

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

div ul { background-color: #900; /* applies to every ul */}div ul:first-child { background-color: transparent; /* limits the scope of the previous rule */}

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

это решение CSS2 (“any ul после очередного ul”) тоже работает, и поддерживается большим количеством браузеров.

div ul + ul { background-color: #900;}

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

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

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

С :not не принимаются IE6~8, Я бы предложил вам следующее:

div ul:nth-child(n+2) { background-color: #900;}

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

обратитесь к Крису Койеру “полезно: nth-детские рецепты” статью nth-child примеры.

div li~li { color: red;}

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

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

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

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

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

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

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

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

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

ul:not(:first-child)

Источник: http://askdev.ru/q/kak-ya-mogu-ispolzovat-selektor-not-first-child-1460/

Синтаксис

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

Источник: http://webref.ru/css/first-child

Recommended Posts:

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to [email protected]. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the «Improve Article» button below.

Источник: http://window-10.ru/css-not-first-child/

PHP-МАСТЕР.


От теории до собственной CMS интернет-магазина
 

Подробнее

Практический курс по верстке адаптивного сайта с нуля!


Подробнее

Источник: http://webformyself.com/css-psevdoklassy-stilizaciya-elementov-po-indeksam/

Нечётные

Все нечётные номера элементов: 1, 3, 5, 7…

ul li:nth-child(odd) { background: skyblue;}/* или */ul li:nth-child(2n+1) { background: skyblue;}

2

Источник: http://snipp.ru/html-css/nth-child

Обозначения

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

Источник: http://webref.ru/css/first-child

Пример

first-child B:first-child { color: red; /* &#1050;&#1088;&#1072;&#1089;&#1085;&#1099;&#1081; &#1094;&#1074;&#1077;&#1090; &#1090;&#1077;&#1082;&#1089;&#1090;&#1072; */ } Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Результат примера показан на рис. 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 class=”links”> <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. Ссылки с линией слева

Источник: http://webref.ru/css/first-child

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

  • Selectors Level 4
  • Selectors Level 3

Источник: http://hcdev.ru/css/nth-child/

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

BCD tables only load in the browser

Источник: http://developer.mozilla.org/ru/docs/Web/CSS/:first-child

Присоединяйтесь к обсуждению

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

Источник: http://htmlforum.io/topic/41884-notfirst-child/

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

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

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

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

Источник: http://webref.ru/css/first-child

( 1 оценка, среднее 5 из 5 )

псевдокласс CSS, odd, even, первый элемент, каждый второй, третий, четные и нечетные элементы

Автор Андрей На чтение 3 мин. Просмотров 661 Опубликовано

Псевдокласс CSS :nth-child позволяет вам выбрать один или несколько элементов в соответствии с их порядком следования на странице в соответствии с формулой. Некоторые примеры:

/* Выбрать первый элемент списка */
li:nth-child(1) { }

/* Выбрать 5-й элемент списка */
li:nth-child(5) { }

/* Нечетные элементы начиная с первого */
li:nth-child(odd) { }

/* Выбрать каждый третий элемент списка начиная с первого */
li:nth-child(3n - 2) { }

/* Выбрать каждый 3-й элемент списка начиная со 2-го */
li:nth-child(3n - 1) { }

/* Каждый 3-й элемент, имеющий класс "el" */
.el:nth-child(3n) { }

/* Кроме первого элемента */
:nth-child(n+2) { }

/* Первые три элемента */
:nth-child(-n+3) { }

Допустимые значения псевдокласса

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

  • слово odd – указание всех нечетных элементов-наследников;
  • even – указание всех четных элементов;
  • положительное целое число – указание одного элемента;
  • формула вида an + b, в которой – указание группы элементов, члены которой выбираются  с определенной периодичностью – где a, b – целые числа, n – счетчик, которому поочередно присваиваются целые положительные значения начиная с 0. Если n = 0, то an не указываются, a и b могут быть отрицательными.

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

Обратиться к нечетным элементам можно как значением – odd, так и с помощью формулы 2n+1. Точно так же even можно заменить формулой 2n (каждый второй).

На примере мы сделали таблицу, где для четных элементов установили голубой фон для строк, а для нечетных – светло-зеленый.

See the Pen
nth-child by Андрей (@adlibi)
on CodePen.

Несмотря на то что n может быть любым натуральным числом, учитываются лишь результаты вычисления формулы, равные существующим номерам тегов, то есть с #1 по номер, равный числу элементов – наследников данного родителя.

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

/* выбор второй, третьей и четвертой ячеек строки*/
td :nth-child(n+2):nth-child(-n+4)

или

/* выбор четных ячеек начиная с четвертой */
td:nth-child(n+4):nth-child(even)

А вот цепочка из трех псевдоклассов:

/* происходит отбор четных тегов между 4-м и 12-м включительно */
:nth-child(n+4):nth-child(even):nth-child(-n+12)

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

tr :nth-child(-n+9) :nth-child(n+5) :nth-child(odd)

Особенности использования

Задавать стиль через псевдокласс :nth-child() можно двумя способами

  • указывая тип выделяемого элемента: tr :nth-child(2n);
  • записывая без селектора: :nth-child(-n+3).

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

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

Но что же делать, если элементы разнородные – например, у заголовка, кроме подзаголовков, есть и абзацы – а стиль нужно присвоить только некоторым подзаголовкам?

На такой случай в CSS припасен другой инструмент, который учитывает теги только определенного типа. Это :nth-of-type(), еще один псевдокласс. То есть если у вас в списке элементы разного типа, и вы хотите выбрать по определенному правилу только элементы какого-то одного типа, используйте nth-of-type вместо nth-child.

Как использовать селектор not: first-child в CSS?

< html >

< head < head название >

< стиль >

h2 {

цвет: зеленый;

}

div ul: not (: first-child) {

background-color: green;

цвет: белый;

стиль шрифта: курсив;

font-weight: жирный;

ширина: 60%;

левое поле: 100 пикселей;

}

h2, h3 {

выравнивание текста: по центру;

}

стиль >

головка > 000 000

< h2 > GeeksforGeeks h2 >

< h3 > not: first-child 9000 9000 < div >

< ul style = "край слева: 100px" >

0003 > gfg li >

< 9 0003 li > компьютерные фанаты li >

< li > sudo li >

000 000

< ul >

< li > Bca li > ca / ли >

< ли > B.Техника li >

ul >

div >

>

html >

: нет | CSS-уловки

Свойство : not () в CSS является псевдоклассом отрицания и принимает в качестве аргумента простой селектор или список селекторов.Он соответствует элементу, который не представлен аргументом. Переданный аргумент не может содержать дополнительных селекторов или селекторов псевдоэлементов.

Возможность использовать список селекторов в качестве аргумента считается экспериментальной, хотя на момент написания этой статьи она поддерживалась все шире, включая Safari (с 2015 года), Firefox (с декабря 2020 года) и Chrome (с января 2021 года).

  / * аргумент X можно заменить любыми простыми селекторами * /
: not (X) {
  стоимость имущества;
}

В этом примере у нас есть неупорядоченный список с одним классом на

  • :

      
      
  
    •  
      • 
  
    •  
      • 
  
    •  
      •

    Наш CSS выберет все

  • элементов за исключением элемента (ов) с классом .разные .

      / * Стилизуйте все, кроме класса .different * /
li: not (.different) {
  размер шрифта: 3em;
}

    Вы также можете сделать то же самое, используя псевдоклассы, которые считаются простым селектором.

      p: not (: nth-child (2n + 1)) {
  размер шрифта: 3em;
}

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

     : not (:: first-line) {/ * :: first-line - это селектор псевдоэлементов, а не простой селектор * /
  цвет белый;
}

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

    Это новее, чем базовые селекторы : not () .

      / * выбрать все 
    , не являющиеся потомками 
     * /
p: not (article *) {

}

    Это может стать немного сложнее, если немного больше вложенности. Например:

      h3: not (: where (article *, section *)) {
  ...
}

/ *
<статья>
   
     Нет совпадений!
    • <раздел>

    Нет совпадений!

    <сторона>

    Матч!

    * /

    Наглядный пример

    Визуальное представление различных вариантов использования : not ()

    Специфичность

    Специфика псевдокласса : not - это специфика его аргумента.Псевдокласс : not () не добавляет специфичности селектора, в отличие от других псевдоклассов.

    Отрицания не могут быть вложенными, поэтому : not (: not (...)) никогда не допускается. Авторы также должны отметить, что, поскольку псевдоэлементы не считаются простым селектором, они не подходят в качестве аргумента для : not (X) . Будьте внимательны при использовании селекторов атрибутов, поскольку некоторые из них не так широко поддерживаются, как другие. Допускается соединение : не селекторов с другими : не селекторами.

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

    Псевдокласс : not () был обновлен в спецификации CSS Selectors Level 4, чтобы разрешить список аргументов. В CSS Selectors Level 3 он мог принимать только один простой селектор. В результате поддержка браузеров немного разделена между черновиками Уровня 3 и Уровня 4.

    Простые селекторы
    IE Edge Firefox Chrome Safari Opera
    9+ Все Все Все Все1+ Все
    Android Chrome Android Firefox Браузер Android iOS Safari Opera Mobile
    Все Все Все Все Все Все Все
    Списки выбора
    Настольный компьютер
    9044 9044 Мобильный 9044
    Chrome Firefox IE Edge Safari
    88 84 Нет 88
    Android Chrome Android Firefox Android iOS Safari
    94 92 94 9.0-9,2

    Дополнительная информация

    Связанные

    Игнорирование вашего первого ребенка | Научная лаборатория

    И нет, я не говорю о человеческих детях. Я говорю о селекторах CSS!

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

    Самый простой способ - просто выбрать свой элемент обычно в одном объявлении, а затем выбрать первого дочернего элемента этого элемента с помощью псевдокласса : first-child , например:

      / * Выбрать все элементы списка. * /
li {
    верхняя граница: 1px с точками #ccc;
}

/ * Выбираем элемент списка, который является первым дочерним элементом. * /
li: first-child {
    граница-верх: нет;
}

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

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

    Когда впервые появился псевдокласс : not , для меня это была любовь с первого взгляда. Это удобный маленький селектор, позволяющий выбрать все , кроме элементов, удовлетворяющих определенному условию. Как говорится в документации W3C, это класс с отрицанием .

    Итак, используя псевдокласс : not , мы могли бы переписать наш CSS, чтобы он выглядел так:

     
/ * Выбрать все элементы списка, кроме первого дочернего.* /
li: not (: first-child) {
    верхняя граница: 1px с точками #ccc;
}

    Красиво и просто, требует написания только одного объявления CSS вместо двух. Как видите, результат тот же:

    Я использовал этот подход во многих дизайнах и по большей части был доволен им. Однако одна проблема заключается в том, что псевдокласс : not не поддерживается IE8 и более ранними версиями. До недавнего времени, чтобы обойти это, я загружал полифилл JavaScript под названием Selectivizr, чтобы в основном добавить поддержку псевдоклассов CSS3 и некоторых других селекторов в IE 8 и ранее.(Дополнительная информация о Selectivizr, включая добавляемые им функции и документацию о том, как его реализовать, на их веб-сайте.)

    Только недавно я понял, что есть лучший способ, поддерживаемый IE8 и IE7, который не требует полифилла JavaScript. Этот способ включает использование смежного одноуровневого селектора, который представляет собой всего лишь знак + , для выбора только тех элементов списка, которые являются смежными братьями и сестрами другого элемента списка. Используя соседний селектор, наш CSS будет выглядеть так:

     
/ * Выбираем любой элемент списка, который
   смежный брат другого элемента списка.* /
li + li {
    верхняя граница: 1px с точками #ccc;
}

    Этот селектор не применяет стиль к первому элементу списка, потому что перед ним нет соседнего элемента. И снова результат тот же:

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

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

    Понимание идентификатора и класса в CSS

    Обзор

    До сих пор вы добавляли стиль к различным элементам на странице портфолио, но добавленные стили повлияли на все элемента определенного типа. Например, когда вы добавили стиль к элементу div, это одинаково повлияло на все элементы div.Что, если вы хотите стилизовать некоторые элементы div одним способом, а другие элементы div - другим? Вот где на помощь приходят id и class. В этом уроке вы узнаете, как атрибуты ID и Class могут использоваться для стилизации отдельных элементов (id) или групп элементов (class).

    Результаты учащихся

    По завершении этого упражнения:

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

    Что такое id?

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