CSS selectors - recap

styles.css

/* attribute selectors */
/* <li class=""> or <li class> or <li class="foo"> */
li[class] { background-color: gray; }
/* <li class="red"> exactly red */
li[class="red"] { background-color: red; }
/* <li class="some other classes green"> targets space separated list of values */
li[class~="green"] { background-color: green; }
/* <li class="blue-text"> target followed by hyphen */
li[class|="blue"] { background-color: blue; }
/* <li class="bunch of classes and yellowish"> targets yellow */
li[class*="yellow"] { background-color: yellow; }
/* <li class="bunch of classes and brownish"> starts with brown */
li[class^="brown"] { background-color: brown; }
/* <li class="bunch of classes and pinkish"> end with ish */
li[class$="ish"] { background-color: pink; }