CSS3 marches in with an army of new selectors. Let’s look at it through the lens of Internet Explorer. Depending on what version of IE you have to support, you can use the following selectors:
IE8+
span[att^="val"]– theattrattribute value that starts with a “val” string. Is is widely used by CSS frameworks for making grids. Classes such as.span1,.span2etc. are targeted like this:span[class^="span"]span[att$="val"]– theattrattribute value that ends with a “val” string.span[att*="val"]– theattrattribute value that contains a “val” string.p ~ ul– unlikep + ul, both selectors have the same parent but are non-adjacent.
IE9+
span:empty– targets all<span>elements that have no child elements or text.div:target– targets the link anchor (/url#anchor).input:enabled,input:disabled– targets a form field that is read-only.input:checked– targets an active input typecheckbox,radiooroption.*::selection– styling of selected text.span:not(.blue)– targets all spans except the ones with theblueclass.:first-child,:last-child,:only-child– target the first, last or only child of a parent.:nth-child(n),:nth-last-child(n)– target an n-th child from the start or end. You can master this crazy (yet very useful) selector using this online tool: NthMaster.:first-of-type,:last-of-type,:only-of-type– target the first, last or only one of a type element.