How to use CSS Selector for selecting element after specific element?

Viewed 153

Example:

<ul>
  <li class="element1">Element 1</li>
  <li class="element1">Element 1</li>
  <li class="element2">Element 2</li>
  <li class="element1">Element 1</li>
  <li class="element2">Element 2</li>
  <li class="element1">Element 1 (Target)</li>
  <li class="element1">Element 1</li>
</ul>

Need css selector to select 6th item as it should after element2, its dynamic and I want element1 which ever is last and after element2

5 Answers

You can use nth-child(n) selector. You can specify value of n as a repeating pattern. Ex. 2n + 1 will select all child elements at odd index.

ol li:nth-child(6) {
  color: #f00;
}
<ol>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
  <li>I</li>
</ol>

You can do this by using + in css. for the below html


    <li>element1</li>
    <li>element1</li>
    <li>element2</li>
    <li>element1></li>
    <li id="someElement">element2></li>
    <li><element1></li>

selector would be. #someELement + li

If you are able to use JavaScript (not CSS only approach), you can achieve your goal using the following codes (assume you can use jQuery framework):

HTML

<ul>
  <li class="element1">Element 1</li>
  <li class="element1">Element 1</li>
  <li class="element2">Element 2</li>
  <li class="element1">Element 1</li>
  <li class="element2">Element 2</li>
  <li class="element1">Element 1 (Target)</li>
  <li class="element1">Element 1</li>
</ul>

JS

$(function() {
    $('.element2').last().next().css('color', '#F00');
});

The function .last() finds the last occurrence of the element with the class name element2, while the function .next() selects the immediate element after. In your case, you cannot use the CSS pseudo class :last-of-type unless you are selecting HTML tags (e.g. <a>, <p>, etc.) instead of CSS class.

JSFiddle demo here.

Your question is a bit vague and I'm guessing its a language barrier at this point. Maybe you can screenshot and edit an image to get your question a bit more sense? Or just provide the code as is.

If you want to select the second element of a dynamic list you can use the selector below. I also added a stop so it won't ever select the first child when the list is too small.

Hopefully this helps you in the right direction.

ul li:not(:first-child):nth-last-child(2) {
  color: blue;
}
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
</ul>

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>

<ul>
  <li>A</li>
  <li>B</li>
</ul>

<ul>
  <li>A</li>
</ul>

There are more ways you can use selectors. Check out https://www.w3schools.com/cssref/css_selectors.asp for CSS Selector Reference.

HTML

<ul>
  <li>item1</li>
  <li>item2</li> <!--red-->
  <li>item3</li>
  <li>item4</li>
  <li>item5</li> <!--blue-->
  <li>item6</li> <!--green-->
</ul>

Option 1 - Selects every li element that is the last child of its parent

<style>
   ul li:last-child {
     color: green;
   }
</style>

Option 2 - Selects every li element that is the second child of its parent

<style>
   ul li:nth-child(2) {
     color: red;
   }
</style>

Option 3 - Selects every li element that is the second child of its parent, counting from the last child

<style>
   ul li:nth-last-child(2) {
     color: blue;
   }
</style>
Related