Adjacent sibling combinator

An example of the adjacent sibling combinator.

by Vimla Ramdoo

HTML

<ul class="collection">
    <li> Label </li>
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ul>

CSS

/*
 *  Try this:
 *  1. Add an additional unordered lists
 *  2. Was the presentation consistent with your expectations?
 */

/* Select adjacent siblings that are both list elements (li) and are also descendants of the collection class. */
.collection li+li {
    background-color: palegoldenrod;
}

/* Selects elements that are descendants of elements of class collection */
.collection li {
    background-color: palegreen;
}

/* Selects list elements */
li {
    width: 100px;
    height: 50px;
    list-style-type: none;  /* removes bullet */
}