Как написать CSS-селектор по индексу (только 2ой и 4тый SVG-элемент)?

Question

[Сергей Тополов]

Хочу поправить расположение SVG элементов только во 2ой и в 4той новости.
==============================================================================================

<div class="news">

<div class=”article”>
    <img>
    <a>Заголовок новости<svg class="svg-left"></svg></a>
	</div>	
<p><span class="time">Время</span>Текст новости</p>

<div class=”article>
    <img>
    <a>Заголовок новости<svg class="svg-left"></svg></a>
	</div>	
<p><span class="time">Время</span>Текст новости</p>


<div class=”article>
    <img>
    <a>Заголовок новости<svg class="svg-left"></svg></a>
	</div>	
<p><span class="time">Время</span>Текст новости</p>


<div class=”article>
    <img>
    <a>Заголовок новости<svg class="svg-left"></svg></a>
	</div>	
<p><span class="time">Время</span>Текст новости</p>


<div class=”article>
    <img>
    <a>Заголовок новости<svg class="svg-left"></svg></a>
	</div>	
<p><span class="time">Время</span>Текст новости</p>


<div class=”article>
    <img>
    <a>Заголовок новости<svg class="svg-left"></svg></a>
	</div>	
<p><span class="time">Время</span>Текст новости</p>

</div> <!-- конец div NEWS -->

Answer 1

[Сергей delphinpro]

:nth-child(2),
:nth-child(4) {
}

Comments

[Сергей Тополов]

не так все просто. к какому тэгу написать? я знаю что эти селекторы.

[Сергей delphinpro]

Сергей: все очень просто )

<div><!-- нужен родитель -->
  <div class="article"><svg>...</div>
  <div class="article"><svg>...</div>
  <div class="article"><svg>...</div>
  <div class="article"><svg>...</div>
  <div class="article"><svg>...</div>
</div>

.article:nth-child(2) svg {
    /* some styles */
}

[Сергей Тополов]

Сергей: поправил немного код. написал так и выделилось синим первые 2 свг-шки

.article:nth-child(2) .svg,
.article:nth-child(4) .svg {
background-color:blue;
}

[Сергей Тополов]

к слову класс "NEWS" у меня на бутстрапе -> class="col-xs-12 col-sm-6 col-md-8" - как правильно выбирать этот класс в css. или так и писать ?..только с точками?

[Сергей delphinpro]

Сергей: не вполне понимаю, что у вас не получается.
вот пример, что ли посмотрите https://jsfiddle.net/y9xqh4u8/
по второму вопросу - правильно не писать свои стили для классов col-***. Добавьте туда свой класс и ему задавайте стили.

[Сергей Тополов]

спасибо. ща попробуем

[Сергей Тополов]

Сергей: короче получилось. у меня правда там все по другому называтеся. "n_i_b" - это "article". у "NEWS" сверху еще сверху 1 блок похожий на "article". он не важен. СПАСИБО.

.n_i_b:nth-child(4) .svg-left,
.n_i_b:nth-child(8) .svg-left {
background-color:blue;
}

[Сергей Тополов]

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