(window.webpackJsonp=window.webpackJsonp||[]).push([[71],{575:function(t,e,s){"use strict";s.r(e);var a=s(56),n=Object(a.a)({},(function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"more-css-selectors-descendents-and-siblings"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#more-css-selectors-descendents-and-siblings"}},[t._v("#")]),t._v(" More CSS Selectors: Descendents and Siblings")]),t._v(" "),s("p",[t._v("In this lecture we're going to explore some more complex CSS selectors for targeting descendent and sibling elements.")]),t._v(" "),s("p",[t._v("Before we start, a quick word on terminology.")]),t._v(" "),s("p",[s("em",[t._v("Descendent elements")]),t._v(" are any elements which are part of the content of another element (known as the "),s("em",[t._v("ancestor")]),t._v("). They need not be direct children of the element in question.")]),t._v(" "),s("p",[s("em",[t._v("Siblings elements")]),t._v(" are any elements which share a parent element.")]),t._v(" "),s("h2",{attrs:{id:"the-descendent-combinator"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-descendent-combinator"}},[t._v("#")]),t._v(" The Descendent Combinator")]),t._v(" "),s("p",[t._v("The descendent combinator is a means of combining two or more selectors to describe an ancestral relationship. We achieve this by placing one or more spaces between the selectors.")]),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("ul li")]),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("p",[t._v("The result is a descendent selector, that will target any "),s("code",[t._v("<li>")]),t._v(" element which is a descendent — but, not necessarily a direct child — of a "),s("code",[t._v("<ul>")]),t._v(" element.")]),t._v(" "),s("h3",{attrs:{id:"chaining-descendent-combinators"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#chaining-descendent-combinators"}},[t._v("#")]),t._v(" Chaining Descendent Combinators")]),t._v(" "),s("p",[t._v("We can have a chain of many such selectors if we like, describing a more elaborate ancestral relationship in the document.")]),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("ul li a")]),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("text-decoration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),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("p",[t._v("Here we're setting the value of the "),s("code",[t._v("text-decoration")]),t._v(" property to "),s("code",[t._v("none")]),t._v(" for every "),s("code",[t._v("<a>")]),t._v(" element which is inside an "),s("code",[t._v("<li>")]),t._v(" element, where that "),s("code",[t._v("<li>")]),t._v(" element is itself a descendent of a "),s("code",[t._v("<ul>")]),t._v(" element.")]),t._v(" "),s("p",[t._v("We can make these chains of selectors arbitrarily long, but it's rarely a good idea to create very complex chains. Not only does it tie out styles very closely to the structure of our document, it also makes it hard to reuse out styles.")]),t._v(" "),s("h2",{attrs:{id:"the-child-combinator"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-child-combinator"}},[t._v("#")]),t._v(" The Child Combinator")]),t._v(" "),s("p",[t._v("We can specify a more precise ancestry relationship using a child combinator. When using a child combinator, we place "),s("code",[t._v(">")]),t._v(" between two selectors instead of a space.")]),t._v(" "),s("p",[t._v("When we do this, we're saying that the element targeted by the left hand selector must be a direct parent of any targeted by the right hand selector.")]),t._v(" "),s("p",[t._v("To demonstrate this concept, we're going to use a description list. A description list is used to match terms and definitions, like you might find in a dictionary. Instead of using "),s("code",[t._v("<li>")]),t._v(" elements, we use "),s("code",[t._v("<dt>")]),t._v(" and "),s("code",[t._v("<dd>")]),t._v(" elements in a decription list, which contain terms and the definitions respectively.")]),t._v(" "),s("p",[t._v("For more information, you can look on the "),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl",target:"_blank",rel:"noopener noreferrer"}},[t._v("MDN page for description lists"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("p",[t._v("Let's say we have a selector like this:")]),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("dl > dt")]),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("font-weight")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 700"),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("p",[t._v("Here we're saying that we want to select any "),s("code",[t._v("<dt>")]),t._v(" element which is a direct child of a "),s("code",[t._v("<dl>")]),t._v(" element.")]),t._v(" "),s("p",[t._v("If we take the HTML code below, the "),s("code",[t._v("<dt>")]),t._v(" element will be selected, because the "),s("code",[t._v("<dt>")]),t._v(" element is a direct child of the "),s("code",[t._v("<dl>")]),t._v(" element. In other words, the "),s("code",[t._v("<dt>")]),t._v(" element is directly inside the "),s("code",[t._v("<dl>")]),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("dl")]),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("dt")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Dog"),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("dt")]),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("dd")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("A man's best friend."),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("dd")]),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("dl")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("However, if we add a container for our "),s("code",[t._v("<dt>")]),t._v(" and "),s("code",[t._v("<dd>")]),t._v(" elements — which is quite common when we want to group the elements for styling purposes — the selector no longer matches our "),s("code",[t._v("<dt>")]),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("dl")]),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        "),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("dt")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Dog"),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("dt")]),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("dd")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("A man's best friend."),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("dd")]),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"),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("dl")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("This is because our "),s("code",[t._v("<dt>")]),t._v(" element is now a direct child of the "),s("code",[t._v("<div>")]),t._v(", not the "),s("code",[t._v("<dl>")]),t._v(" element. If we stick with the family tree metaphor, we might think of "),s("code",[t._v("<dt>")]),t._v(' being a "grandchild" of our '),s("code",[t._v("<dl>")]),t._v(" element, but our selector only targets direct children.")]),t._v(" "),s("h2",{attrs:{id:"the-general-sibling-combinator"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-general-sibling-combinator"}},[t._v("#")]),t._v(" The General Sibling Combinator")]),t._v(" "),s("p",[t._v("The general sibling combinator is used to select siblings of a given element which matches some selector. The symbol for this combinator is "),s("code",[t._v("~")]),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("label ~ input")]),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("padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 5px 10px"),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("p",[t._v("Here we're selecting any "),s("code",[t._v("<input>")]),t._v(" elements which are siblings of an "),s("code",[t._v("<label>")]),t._v(" element. However, not "),s("em",[t._v("all")]),t._v(" sibling "),s("code",[t._v("<input>")]),t._v(" elements will be matched by this selector: only those which come "),s("em",[t._v("after")]),t._v(" the "),s("code",[t._v("<label>")]),t._v(" are matched.")]),t._v(" "),s("p",[t._v("So in the following code snippet, only the second "),s("code",[t._v("<input>")]),t._v(" element would be selected:")]),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    "),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(">")])]),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    "),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(">")])]),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    "),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(">")])]),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    "),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(">")])]),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"),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")])])]),s("p",[t._v("Note that the "),s("code",[t._v("<input>")]),t._v(" element need not come directly after the "),s("code",[t._v("<label>")]),t._v(". There can be other sibling elements in between the two.")]),t._v(" "),s("h2",{attrs:{id:"the-adjacent-sibling-combinator"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-adjacent-sibling-combinator"}},[t._v("#")]),t._v(" The Adjacent Sibling Combinator")]),t._v(" "),s("p",[t._v("Sometimes we only want to select an element that comes directly after another element. For example, perhaps we want to select "),s("code",[t._v("<input>")]),t._v(" elements which directly follow a "),s("code",[t._v("<label>")]),t._v(". In other words, if the element directly before an "),s("code",[t._v("<input>")]),t._v(" is not a "),s("code",[t._v("<label>")]),t._v(", this "),s("code",[t._v("<input>")]),t._v(" shouldn't be selected.")]),t._v(" "),s("p",[t._v("We can achieve this by using the "),s("em",[t._v("adjacent sibling combinator")]),t._v(", the symbol for which is "),s("code",[t._v("+")]),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("label + input")]),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("padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 5px 10px"),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("p",[t._v("The "),s("code",[t._v("label + input")]),t._v(" selector above would select the every "),s("code",[t._v("<input>")]),t._v(" element which directly follows a "),s("code",[t._v("<label>")]),t._v(" in a document.")]),t._v(" "),s("p",[t._v("If we look at the form below, only the first of the "),s("code",[t._v("<input>")]),t._v(" elements will be selected by the "),s("code",[t._v("label + input")]),t._v(" selector, as the second "),s("code",[t._v("<input>")]),t._v(" element doesn't directly follow the "),s("code",[t._v("<label>")]),t._v(".")]),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    "),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(">")])]),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    "),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(">")])]),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    "),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(">")])]),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"),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")])])])])}),[],!1,null,null,null);e.default=n.exports}}]);