CSS селектор для первого элемента с классом

У меня есть набор элементов с именем класса red, но я не могу выбрать первый элемент с class="red"использованием следующего правила CSS:

.red:first-child {
    border: 5px solid red;
}

<p class="red"></p>
<div class="red"></div>

Что не так в этом селекторе и как мне его исправить?

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

.home .red:first-child {
    border: 1px solid red;
}

<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

Как я могу нацелиться на первого ребенка в классе red?

Это один из самых известных примеров недопонимания авторами того, как :first-childработает. Представленный в CSS2 , :first-childпсевдокласс представляет самого первого потомка своего родителя . Вот и все. Существует очень распространенное заблуждение, что он выбирает тот дочерний элемент, который первым соответствует условиям, заданным остальной частью составного селектора. Из - за способа селекторов работы (см здесь для объяснения), что просто не соответствует действительности.

Селектор 3-го уровня представляет :first-of-typeпсевдокласс , который представляет первый элемент среди братьев и сестер своего типа. Этот ответ с иллюстрациями объясняет разницу между :first-childи :first-of-type. Однако, как и в случае :first-child, он не смотрит на какие-либо другие условия или атрибуты. В HTML тип элемента представлен именем тега. В вопросе этот тип есть p.

К сожалению, не существует аналогичного :first-of-classпсевдокласса для сопоставления первого дочернего элемента данного класса. Один из обходных путей, который мы с Леа Вероу придумали для этого (хотя и совершенно независимо), заключается в том, чтобы сначала применить желаемые стили ко всем элементам этого класса:

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

... затем "отменим" стили для элементов с классом, которые идут после первого , используя общий братский комбинатор~ в главном правиле:

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

Теперь только первый элемент с class="red"будет иметь границу.

Вот иллюстрация того, как применяются правила:

<div class="home">
  <span>blah</span>         <!-- [1] -->
  <p class="red">first</p>  <!-- [2] -->
  <p class="red">second</p> <!-- [3] -->
  <p class="red">third</p>  <!-- [3] -->
  <p class="red">fourth</p> <!-- [3] -->
</div>

1. Правила не применяются; Граница не отображается
   Этот элемент не имеет класса red, поэтому он пропущен.

2. Применяется только первое правило; красная граница отображается.
   Этот элемент имеет класс red, но ему не предшествуют элементы с классом redв родительском элементе . Таким образом, второе правило не применяется, только первое, и элемент сохраняет свою границу.

3. Оба правила применяются; Граница не отображается
   Этот элемент имеет класс red. Ему также предшествует хотя бы еще один элемент класса red. Таким образом, оба правила применяются, и второе borderобъявление отменяет первое, тем самым «отменяя» его, так сказать.

В качестве бонуса, хотя она была введена в селекторов 3, общий родственный комбинатор на самом деле очень хорошо поддерживается IE7 и выше, в отличие :first-of-typeи :nth-of-type()которые поддерживаются только IE9 вперед. Если вам нужна хорошая поддержка браузера, вам повезло.

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

• Вы можете использовать это для обхода :first-of-typeв IE7 и IE8, просто предоставив селектор типа вместо селектора класса (опять же, больше о его неправильном использовании здесь в следующем разделе):

  article > p {
      /* Apply styles to article > p:first-of-type, which may or may not be :first-child */
  }
  
  article > p ~ p {
      /* Undo the above styles for every subsequent article > p */
  }

• Вы можете фильтровать по селекторам атрибутов или любым другим простым селекторам вместо классов.

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

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

Стоит отметить, что в Selectors 4 введено расширение для :nth-child()обозначения (изначально это был совершенно новый псевдокласс :nth-match()), которое позволит вам использовать что-то вроде :nth-child(1 of .red)гипотетического .red:first-of-class. Это сравнительно недавнее предложение, поэтому недостаточно совместимых реализаций, чтобы его можно было использовать на производственных площадках. Надеюсь, это скоро изменится. В то же время предложенный мной обходной путь должен работать в большинстве случаев.

Имейте в виду, что этот ответ предполагает, что вопрос ищет каждый первый дочерний элемент, который имеет данный класс. Не существует ни псевдокласса, ни даже общего CSS-решения для n-го совпадения сложного селектора по всему документу - вопрос о том, существует ли решение, сильно зависит от структуры документа. JQuery предоставляет :eq(), :first, :lastи многое другое для этой цели, но еще раз отметить , что они работают очень по- разному с :nth-child()соавт . Используя API селекторов, вы можете использовать document.querySelector()для получения самого первого соответствия:

var first = document.querySelector('.home > .red');

Или используйте document.querySelectorAll()с индексатором, чтобы выбрать любое конкретное совпадение:

var redElements = document.querySelectorAll('.home > .red');
var first = redElements[0];
var second = redElements[1];
// etc

Хотя .red:nth-of-type(1)решение в первоначальном принятом ответе Филиппа Добмайера работает (которое изначально было написано Мартином, но с тех пор удалено), оно не ведет себя так, как вы ожидаете.

Например, если вы хотите выбрать только pисходную разметку:

<p class="red"></p>
<div class="red"></div>

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

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

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Применение правила с помощью .red:first-of-typeбудет работать, но как только вы добавите другое pбез класса:

<div class="home">
  <span>blah</span>
  <p>dummy</p>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

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

:first-childСелектор предназначен, как говорит название, чтобы выбрать первый ребенок родительского тега. Дочерние элементы должны быть встроены в один родительский тег. Ваш точный пример будет работать (только что попробовал здесь ):

<body>
    <p class="red">first</p>
    <div class="red">second</div>
</body>

Может быть, вы вложили свои теги в разные родительские теги? Ваши теги класса redдействительно первые теги под родителем?

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

<div>
    <p class="red">first</p>
    <div class="red">second</div>
</div>
<div>
    <p class="red">third</p>
    <div class="red">fourth</div>
</div>

firstи thirdбудет красным тогда.

Обновить:

Я не знаю, почему Мартин удалил свой ответ, но у него было решение, :nth-of-typeселектор:

.red:nth-of-type(1)
{
    border:5px solid red;
} 

<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

Кредиты Мартыну . Больше информации, например, здесь . Имейте в виду, что это селектор CSS 3, поэтому не все браузеры распознают его (например, IE8 или старше).

Правильный ответ:

.red:first-child, :not(.red) + .red { border:5px solid red }

Часть I: Если элемент является первым по отношению к своему родителю и имеет класс «красный», он получает границу.
Часть II: Если элемент «.red» не является первым по отношению к своему родительскому элементу, но сразу же следует за элементом без класса «.red», он также должен заслужить честь упомянутой границы.

Скрипка или этого не случилось.

Ответ Филиппа Добмайера, хотя и принят, неверен - см. Прилагаемую скрипку.
Ответ BoltClock будет работать, но излишне определяет и перезаписывает стили
(особенно проблема, когда в противном случае он наследовал бы другую границу - вы не хотите объявлять другую границу: нет)

РЕДАКТИРОВАТЬ: В случае, если у вас есть «красный» после не красный несколько раз, каждый «первый» красный получит границу. Чтобы предотвратить это, нужно будет использовать ответ BoltClock. Смотри скрипку

Вы могли бы использовать first-of-typeилиnth-of-type(1)

.red {
  color: green;  
}

/* .red:nth-of-type(1) */
.red:first-of-type {
  color: red;  
}

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Приведенные выше ответы слишком сложны.

.class:first-of-type { }

Это выберет первый тип класса. MDN Source

Чтобы соответствовать вашему селектору, элемент должен иметь имя класса redи должен быть первым потомком своего родителя.

<div>
    <span class="red"> <!-- MATCH -->
</div>

<div>
    <span>Blah</span>
    <p class="red"> <!-- NO MATCH -->
</div>

<div>
    <span>Blah</span>
    <div><p class="red"></div> <!-- MATCH -->
</div>

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

1. Присвойте firstкласс элементу при его создании, например так:

   <p class="red first"></p>
   <div class="red"></div>

   CSS:

   .first.red {
     border:5px solid red;
   }

   Этот CSS соответствует только элементы с обоих first и redклассами.

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

   $(".red:first").addClass("first");

Я получил это в моем проекте.

div > .b ~ .b:not(:first-child) {
	background: none;
}
div > .b {
    background: red;
}

<div>
      <p class="a">The first paragraph.</p>
      <p class="a">The second paragraph.</p>
      <p class="b">The third paragraph.</p>
      <p class="b">The fourth paragraph.</p>
  </div>

Согласно вашей обновленной проблеме

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

как насчет

.home span + .red{
      border:1px solid red;
    }

Это выберет класс home , затем span span и, наконец, все .red элементы , которые размещаются сразу после элементов span.

Ссылка: http://www.w3schools.com/cssref/css_selectors.asp

Вы можете использовать nth-of-type (1), но убедитесь, что сайту не требуется поддержка IE7 и т. Д. В этом случае используйте jQuery для добавления класса тела, затем найдите элемент через класс тела IE7, затем имя элемента, затем добавьте в стиле nth-child к нему.

Вы можете изменить свой код на что-то вроде этого, чтобы заставить его работать

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Это делает работу за вас

.home span + .red{
      border:3px solid green;
    }

Вот ссылка CSS от SnoopCode об этом.

Я использую ниже CSS, чтобы иметь фоновое изображение для списка ul li

#footer .module:nth-of-type(1)>.menu>li:nth-of-type(1){
  background-position: center;
  background-image: url(http://monagentvoyagessuperprix.j3.voyagesendirect.com/images/stories/images_monagentvoyagessuperprix/layout/icon-home.png);
  background-repeat: no-repeat;
}

<footer id="footer">
  <div class="module">
    <ul class="menu ">
      <li class="level1 item308 active current"></li>
      <li> </li>
    </ul> 
  </div>
  <div class="module">
    <ul class="menu "><li></li>
      <li></li> 
    </ul>
  </div>
  <div class="module">
    <ul class="menu ">
      <li></li>
      <li></li>
    </ul>
  </div>
</footer>

Попробуй это :

    .class_name > *:first-child {
        border: 1px solid red;
    }

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

#element_id > .class_name:first-child

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

<aside id="element_id">
  Content
  <div class="class_name">First content that need to be styled</div>
  <div class="class_name">
    Second content that don't need to be styled
    <div>
      <div>
        <div class="class_name">deep content - no style</div>
        <div class="class_name">deep content - no style</div>
        <div>
          <div class="class_name">deep content - no style</div>
        </div>
      </div>
    </div>
  </div>
</aside>

Попробуйте это просто и эффективно

 .home > span + .red{
      border:1px solid red;
    }

Я считаю, что с помощью относительного селектора + для выбора элементов, размещенных сразу после, работает здесь лучше всего (как предлагалось ранее).

В этом случае также возможно использовать этот селектор

.home p:first-of-type

но это селектор элемента, а не класс.

Вот хороший список селекторов CSS: https://kolosek.com/css-selectors/

Попробуйте это решение:

 .home p:first-of-type {
  border:5px solid red;
  width:100%;
  display:block;
}

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

CodePen ссылка