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;
}
The element+element selector is used to select an element that is directly after another specific element.
The * selector selects all elements. The * selector can also select all elements inside another element (See "More Examples").
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.
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.
You can use
.divider ~ li {
background-color:green;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With