Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Select all elements after specific element

I want to apply some specific styles to all elements which come after a certain element. For example, I want to select all elements which come after the divider and change their background color to green.

<ul>
  <li> Cricket </li>
  <li> Hockey </li>
  <li class='divider'> </li> //Divider here
  <li> Football </li>
  <li> Table Tennis </li>
</ul>

CSS code

li {
  background-color: red;
}

//Selector to select elements after divider {
  background-color: green;
}
like image 418
Sachin Avatar asked Jun 14 '13 10:06

Sachin


People also ask

How do you select next element in CSS?

The element+element selector is used to select an element that is directly after another specific element.

How do you select all elements in CSS?

The * selector selects all elements. The * selector can also select all elements inside another element (See "More Examples").

How do you select a specific element?

The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.

How will you select all the elements that have the highlight class applied to them?

Class selectorsThe class selector starts with a dot ( . ) character. It will select everything in the document with that class applied to it. In the live example below we have created a class called highlight , and have applied it to several places in my document.


1 Answers

You can use

.divider ~ li {
    background-color:green;
}
like image 164
Zero Fiber Avatar answered Oct 19 '22 13:10

Zero Fiber