(window.webpackJsonp=window.webpackJsonp||[]).push([[972],{1380:function(t,a,s){"use strict";s.r(a);var e=s(31),n=Object(e.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"selectors"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#selectors"}},[t._v("#")]),t._v(" Selectors")]),t._v(" "),s("p",[t._v("CSS selectors identify specific HTML elements as targets for CSS styles. This topic covers how CSS selectors target HTML elements. Selectors use a wide range of over 50 selection methods offered by the CSS language, including elements, classes, IDs, pseudo-elements and pseudo-classes, and patterns.")]),t._v(" "),s("h2",{attrs:{id:"attribute-selectors"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attribute-selectors"}},[t._v("#")]),t._v(" Attribute Selectors")]),t._v(" "),s("h3",{attrs:{id:"overview"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#overview"}},[t._v("#")]),t._v(" Overview")]),t._v(" "),s("p",[t._v("Attribute selectors can be used with various types of operators that change the selection criteria accordingly. They select an element using the presence of a given attribute or attribute value.")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Selector")]),t._v(" "),s("th",[t._v("Matched element")]),t._v(" "),s("th",[t._v("Selects elements...")]),t._v(" "),s("th",[t._v("CSS Version")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[s("code",[t._v("[attr]")])]),t._v(" "),s("td",[s("code",[t._v("<div attr>")])]),t._v(" "),s("td",[t._v("With attribute "),s("code",[t._v("attr")])]),t._v(" "),s("td",[t._v("2")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("[attr='val']")])]),t._v(" "),s("td",[s("code",[t._v('<div attr="val">')])]),t._v(" "),s("td",[t._v("Where attribute "),s("code",[t._v("attr")]),t._v(" has value "),s("code",[t._v("val")])]),t._v(" "),s("td",[t._v("2")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("[attr~='val']")])]),t._v(" "),s("td",[s("code",[t._v('<div attr="val val2 val3">')])]),t._v(" "),s("td",[t._v("Where "),s("code",[t._v("val")]),t._v(" appears in the"),s("br"),t._v("whitespace-separated list of "),s("code",[t._v("attr")])]),t._v(" "),s("td",[t._v("2")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("[attr^='val']")])]),t._v(" "),s("td",[s("code",[t._v('<div attr="val1 val2">')])]),t._v(" "),s("td",[t._v("Where "),s("code",[t._v("attr")]),t._v("'s value "),s("strong",[t._v("begins")]),t._v(" with "),s("code",[t._v("val")])]),t._v(" "),s("td",[t._v("3")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("[attr$='val']")])]),t._v(" "),s("td",[s("code",[t._v('<div attr="sth aval">')])]),t._v(" "),s("td",[t._v("Where the "),s("code",[t._v("attr")]),t._v("'s value "),s("strong",[t._v("ends")]),t._v(" with "),s("code",[t._v("val")])]),t._v(" "),s("td",[t._v("3")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("[attr*='val']")])]),t._v(" "),s("td",[s("code",[t._v('<div attr="somevalhere">')])]),t._v(" "),s("td",[t._v("Where "),s("code",[t._v("attr")]),t._v(" contains "),s("code",[t._v("val")]),t._v(" anywhere")]),t._v(" "),s("td",[t._v("3")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("[attr|='val']")])]),t._v(" "),s("td",[s("code",[t._v('<div attr="val-sth etc">')])]),t._v(" "),s("td",[t._v("Where "),s("code",[t._v("attr")]),t._v("'s value is exactly "),s("code",[t._v("val")]),t._v(","),s("br"),t._v("or starts with "),s("code",[t._v("val")]),t._v(" and immediately"),s("br"),t._v("followed by "),s("code",[t._v("-")]),t._v(" (U+002D)")]),t._v(" "),s("td",[t._v("2")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("[attr='val' i]")])]),t._v(" "),s("td",[s("code",[t._v('<div attr="val">')])]),t._v(" "),s("td",[t._v("Where "),s("code",[t._v("attr")]),t._v(" has value "),s("code",[t._v("val")]),t._v(","),s("br"),t._v("ignoring "),s("code",[t._v("val")]),t._v("'s letter casing.")]),t._v(" "),s("td",[t._v("4"),s("sup",[t._v("(2)")])])])])]),t._v(" "),s("p",[s("strong",[s("strong",[t._v("Notes:")])])]),t._v(" "),s("li",[t._v("\nThe attribute value can be surrounded by either single-quotes or double-quotes. No quotes at all may also work, but it's not valid according to the CSS standard, and is discouraged.\n")]),t._v(" "),s("li",[t._v('\nThere is no single, integrated CSS4 specification, because it is split into separate modules. However, there are "level 4" modules. [See browser support](http://caniuse.com/#feat=css-case-insensitive).\n')]),t._v(" "),s("h3",{attrs:{id:"details"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#details"}},[t._v("#")]),t._v(" Details")]),t._v(" "),s("h3",{attrs:{id:"attribute"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attribute"}},[t._v("#")]),t._v(" "),s("code",[t._v("[attribute]")])]),t._v(" "),s("p",[t._v("Selects elements with the given attribute.")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("div[data-color]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("data-color")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("red"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("data-color")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("green"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("data-background")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("red"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will NOT be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("p",[s("a",{attrs:{href:"http://jsbin.com/cezale/1/edit?html,css,output",target:"_blank",rel:"noopener noreferrer"}},[t._v("Live Demo on JSBin"),s("OutboundLink")],1)]),t._v(" "),s("h3",{attrs:{id:"attribute-value"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attribute-value"}},[t._v("#")]),t._v(" "),s("code",[t._v('[attribute="value"]')])]),t._v(" "),s("p",[t._v("Selects elements with the given attribute and value.")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('div[data-color="red"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("data-color")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("red"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("data-color")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("green"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will NOT be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("data-color")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("blue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will NOT be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("p",[s("a",{attrs:{href:"http://jsbin.com/waxoked/1/edit?html,css,output",target:"_blank",rel:"noopener noreferrer"}},[t._v("Live Demo on JSBin"),s("OutboundLink")],1)]),t._v(" "),s("h3",{attrs:{id:"attribute-value-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attribute-value-2"}},[t._v("#")]),t._v(" "),s("code",[t._v('[attribute*="value"]')])]),t._v(" "),s("p",[t._v("Selects elements with the given attribute and value where the given attribute contains the given value anywhere (as a substring).")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('[class*="foo"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("foo-123"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("foo123"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("bar123foo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("barfooo123"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("barfo0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will NOT be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("p",[s("a",{attrs:{href:"http://jsbin.com/dazige/1/edit?html,css,output",target:"_blank",rel:"noopener noreferrer"}},[t._v("Live Demo on JSBin"),s("OutboundLink")],1)]),t._v(" "),s("h3",{attrs:{id:"attribute-value-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attribute-value-3"}},[t._v("#")]),t._v(" "),s("code",[t._v('[attribute~="value"]')])]),t._v(" "),s("p",[t._v("Selects elements with the given attribute and value where the given value appears in a whitespace-separated list.")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('[class~="color-red"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("color-red foo-bar the-div"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("color-blue foo-bar the-div"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will NOT be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("p",[s("a",{attrs:{href:"http://jsbin.com/posuhim/1/edit?html,css,output",target:"_blank",rel:"noopener noreferrer"}},[t._v("Live Demo on JSBin"),s("OutboundLink")],1)]),t._v(" "),s("h3",{attrs:{id:"attribute-value-4"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attribute-value-4"}},[t._v("#")]),t._v(" "),s("code",[t._v('[attribute^="value"]')])]),t._v(" "),s("p",[t._v("Selects elements with the given attribute and value where the given attribute begins with the value.")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('[class^="foo-"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("foo-123"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("foo-234"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("bar-123"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will NOT be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("p",[s("a",{attrs:{href:"http://jsbin.com/yowihi/1/edit?html,css,output",target:"_blank",rel:"noopener noreferrer"}},[t._v("Live Demo on JSBin"),s("OutboundLink")],1)]),t._v(" "),s("h3",{attrs:{id:"attribute-value-5"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attribute-value-5"}},[t._v("#")]),t._v(" "),s("code",[t._v('[attribute$="value"]')])]),t._v(" "),s("p",[t._v("Selects elements with the given attribute and value where the given attribute ends with the given value.")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('[class$="file"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("foobar-file"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("foobar-file"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("foobar-input"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will NOT be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("p",[s("a",{attrs:{href:"http://jsbin.com/yowihi/2/edit?html,css,output",target:"_blank",rel:"noopener noreferrer"}},[t._v("Live Demo on JSBin"),s("OutboundLink")],1)]),t._v(" "),s("h3",{attrs:{id:"attribute-value-6"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attribute-value-6"}},[t._v("#")]),t._v(" "),s("code",[t._v('[attribute|="value"]')])]),t._v(" "),s("p",[t._v("Selects elements with a given attribute and value where the attribute's value is exactly the given value or is exactly the given value followed by "),s("code",[t._v("-")]),t._v(" (U+002D)")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('[lang|="EN"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("EN-us"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("EN-gb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("PT-pt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will NOT be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("p",[s("a",{attrs:{href:"http://jsbin.com/yowihi/3/edit?html,css,output",target:"_blank",rel:"noopener noreferrer"}},[t._v("Live Demo on JSBin"),s("OutboundLink")],1)]),t._v(" "),s("h3",{attrs:{id:"attribute-value-i"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attribute-value-i"}},[t._v("#")]),t._v(" "),s("code",[t._v('[attribute="value" i]')])]),t._v(" "),s("p",[t._v("Selects elements with a given attribute and value where the attribute's value can be represented as "),s("code",[t._v("Value")]),t._v(", "),s("code",[t._v("VALUE")]),t._v(", "),s("code",[t._v("vAlUe")]),t._v(" or any other case-insensitive possibility.")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('[lang="EN" i]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("EN"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("en"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("PT"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This will NOT be red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("p",[s("a",{attrs:{href:"http://jsbin.com/yowihi/4/edit?html,css,output",target:"_blank",rel:"noopener noreferrer"}},[t._v("Live Demo on JSBin"),s("OutboundLink")],1)]),t._v(" "),s("h3",{attrs:{id:"specificity-of-attribute-selectors"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#specificity-of-attribute-selectors"}},[t._v("#")]),t._v(" Specificity of attribute selectors")]),t._v(" "),s("h3",{attrs:{id:"_0-1-0"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_0-1-0"}},[t._v("#")]),t._v(" "),s("code",[t._v("0-1-0")])]),t._v(" "),s("p",[t._v("Same as class selector and pseudoclass.")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[t._v("*[type=checkbox] // 0-1-0\n\n")])])]),s("p",[t._v("Note that this means an attribute selector can be used to select an element by its ID at a lower level of specificity than if it was selected with an "),s("a",{attrs:{href:"http://stackoverflow.com/documentation/css/611/selectors/2212/id-selectors",target:"_blank",rel:"noopener noreferrer"}},[t._v("ID selector"),s("OutboundLink")],1),t._v(": "),s("code",[t._v('[id="my-ID"]')]),t._v(" targets the same element as "),s("code",[t._v("#my-ID")]),t._v(" but with lower specificity.")]),t._v(" "),s("p",[t._v("See the "),s("a",{attrs:{href:"http://stackoverflow.com/documentation/css/611/#syntax",target:"_blank",rel:"noopener noreferrer"}},[t._v("Syntax Section"),s("OutboundLink")],1),t._v(" for more details.")]),t._v(" "),s("h2",{attrs:{id:"basic-selectors"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-selectors"}},[t._v("#")]),t._v(" Basic selectors")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Selector")]),t._v(" "),s("th",[t._v("Description")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[s("code",[t._v("*")])]),t._v(" "),s("td",[t._v("Universal selector (all elements)")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("div")])]),t._v(" "),s("td",[t._v("Tag selector (all "),s("code",[t._v("<div>")]),t._v(" elements)")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v(".blue")])]),t._v(" "),s("td",[t._v("Class selector (all elements with class "),s("code",[t._v("blue")]),t._v(")")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v(".blue.red")])]),t._v(" "),s("td",[t._v("All elements with class "),s("code",[t._v("blue")]),t._v(" "),s("strong",[t._v("and")]),t._v(" "),s("code",[t._v("red")]),t._v(" (a type of Compound selector)")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("#headline")])]),t._v(" "),s("td",[t._v('ID selector (the element with "id" attribute set to '),s("code",[t._v("headline")]),t._v(")")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v(":pseudo-class")])]),t._v(" "),s("td",[s("a",{attrs:{href:"http://stackoverflow.com/documentation/css/611/selectors/2220/pseudo-classes",target:"_blank",rel:"noopener noreferrer"}},[t._v("All elements with pseudo-class"),s("OutboundLink")],1)])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("::pseudo-element")])]),t._v(" "),s("td",[s("a",{attrs:{href:"http://stackoverflow.com/documentation/css/911/pseudo-elements/16491/pseudo-elements",target:"_blank",rel:"noopener noreferrer"}},[t._v("Element that matches pseudo-element"),s("OutboundLink")],1)])]),t._v(" "),s("tr",[s("td",[s("code",[t._v(":lang(en)")])]),t._v(" "),s("td",[t._v("Element that matches :lang declaration, for example "),s("code",[t._v('<span lang="en">')])])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("div > p")])]),t._v(" "),s("td",[t._v("child selector")])])])]),t._v(" "),s("blockquote"),t._v(" "),s("p",[s("strong",[t._v("Note:")]),t._v(" The value of an ID must be unique in a web page. It is a violation of the "),s("a",{attrs:{href:"https://www.w3.org/TR/html/dom.html#the-id-attribute",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTML standard"),s("OutboundLink")],1),t._v(" to use the value of an ID more than once in the same document tree.")]),t._v(" "),s("p",[t._v("A complete list of selectors can be found in the "),s("a",{attrs:{href:"https://www.w3.org/TR/css3-selectors/#selectors",target:"_blank",rel:"noopener noreferrer"}},[t._v("CSS Selectors Level 3 specification"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("h2",{attrs:{id:"combinators"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#combinators"}},[t._v("#")]),t._v(" Combinators")]),t._v(" "),s("h3",{attrs:{id:"overview-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#overview-2"}},[t._v("#")]),t._v(" Overview")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Selector")]),t._v(" "),s("th",[t._v("Description")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[s("code",[t._v("div span")])]),t._v(" "),s("td",[t._v("Descendant selector (all "),s("code",[t._v("<span>")]),t._v("s that are descendants of a "),s("code",[t._v("<div>")]),t._v(")")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("div > span")])]),t._v(" "),s("td",[t._v("Child selector (all "),s("code",[t._v("<span>")]),t._v("s that are a direct child of a "),s("code",[t._v("<div>")]),t._v(")")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("a ~ span")])]),t._v(" "),s("td",[t._v("General Sibling selector (all "),s("code",[t._v("<span>")]),t._v("s that are siblings after an "),s("code",[t._v("<a>")]),t._v(")")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("a + span")])]),t._v(" "),s("td",[t._v("Adjacent Sibling selector (all "),s("code",[t._v("<span>")]),t._v("s that are immediately after an "),s("code",[t._v("<a>")]),t._v(")")])])])]),t._v(" "),s("blockquote"),t._v(" "),s("p",[s("strong",[t._v("Note:")]),t._v(" Sibling selectors target elements that come after them in the source document. CSS, by its nature (it cascades), cannot target "),s("strong",[t._v("previous")]),t._v(" or "),s("strong",[t._v("parent")]),t._v(" elements. However, using the flex "),s("code",[t._v("order")]),t._v(" property, "),s("a",{attrs:{href:"http://stackoverflow.com/a/36118012/3597276",target:"_blank",rel:"noopener noreferrer"}},[t._v("a previous sibling selector can be simulated on visual media"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("h3",{attrs:{id:"descendant-combinator-selector-selector"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#descendant-combinator-selector-selector"}},[t._v("#")]),t._v(" Descendant Combinator: "),s("code",[t._v("selector selector")])]),t._v(" "),s("p",[t._v("A descendant combinator, represented by at least one space character (``), selects elements that are a descendant of the defined element. This combinator selects "),s("strong",[t._v("all")]),t._v(" descendants of the element (from child elements on down).")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("div p")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("red"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("My text is red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("section")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("My text is red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("section")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("My text is not red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("p",[s("a",{attrs:{href:"http://jsbin.com/xonafuz/2/edit?html,css,output",target:"_blank",rel:"noopener noreferrer"}},[t._v("Live Demo on JSBin"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("In the above example, the first two "),s("code",[t._v("<p>")]),t._v(" elements are selected since they are both descendants of the "),s("code",[t._v("<div>")]),t._v(".")]),t._v(" "),s("h3",{attrs:{id:"child-combinator-selector-selector"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#child-combinator-selector-selector"}},[t._v("#")]),t._v(" Child Combinator: "),s("code",[t._v("selector > selector")])]),t._v(" "),s("p",[t._v("The child ("),s("code",[t._v(">")]),t._v(") combinator is used to select elements that are "),s("strong",[t._v("children")]),t._v(", or "),s("strong",[t._v("direct descendants")]),t._v(", of the specified element.")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("div > p")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("red"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("My text is red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("section")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("My text is not red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("section")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("p",[s("a",{attrs:{href:"http://jsbin.com/xonafuz/3/edit?html,css,output",target:"_blank",rel:"noopener noreferrer"}},[t._v("Live Demo on JSBin"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("The above CSS selects only the first "),s("code",[t._v("<p>")]),t._v(" element, as it is the only paragraph directly descended from a "),s("code",[t._v("<div>")]),t._v(".")]),t._v(" "),s("p",[t._v("The second "),s("code",[t._v("<p>")]),t._v(" element is not selected because it is not a direct child of the "),s("code",[t._v("<div>")]),t._v(".")]),t._v(" "),s("h3",{attrs:{id:"adjacent-sibling-combinator-selector-selector"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#adjacent-sibling-combinator-selector-selector"}},[t._v("#")]),t._v(" Adjacent Sibling Combinator: "),s("code",[t._v("selector + selector")])]),t._v(" "),s("p",[t._v("The adjacent sibling ("),s("code",[t._v("+")]),t._v(") combinator selects a sibling element that immediate follows a specified element.")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("p + p")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("red"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("My text is not red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("My text is red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("My text is red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("hr")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("My text is not red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("p",[s("a",{attrs:{href:"http://jsbin.com/xonafuz/4/edit?html,css,output",target:"_blank",rel:"noopener noreferrer"}},[t._v("Live Demo on JSBin"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("The above example selects only those "),s("code",[t._v("<p>")]),t._v(" elements which are "),s("strong",[t._v("directly preceded")]),t._v(" by another "),s("code",[t._v("<p>")]),t._v(" element.")]),t._v(" "),s("h3",{attrs:{id:"general-sibling-combinator-selector-selector"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#general-sibling-combinator-selector-selector"}},[t._v("#")]),t._v(" General Sibling Combinator: "),s("code",[t._v("selector ~ selector")])]),t._v(" "),s("p",[t._v("The general sibling ("),s("code",[t._v("~")]),t._v(") combinator selects "),s("strong",[t._v("all")]),t._v(" siblings that follow the specified element.")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("p ~ p")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("red"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("My text is not red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("My text is red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("hr")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("h1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("And now a title"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("h1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("My text is red"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("p",[s("a",{attrs:{href:"http://jsbin.com/xonafuz/5/edit?html,css,output",target:"_blank",rel:"noopener noreferrer"}},[t._v("Live Demo on JSBin"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("The above example selects all "),s("code",[t._v("<p>")]),t._v(" elements that are "),s("strong",[t._v("preceded")]),t._v(" by another "),s("code",[t._v("<p>")]),t._v(" element, whether or not they are immediately adjacent.")]),t._v(" "),s("h2",{attrs:{id:"pseudo-classes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#pseudo-classes"}},[t._v("#")]),t._v(" Pseudo-classes")]),t._v(" "),s("p",[s("a",{attrs:{href:"https://www.w3.org/TR/selectors/#pseudo-classes",target:"_blank",rel:"noopener noreferrer"}},[t._v("Pseudo-classes"),s("OutboundLink")],1),t._v(" are "),s("strong",[t._v("keywords")]),t._v(" which allow selection based on information that lies outside of the document tree or that cannot be expressed by other selectors or combinators. This information can be associated to a certain state ("),s("a",{attrs:{href:"https://www.w3.org/TR/selectors/#UIstates",target:"_blank",rel:"noopener noreferrer"}},[t._v("state"),s("OutboundLink")],1),t._v(" and "),s("a",{attrs:{href:"https://www.w3.org/TR/selectors/#dynamic-pseudos",target:"_blank",rel:"noopener noreferrer"}},[t._v("dynamic"),s("OutboundLink")],1),t._v(" pseudo-classes), to locations ("),s("a",{attrs:{href:"https://www.w3.org/TR/selectors/#structural-pseudos",target:"_blank",rel:"noopener noreferrer"}},[t._v("structural"),s("OutboundLink")],1),t._v(" and "),s("a",{attrs:{href:"https://www.w3.org/TR/selectors/#target-pseudo",target:"_blank",rel:"noopener noreferrer"}},[t._v("target"),s("OutboundLink")],1),t._v(" pseudo-classes), to negations of the former ("),s("a",{attrs:{href:"https://www.w3.org/TR/selectors/#negation",target:"_blank",rel:"noopener noreferrer"}},[t._v("negation"),s("OutboundLink")],1),t._v(" pseudo-class) or to languages ("),s("a",{attrs:{href:"https://www.w3.org/TR/selectors/#lang-pseudo",target:"_blank",rel:"noopener noreferrer"}},[t._v("lang"),s("OutboundLink")],1),t._v(" pseudo-class). Examples include whether or not a link has been followed ("),s("code",[t._v(":visited")]),t._v("), the mouse is over an element ("),s("code",[t._v(":hover")]),t._v("), a checkbox is checked ("),s("code",[t._v(":checked")]),t._v("), etc.")]),t._v(" "),s("h3",{attrs:{id:"syntax"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#syntax"}},[t._v("#")]),t._v(" Syntax")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("selector:pseudo-class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("property")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("h3",{attrs:{id:"list-of-pseudo-classes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#list-of-pseudo-classes"}},[t._v("#")]),t._v(" List of pseudo-classes:")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Name")]),t._v(" "),s("th",[t._v("Description")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[s("a",{attrs:{href:"https://www.w3.org/TR/css3-selectors/#the-user-action-pseudo-classes-hover-act",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":active")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Applies to any element being activated (i.e. clicked) by the user.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:any",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":any")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Allows you to build sets of related selectors by creating groups that the "),s("br"),t._v("included items will match. This is an alternative to repeating an entire selector.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:target",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":target")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Selects the current active #news element (clicked on a URL"),s("br"),t._v("containing that anchor name)")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://www.w3.org/TR/css3-selectors/#checked",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":checked")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Applies to radio, checkbox, or option elements that are checked"),s("br"),t._v('or toggled into an "on" state.')])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:default",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":default")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Represents any user interface element that is the default among a group of"),s("br"),t._v("similar elements.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://www.w3.org/TR/css3-selectors/#enableddisabled",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":disabled")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Applies to any UI element which is in a disabled state.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://www.w3.org/TR/selectors/#empty-pseudo",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":empty")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Applies to any element which has no children.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://www.w3.org/TR/css3-selectors/#enableddisabled",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":enabled")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Applies to any UI element which is in an enabled state.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"http://tympanus.net/codrops/css_reference/first",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":first")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Used in conjunction with the "),s("code",[t._v("@page")]),t._v(" rule, this selects the first page in a"),s("br"),t._v("printed document.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":first-child")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Represents any element that is the first child element of its parent.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://www.w3.org/TR/css3-selectors/#first-of-type-pseudo",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":first-of-type")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Applies when an element is the first of the selected element type"),s("br"),t._v("inside its parent. This may or may not be the first-child.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://www.w3.org/TR/css3-selectors/#the-user-action-pseudo-classes-hover-act",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":focus")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Applies to any element which has the user's focus. This can be given by the"),s("br"),t._v("user's keyboard, mouse events, or other forms of input.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":focus-within")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Can be used to highlight a whole section when one element inside it is focused. It matches any element that the :focus pseudo-class matches or that has a descendant focused.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":full-screen")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Applies to any element displayed in full-screen mode. It selects the whole stack"),s("br"),t._v("of elements and not just the top level element.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://www.w3.org/TR/css3-selectors/#the-user-action-pseudo-classes-hover-act",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":hover")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Applies to any element being hovered by the user's pointing device, but"),s("br"),t._v("not activated.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://www.w3.org/TR/css3-selectors/#indeterminate",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":indeterminate")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Applies radio or checkbox UI elements which are neither checked nor"),s("br"),t._v("unchecked, but are in an indeterminate state. This can be due to an"),s("br"),t._v("element's attribute or DOM manipulation.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":in-range")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("The "),s("code",[t._v(":in-range")]),t._v(" CSS pseudo-class matches when an element has"),s("br"),t._v("its value attribute inside the specified range limitations for this element."),s("br"),t._v("It allows the page to give a feedback that the value currently defined"),s("br"),t._v("using the element is inside the range limits.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"http://tympanus.net/codrops/css_reference/invalid/",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":invalid")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Applies to "),s("code",[t._v("<input>")]),t._v(" elements whose values are invalid according to"),s("br"),t._v("the type specified in the "),s("code",[t._v("type=")]),t._v(" attribute.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://www.w3.org/TR/css3-selectors/#lang-pseudo",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":lang")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Applies to any element who's wrapping "),s("code",[t._v("<body>")]),t._v(" element has a properly"),s("br"),t._v("designated "),s("code",[t._v("lang=")]),t._v(" attribute. For the pseudo-class to be valid, it must"),s("br"),t._v("contain a "),s("a",{attrs:{href:"https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes",target:"_blank",rel:"noopener noreferrer"}},[t._v("valid two or three letter language code."),s("OutboundLink")],1)])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":last-child")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Represents any element that is the last child element of its parent.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://www.w3.org/TR/css3-selectors/#last-of-type-pseudo",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":last-of-type")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Applies when an element is the last of the selected element type inside"),s("br"),t._v("its parent. This may or may not be the last-child.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"http://tympanus.net/codrops/css_reference/left_pseudo-class/",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":left")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Used in conjunction with the "),s("code",[t._v("@page")]),t._v(" rule, this selects all the left"),s("br"),t._v("pages in a printed document.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://www.w3.org/TR/css3-selectors/#the-link-pseudo-classes-link-and-visited",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":link")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Applies to any links which haven't been visited by the user.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:not",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":not()")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Applies to all elements which "),s("strong",[t._v("do not")]),t._v(" match the value passed to"),s("br"),t._v("("),s("code",[t._v(":not(p)")]),t._v(" or "),s("code",[t._v(":not(.class-name)")]),t._v(" for example. It must have a value to be"),s("br"),t._v("valid and it can only contain one selector. However, you can chain multiple "),s("code",[t._v(":not")]),t._v(" selectors together.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://www.w3.org/TR/css3-selectors/#nth-child-pseudo",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":nth-child")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Applies when an element is the "),s("code",[t._v("n")]),t._v("-th element of its parent, where "),s("code",[t._v("n")]),s("br"),t._v("can be an integer, a mathematical expression (e.g "),s("code",[t._v("n+3")]),t._v(") or the keywords"),s("br"),s("code",[t._v("odd")]),t._v(" or "),s("code",[t._v("even")]),t._v(".")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://www.w3.org/TR/css3-selectors/#nth-of-type-pseudo",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":nth-of-type")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Applies when an element is the "),s("code",[t._v("n")]),t._v("-th element of its parent of the"),s("br"),t._v("same element type, where "),s("code",[t._v("n")]),t._v(" can be an integer, a mathematical"),s("br"),t._v("expression (e.g "),s("code",[t._v("n+3")]),t._v(") or the keywords "),s("code",[t._v("odd")]),t._v(" or "),s("code",[t._v("even")]),t._v(".")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":only-child")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("The "),s("code",[t._v(":only-child")]),t._v(" CSS pseudo-class represents any element"),s("br"),t._v("which is the only child of its parent. This is the same as"),s("br"),s("code",[t._v(":first-child:last-child")]),t._v(" or "),s("code",[t._v(":nth-child(1):nth-last-child(1)")]),t._v(","),s("br"),t._v("but with a lower specificity.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:optional",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":optional")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("The "),s("code",[t._v(":optional")]),t._v(" CSS pseudo-class represents any  element"),s("br"),t._v("that does not have the required attribute set on it. This allows"),s("br"),t._v("forms to easily indicate optional fields and to style them accordingly.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":out-of-range")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("The "),s("code",[t._v(":out-of-range")]),t._v(" CSS pseudo-class matches when an element has its"),s("br"),t._v("value attribute outside the specified range limitations for this element."),s("br"),t._v("It allows the page to give a feedback that the value currently defined using the"),s("br"),t._v("element is outside the range limits. A value can be outside of a range if it is"),s("br"),t._v("either smaller or larger than maximum and minimum set values.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":placeholder-shown")]),s("OutboundLink")],1)]),t._v(" "),s("td",[s("strong",[t._v("Experimental.")]),t._v(" Applies to any form element currently displaying placeholder text.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":read-only")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Applies to any element which is not editable by the user.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":read-write")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Applies to any element that is editable by a user, such as "),s("code",[t._v("<input>")]),t._v(" elements.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"http://tympanus.net/codrops/css_reference/right_pseudo-class",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":right")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Used in conjunction with the "),s("code",[t._v("@page")]),t._v(" rule, this selects all the right pages in a"),s("br"),t._v("printed document.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:root",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":root")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("matches the root element of a tree representing the document.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:scope",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":scope")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("CSS pseudo-class matches the elements that are a reference"),s("br"),t._v("point for selectors to match against.")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:target",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":target")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Selects the current active #news element (clicked on a URL"),s("br"),t._v("containing that anchor name)")])]),t._v(" "),s("tr",[s("td",[s("a",{attrs:{href:"https://www.w3.org/TR/css3-selectors/#the-link-pseudo-classes-link-and-visited",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v(":visited")]),s("OutboundLink")],1)]),t._v(" "),s("td",[t._v("Applies to any links which have has been visited by the user.")])])])]),t._v(" "),s("blockquote"),t._v(" "),s("p",[t._v("The "),s("code",[t._v(":visited")]),t._v(" pseudoclass can't be used for most styling in a lot of modern browsers anymore because it's a security hole. See this "),s("a",{attrs:{href:"https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/",target:"_blank",rel:"noopener noreferrer"}},[t._v("link"),s("OutboundLink")],1),t._v(" for reference.")]),t._v(" "),s("h2",{attrs:{id:"child-pseudo-class"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#child-pseudo-class"}},[t._v("#")]),t._v(" Child Pseudo Class")]),t._v(" "),s("blockquote"),t._v(" "),s("p",[t._v('"The :nth-child(an+b) CSS pseudo-class matches an element that has\nan+b-1 siblings before it in the document tree, for a given positive\n**or zero value** for n" - [MDN :nth-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child)')]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("pseudo-selector")]),t._v(" "),s("th",[t._v("1")]),t._v(" "),s("th",[t._v("2")]),t._v(" "),s("th",[t._v("3")]),t._v(" "),s("th",[t._v("4")]),t._v(" "),s("th",[t._v("5")]),t._v(" "),s("th",[t._v("6")]),t._v(" "),s("th",[t._v("7")]),t._v(" "),s("th",[t._v("8")]),t._v(" "),s("th",[t._v("9")]),t._v(" "),s("th",[t._v("10")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[s("code",[t._v(":first-child")])]),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td")]),t._v(" "),s("tr",[s("td",[s("code",[t._v(":nth-child(3)")])]),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td")]),t._v(" "),s("tr",[s("td",[s("code",[t._v(":nth-child(n+3)")])]),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td",[t._v("✔")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v(":nth-child(3n)")])]),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td")]),t._v(" "),s("tr",[s("td",[s("code",[t._v(":nth-child(3n+1)")])]),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td",[t._v("✔")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v(":nth-child(-n+3)")])]),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td")]),t._v(" "),s("tr",[s("td",[s("code",[t._v(":nth-child(odd)")])]),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td"),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td"),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td"),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td"),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td")]),t._v(" "),s("tr",[s("td",[s("code",[t._v(":nth-child(even)")])]),t._v(" "),s("td"),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td"),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td"),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td"),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td"),t._v(" "),s("td",[t._v("✔")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v(":last-child")])]),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td",[t._v("✔")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v(":nth-last-child(3)")])]),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td"),t._v(" "),s("td",[t._v("✔")]),t._v(" "),s("td"),t._v(" "),s("td")])])]),t._v(" "),s("h2",{attrs:{id:"class-name-selectors"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#class-name-selectors"}},[t._v("#")]),t._v(" Class Name Selectors")]),t._v(" "),s("p",[t._v("The class name selector select all elements with the targeted class name. For example, the class name "),s("code",[t._v(".warning")]),t._v(" would select the following "),s("code",[t._v("<div>")]),t._v(" element:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("warning"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This would be some warning copy."),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("p",[t._v("You can also combine class names to target elements more specifically. Let's build on the example above to showcase a more complicated class selection.")]),t._v(" "),s("p",[s("strong",[t._v("CSS")])]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".important")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" orange"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".warning")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" blue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".warning.important")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("p",[s("strong",[t._v("HTML")])]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("warning"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This would be some warning copy."),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("important warning"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("important"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This is some really important warning copy."),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("p",[t._v("In this example, all elements with the "),s("code",[t._v(".warning")]),t._v(" class will have a blue text color, elements with the "),s("code",[t._v(".important")]),t._v(" class with have an orange text color, and all elements that have "),s("strong",[t._v("both")]),t._v(" the "),s("code",[t._v(".important")]),t._v(" and "),s("code",[t._v(".warning")]),t._v(" class name will have a red text color.")]),t._v(" "),s("p",[t._v("Notice that within the CSS, the "),s("code",[t._v(".warning.important")]),t._v(" declaration did not have any spaces between the two class names. This means it will only find elements which contain both class names "),s("code",[t._v("warning")]),t._v(" and "),s("code",[t._v("important")]),t._v(" in their "),s("code",[t._v("class")]),t._v(" attribute. Those class names could be in any order on the element.")]),t._v(" "),s("p",[t._v("If a space was included between the two classes in the CSS declaration, it would only select elements that have parent elements with a "),s("code",[t._v(".warning")]),t._v(" class names and child elements with "),s("code",[t._v(".important")]),t._v(" class names.")]),t._v(" "),s("h2",{attrs:{id:"select-element-using-its-id-without-the-high-specificity-of-the-id-selector"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#select-element-using-its-id-without-the-high-specificity-of-the-id-selector"}},[t._v("#")]),t._v(" Select element using its ID without the high specificity of the ID selector")]),t._v(" "),s("p",[t._v("This trick helps you select an element using the ID as a value for an attribute selector to avoid the high specificity of the ID selector.")]),t._v(" "),s("p",[t._v("HTML:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("element"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("..."),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("  \n\n")])])]),s("p",[t._v("CSS")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#element")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ... "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* High specificity will override many selectors */")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('[id="element"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ... "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Low specificity, can be overridden easily */")]),t._v("\n\n")])])]),s("h2",{attrs:{id:"global-boolean-with-checkbox-checked-and-general-sibling-combinator"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#global-boolean-with-checkbox-checked-and-general-sibling-combinator"}},[t._v("#")]),t._v(" Global boolean with checkbox:checked and ~ (general sibling combinator)")]),t._v(" "),s("p",[t._v("With the ~ selector, you can easily implement a global accessible boolean without using JavaScript.")]),t._v(" "),s("h3",{attrs:{id:"add-boolean-as-a-checkbox"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#add-boolean-as-a-checkbox"}},[t._v("#")]),t._v(" Add boolean as a checkbox")]),t._v(" "),s("p",[t._v("To the very beginning of your document, add as much booleans as you want with a unique "),s("code",[t._v("id")]),t._v(" and the "),s("code",[t._v("hidden")]),t._v(" attribute set:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("checkbox"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("sidebarShown"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("hidden")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("checkbox"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("darkThemeUsed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("hidden")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- here begins actual content, for example: --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("sidebar"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- Menu, Search, ... --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- Some more content ... --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("footer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("h3",{attrs:{id:"change-the-boolean-s-value"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#change-the-boolean-s-value"}},[t._v("#")]),t._v(" Change the boolean's value")]),t._v(" "),s("p",[t._v("You can toggle the boolean by adding a "),s("code",[t._v("label")]),t._v(" with the "),s("code",[t._v("for")]),t._v(" attribute set:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("label")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("for")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("sidebarShown"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Show/Hide the sidebar!"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("label")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("h3",{attrs:{id:"accessing-boolean-value-with-css"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#accessing-boolean-value-with-css"}},[t._v("#")]),t._v(" Accessing boolean value with CSS")]),t._v(" "),s("p",[t._v("The normal selector (like "),s("code",[t._v(".color-red")]),t._v(") specifies the default properties. They can be overridden by following "),s("code",[t._v("true")]),t._v(" / "),s("code",[t._v("false")]),t._v(" selectors:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("/* true: */\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("checkbox")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(":checked ~ [sibling of checkbox & parent of target] "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("target")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n/* false: */\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("checkbox")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(":not(:checked) ~ [sibling of checkbox & parent of target] "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("target")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("p",[t._v("Note that "),s("code",[t._v("<checkbox>")]),t._v(", "),s("code",[t._v("[sibling ...]")]),t._v(" and "),s("code",[t._v("<target>")]),t._v(" should be replaced by the proper selectors. "),s("code",[t._v("[sibling ...]")]),t._v(" can be a specific selector, (often if you're lazy) simply "),s("code",[t._v("*")]),t._v(" or nothing if the target is already a sibling of the checkbox.")]),t._v(" "),s("p",[t._v("Examples for the above HTML structure would be:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#sidebarShown:checked ~ #container #sidebar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-left")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 300px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#darkThemeUsed:checked ~ #container,\n#darkThemeUsed:checked ~ #footer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #333"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("h3",{attrs:{id:"in-action"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#in-action"}},[t._v("#")]),t._v(" In action")]),t._v(" "),s("p",[t._v("See "),s("a",{attrs:{href:"https://jsfiddle.net/yokosbm0/1/",target:"_blank",rel:"noopener noreferrer"}},[t._v("this fiddle"),s("OutboundLink")],1),t._v(" for a implementation of these global booleans.")]),t._v(" "),s("h2",{attrs:{id:"css3-in-range-selector-example"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#css3-in-range-selector-example"}},[t._v("#")]),t._v(" CSS3 :in-range selector example")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token style"}},[s("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("input:in-range")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px solid blue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("number"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("min")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("10"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("max")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("20"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("value")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("15"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("The border for this value will be blue"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("p",[t._v("The "),s("code",[t._v(":in-range")]),t._v(" CSS pseudo-class matches when an element has its value attribute inside the specified range limitations for this element. It allows the page to give a feedback that the value currently defined using the element is inside the range limits."),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range",target:"_blank",rel:"noopener noreferrer"}},[t._v("[1]"),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"a-the-not-pseudo-class-example-b-focus-within-css-pseudo-class"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#a-the-not-pseudo-class-example-b-focus-within-css-pseudo-class"}},[t._v("#")]),t._v(" A. The :not pseudo-class example & B. :focus-within CSS pseudo-class")]),t._v(" "),s("p",[t._v("A. The syntax is presented above.")]),t._v(" "),s("p",[t._v("The following selector matches all "),s("code",[t._v("<input>")]),t._v(" elements in an HTML document that are not disabled and don't have the class "),s("code",[t._v(".example")]),t._v(":")]),t._v(" "),s("p",[t._v("HTML:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("form")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    Phone: "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("tel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("example"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    E-mail: "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("email"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("disabled")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("disabled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    Password: "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("password"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("form")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("p",[t._v("CSS:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("input:not([disabled]):not(.example)")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #ccc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("p",[t._v("The "),s("code",[t._v(":not()")]),t._v(" pseudo-class will also support comma-separated selectors in Selectors Level 4:")]),t._v(" "),s("p",[t._v("CSS:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("input:not([disabled], .example)")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #ccc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("p",[s("a",{attrs:{href:"http://jsbin.com/japere/edit?html,css,output",target:"_blank",rel:"noopener noreferrer"}},[t._v("Live Demo on JSBin"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("See background syntax "),s("a",{attrs:{href:"http://stackoverflow.com/documentation/css/296/backgrounds/1055/background-color#t=201608060832050225611",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("p",[t._v("B. The :focus-within CSS pseudo-class")]),t._v(" "),s("p",[t._v("HTML:")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v('\n <h3>Background is blue if the input is focused .</p>\n  <div>\n    <input type="text">\n  </div>\n\n')])])]),s("p",[t._v("CSS:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 80px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("input")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("30px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("div:focus-within")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #1565C0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("p",[s("a",{attrs:{href:"https://i.stack.imgur.com/S4ke4.png",target:"_blank",rel:"noopener noreferrer"}},[s("img",{attrs:{src:"https://i.stack.imgur.com/S4ke4.png",alt:"enter image description here"}}),s("OutboundLink")],1),t._v(" "),s("a",{attrs:{href:"https://i.stack.imgur.com/YGn3H.png",target:"_blank",rel:"noopener noreferrer"}},[s("img",{attrs:{src:"https://i.stack.imgur.com/YGn3H.png",alt:"enter image description here"}}),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"the-last-of-type-selector"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-last-of-type-selector"}},[t._v("#")]),t._v(" The :last-of-type selector")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v(":last-of-type")]),t._v(" selects the element that is the last child, of a particular type, of its parent. In the example below, the css selects the last paragraph and the last heading "),s("code",[t._v("h1")]),t._v(".")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("p:last-of-type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #C5CAE9"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("h1:last-of-type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #CDDC39"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("First paragraph"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Second paragraph"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Last paragraph"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("h1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Heading 1"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("h1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("h2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("First heading 2"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("h2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("h2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Last heading 2"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("h2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("p",[s("a",{attrs:{href:"http://i.stack.imgur.com/8RYda.png",target:"_blank",rel:"noopener noreferrer"}},[s("img",{attrs:{src:"http://i.stack.imgur.com/8RYda.png",alt:"enter image description here"}}),s("OutboundLink")],1)]),t._v(" "),s("p",[s("a",{attrs:{href:"http://jsfiddle.net/MadalinaTn/YmMZZ/113/",target:"_blank",rel:"noopener noreferrer"}},[t._v("jsFiddle"),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"id-selectors"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#id-selectors"}},[t._v("#")]),t._v(" ID selectors")]),t._v(" "),s("p",[t._v("ID selectors select DOM elements with the targeted ID. To select an element by a specific ID in CSS, the "),s("code",[t._v("#")]),t._v(" prefix is used.")]),t._v(" "),s("p",[t._v("For example, the following HTML "),s("code",[t._v("div")]),t._v(" element…")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("exampleID"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Example"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("p",[t._v("…can be selected by "),s("code",[t._v("#exampleID")]),t._v(" in CSS as shown below:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#exampleID")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 20px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("blockquote"),t._v(" "),s("p",[s("strong",[t._v("Note")]),t._v(": The HTML specs do not allow multiple elements with the same ID")]),t._v(" "),s("h2",{attrs:{id:"how-to-style-a-range-input"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#how-to-style-a-range-input"}},[t._v("#")]),t._v(" How to style a Range input")]),t._v(" "),s("p",[t._v("HTML")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("range"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("input")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("p",[t._v("CSS")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Effect")]),t._v(" "),s("th",[t._v("Pseudo Selector")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("Thumb")]),t._v(" "),s("td",[s("code",[t._v("input[type=range]::-webkit-slider-thumb, input[type=range]::-moz-range-thumb, input[type=range]::-ms-thumb")])])]),t._v(" "),s("tr",[s("td",[t._v("Track")]),t._v(" "),s("td",[s("code",[t._v("input[type=range]::-webkit-slider-runnable-track, input[type=range]::-moz-range-track, input[type=range]::-ms-track")])])]),t._v(" "),s("tr",[s("td",[t._v("OnFocus")]),t._v(" "),s("td",[s("code",[t._v("input[type=range]:focus")])])]),t._v(" "),s("tr",[s("td",[t._v("Lower part of the track")]),t._v(" "),s("td",[s("code",[t._v("input[type=range]::-moz-range-progress, input[type=range]::-ms-fill-lower")]),t._v(" (not possible in WebKit browsers currently - JS needed)")])])])]),t._v(" "),s("h2",{attrs:{id:"the-only-child-pseudo-class-selector-example"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-only-child-pseudo-class-selector-example"}},[t._v("#")]),t._v(" The :only-child pseudo-class selector example")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v(":only-child")]),t._v(" "),s("code",[t._v("CSS")]),t._v(" pseudo-class represents any element which is the only child of its parent.")]),t._v(" "),s("p",[t._v("HTML:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This paragraph is the only child of the div, it will have the color blue"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This paragraph is one of the two children of the div"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("This paragraph is one of the two children of its parent"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),s("p",[t._v("CSS:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("p:only-child")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" blue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("p",[t._v("The above example selects the "),s("code",[t._v("<p>")]),t._v(" element that is the unique child from its parent, in this case a "),s("code",[t._v("<div>")]),t._v(".")]),t._v(" "),s("p",[s("a",{attrs:{href:"https://jsbin.com/dizosi/edit?html,css",target:"_blank",rel:"noopener noreferrer"}},[t._v("Live Demo on JSBin"),s("OutboundLink")],1)]),t._v(" "),s("h4",{attrs:{id:"syntax-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#syntax-2"}},[t._v("#")]),t._v(" Syntax")]),t._v(" "),s("ul",[s("li",[t._v("#"),s("strong",[t._v("id")])]),t._v(" "),s("li",[t._v("."),s("strong",[t._v("classname")])]),t._v(" "),s("li",[t._v(":"),s("strong",[t._v("pseudo-classname")])]),t._v(" "),s("li",[t._v("::"),s("strong",[t._v("pseudo-elementname")])]),t._v(" "),s("li",[t._v("["),s("strong",[t._v("attr")]),t._v("] /* has the "),s("strong",[t._v("attr")]),t._v(" attribute. */")]),t._v(" "),s("li",[t._v("["),s("strong",[t._v("attr")]),t._v('="'),s("strong",[t._v("value")]),t._v('"] /* has the '),s("strong",[t._v("attr")]),t._v(' attribute, and its value is exactly "'),s("strong",[t._v("value")]),t._v('". */')]),t._v(" "),s("li",[t._v("["),s("strong",[t._v("attr")]),t._v('~="'),s("strong",[t._v("value")]),t._v('"] /* has the '),s("strong",[t._v("attr")]),t._v(" attribute, and its value, when split on "),s("strong",[t._v("whitespace")]),t._v(', contains "'),s("strong",[t._v("value")]),t._v('". */')]),t._v(" "),s("li",[t._v("["),s("strong",[t._v("attr")]),t._v('|="'),s("strong",[t._v("value")]),t._v('"] /* has the '),s("strong",[t._v("attr")]),t._v(' attribute, and its value is exactly "'),s("strong",[t._v("value")]),t._v('", '),s("strong",[t._v("or")]),t._v(' its value begins with "'),s("strong",[t._v("value")]),t._v('**-**". */')]),t._v(" "),s("li",[t._v("["),s("strong",[t._v("attr")]),t._v('^="'),s("strong",[t._v("value")]),t._v('"] /* has the '),s("strong",[t._v("attr")]),t._v(' attribute, and its value begins with "'),s("strong",[t._v("value")]),t._v('". */')]),t._v(" "),s("li",[t._v("["),s("strong",[t._v("attr")]),t._v('$="'),s("strong",[t._v("value")]),t._v('"] /* has the '),s("strong",[t._v("attr")]),t._v(' attribute, and its value ends with "'),s("strong",[t._v("value")]),t._v('". */')]),t._v(" "),s("li",[t._v("["),s("strong",[t._v("attr")]),t._v('*="'),s("strong",[t._v("value")]),t._v('"] /* has the '),s("strong",[t._v("attr")]),t._v(' attribute, and its value contains "'),s("strong",[t._v("value")]),t._v('". */')]),t._v(" "),s("li",[s("strong",[t._v("element-name")])]),t._v(" "),s("li",[t._v("*​")])]),t._v(" "),s("h4",{attrs:{id:"remarks"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#remarks"}},[t._v("#")]),t._v(" Remarks")]),t._v(" "),s("ul",[s("li",[t._v("Sometimes you will see double colons ("),s("code",[t._v("::")]),t._v(") instead of just one ("),s("code",[t._v(":")]),t._v(").  This is a way to separate "),s("a",{attrs:{href:"https://www.w3.org/TR/selectors/#pseudo-classes",target:"_blank",rel:"noopener noreferrer"}},[t._v("pseudo-classes"),s("OutboundLink")],1),t._v(" from "),s("a",{attrs:{href:"https://www.w3.org/TR/selectors/#pseudo-elements",target:"_blank",rel:"noopener noreferrer"}},[t._v("pseudo-elements"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("li",[t._v("Old browsers, like Internet Explorer 8, "),s("strong",[t._v("only")]),t._v(" support a single colon ("),s("code",[t._v(":")]),t._v(") for defining pseudo-elements.")]),t._v(" "),s("li",[t._v("Unlike pseudo-classes, only one pseudo-element may be used per selector, if present it must appear after the sequence of simple selectors that represents the subjects of the selector (a future version of the "),s("a",{attrs:{href:"https://www.w3.org/TR/selectors/#pseudo-elements",target:"_blank",rel:"noopener noreferrer"}},[t._v("W3C specification"),s("OutboundLink")],1),t._v(" may allow multiple pseudo-elements per selector).")])])])}),[],!1,null,null,null);a.default=n.exports}}]);