:first-child завершается ошибкой, когда элемент другого класса динамически вставляется выше

Итак, я столкнулся с ситуацией, когда вставка элемента другого класса / идентификатора нарушает все css-правила для этого: first-child.

<div id="nav">
    <div class="nSub">abcdef</div>
    <div class="nSub">abcdef</div>
    <div class="nSub">abcdef</div>
    <div class="nSub">abcdef</div>
    <div class="nSub">abcdef</div>
</div>


.nSub:first-child { margin-top:15px; -moz-border-radius-topleft:5px; /* ... */ }
.nSub             { background:#666; /* ... */ }
.nSub:last-child  { -moz-border-radius-bottomleft:5px; /* ... */ }

Как только я вставлю элемент другого класса / идентификатора выше, вот так:

$('nav').insert({top:'<div id="newWF"></div>'});

все объявления для.nSub: first-child игнорируются как в FF 3.6, так и в Safari 4.

РЕДАКТИРОВАТЬ: извините, если я не сказал это ясно: элемент, вставленный выше, не должен иметь имя класса ".nSub"

<div id="nav">
    <div id="newWF"></div>
    <div class="nSub">abcdef</div> <!-- BROKEN CSS -->
    <div class="nSub">abcdef</div>
    <div class="nSub">abcdef</div>
    <div class="nSub">abcdef</div>
    <div class="nSub">abcdef</div>
</div>
Источник

3 ответа

Решение

Это потому, что первый элемент с классом nSub больше не first-child родителя, и, следовательно, стиль больше не соответствует.

Если динамически вставленный элемент также будет иметь класс nSub, тогда правило все равно будет совпадать и совпадать для вновь вставленного элемента (который теперь является первым дочерним элементом).

Я не эксперт по CSS3, но вы можете попробовать :nth-of-type селектор:

.nSub:nth-of-type(1) {
   /* Rules for the first .nSub here */
}
Источник

Это потому, что вы не устанавливаете класс для этого вставленного элемента, я думаю...

В вашем CSS-файле вы говорите ".nSub:first-child", но вставляемый элемент не относится к этому классу: "

Может быть, это поможет, если вы добавите атрибут класса к этому элементу тоже:

$('nav').insert({top:'<div id="newWF" class="nSub"></div>'});
Источник

То, что PatrikAkerstrand сказал о правиле, которое больше не соответствует, является правильным. Псевдо: first-child (к сожалению) предназначается только для первого дочернего элемента его родителя, который также имеет элемент / class / независимо от того, что вы указали.

Я просто потратил полчаса, ругаясь, почему следующее не сработает

<div id="header">
  <a href="."><img src="path/file.png" /></a>
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
</div>

#header .img {
  margin:0 25px;
}
#header .img:first-child,
#header .img:last-child {
  margin:0;
}

Я обнаружил, что решение было обернуть div.img в div.image, как это

<div id="header">
  <a href="."><img src="path/file.png" /></a>
  <div class="images">
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
  </div>
</div>

#header .images .img {
  margin:0 25px;
}
#header .images .img:first-child,
#header .images .img:last-child {
  margin:0;
}

Редактировать: Если вы не хотите добавлять несемантическую разметку обходного пути, вы можете использовать псевдокласс: first-of-type. Это, однако, не поддерживается в более ранних версиях IE.

Источник
Другие вопросы по тегам