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

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

830 голосов
/ 27 апреля 2010

У меня есть набор элементов с именем класса 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?

Ответы [ 18 ]

3 голосов
/ 27 июня 2017

Я использую ниже 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>
2 голосов
/ 03 ноября 2016

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

.class:first-of-type { }

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

2 голосов
/ 05 августа 2016

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

    .class_name > *:first-child {
        border: 1px solid red;
    }
1 голос
/ 10 апреля 2016

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

#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>
1 голос
/ 26 июля 2016

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

 .home > span + .red{
      border:1px solid red;
    }
0 голосов
/ 11 апреля 2018

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

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

.home p:first-of-type

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

Здесь у вас есть хороший список селекторов CSS: https://kolosek.com/css-selectors/

0 голосов
/ 13 июля 2018

Требуется только первый и только один абзац сделать красным. Как? 

<!DOCTYPE html><html><head><style>

article p:nth-child(1){background: red}
article p:first-child{background: red}

</style></head><body>

<p style="color:blue">Needed only first and only one paragraph had red. How?</p>

<article>
<p>The first paragraph.</p>
<div><p>The second paragraph.</p></div>
<p>The third paragraph.</p>
<div><p>The fourth paragraph.</p></div>
</article>

</body></html>
0 голосов
/ 15 декабря 2016

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

 .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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...