css - элемент - nth-child




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

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


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

<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 .


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


Нужно только сначала и только один абзац сделать красным. Как?

<!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>


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

#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>

Поскольку другие ответы касаются того, что с ним не так, я попробую другую половину, как это исправить. К сожалению, я не знаю, что у вас есть только 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");
    

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

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

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

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

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

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


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

<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;
    }

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

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


Чтобы соответствовать вашему селектору, элемент должен иметь имя класса 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, чтобы иметь фоновое изображение для списка 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>


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

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>


вы можете использовать first-of-type или 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_name > *:first-child {
        border: 1px solid red;
    }




css-selectors