Блог

Главная - Вопросы по программированию - css n-го типа, как его правильно настроить

css n-го типа, как его правильно настроить

#html #css

#HTML #css

Вопрос:

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

 <html><head>

<style type="text/css"> h2.item-title:nth-of-type(2) {
    background:red;
    }

h2.item-title:nth-of-type(4) {
background:purple;
}

</style>
</head>
<body>

<h2 class="item-title" itemprop="name">
<a href="/link/" itemprop="url">
            Link1       </a>
</h2>

<h2 class="item-title" itemprop="name">
<a href="/link/" itemprop="url">
            Link2       </a>
</h2>
<h2 class="item-title" itemprop="name">
<a href="/link/" itemprop="url">
            Link3       </a>
</h2>
<h2 class="item-title" itemprop="name">
<a href="/link/" itemprop="url">
            Link4       </a>
</h2>
</body>
</html>

Однако, если я хотел бы добавить какой-либо html-тег перед моим последним >h2< , css-код для этого абзаца перестает работать 

 <html><head>

<style type="text/css"> h2.item-title:nth-of-type(2) {
    background:red;
    }

h2.item-title:nth-of-type(4) {
background:purple;
}

</style>
</head>
<body>

<h2 class="item-title" itemprop="name">
<a href="/link/" itemprop="url">
            Link1       </a>
</h2>

<h2 class="item-title" itemprop="name">
<a href="/link/" itemprop="url">
            Link2       </a>
</h2>
<h2 class="item-title" itemprop="name">
<a href="/link/" itemprop="url">
            Link3       </a>
</h2>
  <div>
<h2 class="item-title" itemprop="name">
<a href="/link/" itemprop="url">
            Link4       </a>
</h2>
</div>
</body>
</html>

Почему это? Я пытался добавить что-то вроде этого div.h2.item-title:n-й по-типу (4), но это не помогает.

Ответ №1:

Это связано с тем, что n-й по-типу работает только для родственных элементов. Если вы хотите получить доступ к последнему элементу, теперь вам нужно указать EDIT Извините, мой плохой h2 — это элемент, поэтому просто используйте это

 div>h2.item-title:nth-of-type(1)

Ответ №2:

Это потому, что :nth- вычисляется относительно родительского. И поскольку вы переносите последний элемент в div, он становится :first-child