Select all elements after specific element
CssCss SelectorsCss Problem Overview
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;
}
Css Solutions
Solution 1 - Css
You can use
.divider ~ li {
background-color:green;
}
Solution 2 - Css
You can use
.divider > * {
display: none; /* That's will disappear all elements inside "divider" only*/
}