Jump to content

Please Explain The Adjacent Sibling Selectors


Recommended Posts

Hithis is a quote that I couldn't understand

The CSS adjacent sibling selector applies to elements that are both children of the same parent element and they are directly next to one another. The element to be styled is the second element. Define an adjacent sibling selector with a plus-sign (+). li + li {font-size : 2em ;}In an ordered list, all list items are siblings. But only the second and subsequent <li> elements are adjacent to other <li> elements. The first <li> does not have another <li> directly preceding it. Be sure to test this selector when you plan to use it. Internet Explorer 6 and lower do not support this selector.
Can you explain it..??
Link to comment
Share on other sites

Here's an example.Given this CSS:

li { color:blue; }li + li { color: red; }

<ul><li>This text will be blue</li><li>This text will be red because it's an <li> element that follows another <li> element</li><li>This text will also be red for the same reason</li></ul>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...