Combinators Flashcards
CSS Child combinator (>)
The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.
/* List items that are children of the "my-things" list */
ul.my-things > li {
margin: 2em;
}
Elements matched by the second selector must be the immediate children of the elements matched by the first selector. This is stricter than the descendant combinator, which matches all elements matched by the second selector for which there exists an ancestor element matched by the first selector, regardless of the number of “hops” up the DOM.
Syntax
/* The white space around the > combinator is optional but recommended. */
selector1 > selector2 { /* style properties */ }
Examples:
span {
background-color: aqua;
}
div > span {
background-color: yellow;
}
“Child combinator - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved February 13, 2024.
CSS Descendant combinator (" ")
The descendant combinator — typically represented by a single space (" ") character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent’s parent, parent’s parent’s parent, etc.) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.
/* List items that are descendants of the "my-things" list */
ul.my-things li {
margin: 2em;
}
The descendant combinator is technically one or more CSS white space characters — the space character and/or one of four control characters: carriage return, form feed, new line, and tab characters — between two selectors in the absence of another combinator. Additionally, the white space characters of which the combinator is comprised may contain any number of CSS comments.
Syntax
selector1 selector2 {
/* property declarations */
}
Examples:
li {
list-style-type: disc;
}
li li {
list-style-type: circle;
}
“Descendant combinator - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved February 13, 2024.
CSS Namespace separator (|)
The namespace separator (|) separates the selector from the namespace, identifying the namespace, or lack thereof, for a type selector.
/* Links in the namespace named myNameSpace */
myNameSpace|a {
font-weight: bold;
}
/* paragraphs in any namespace (including no namespace) */
*|p {
color: darkblue;
}
/* heading level 2 not in a namespace */
|h2 {
margin-bottom: 0;
}
Type selectors and the universal selector allow an optional namespace component. When a namespace has been previously declared via @namespace, these selectors can be namespaced by prepending the selector with the name of the namespace separated by the namespace separator (|). This is useful when dealing with documents containing multiple namespaces such as HTML with inline SVG or MathML, or XML that mixes multiple vocabularies.
-
ns|h1- matches<h1>elements in namespacens -
*|h1- matches all<h1>elements -
|h1- matches all<h1>elements outside of any declared or implied namespace
Syntax
namespace|element { style properties }
“Namespace separator - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved February 13, 2024.
Explain HTML or SVG element default namespaces
By default, all elements in an HTML or SVG element have a namespace as the http://www.w3.org/1999/xhtml and http://www.w3.org/2000/svg namespace are implied. The document.createElementNS method, with an empty string for the namespace parameter, can be used to create elements with no namespace.
Example:
HTML
<p>This paragraph <a href="#">has a link</a>.</p>
<svg width="400" viewBox="0 0 400 20">
<a href="#">
<text x="0" y="15">Link created in SVG</text>
</a>
</svg>
CSS
The CSS declares two namespaces, then assigns styles to links globally (a), to links in no namespace (|a), to links in any namespace or no namespace (*|a), and then to two different named namespaces (svgNamespace|a and htmlNameSpace|a).
@namespace svgNamespace url("http://www.w3.org/2000/svg");
@namespace htmlNameSpace url("http://www.w3.org/1999/xhtml");
/* All `<a>`s in the default namespace, in this case, all `<a>`s */
a {
font-size: 1.4rem;
}
/* no namespace */
|a {
text-decoration: wavy overline lime;
font-weight: bold;
}
/* all namespaces (including no namespace) */
*|a {
color: red;
fill: red;
font-style: italic;
}
/* only the svgNamespace namespace, which is <svg> content */
svgNamespace|a {
color: green;
fill: green;
}
/* The htmlNameSpace namespace, which is the HTML document */
htmlNameSpace|a {
text-decoration-line: line-through;
}
“Named namespaces” Retrieved February 13, 2024.
How do you create default namespace elements and how do you target them?
No namespaces are explicitly declared in the HTML or within the SVG.
HTML
<p><a href="#">A link</a> in the implied HTML namespace.</p>
<svg width="400" viewBox="0 0 400 20">
<a href="#">
<text x="0" y="15">Link created in SVG namespace</text>
</a>
</svg>
JavaScript
With JavaScript, with document.createElementNS, we create an anchor link without a namespace, then append the link.
// create 'no namespace' anchor
const a = document.createElementNS("", "a");
a.href = "#";
a.appendChild(document.createTextNode("Link created without a namespace"));
document.body.appendChild(a);
CSS
We declare a namespace with @namespace. By omitting the name for the namespace, the @namespace declaration creates a default namespace.
/* By omitting a name, this sets SVG as the default namespace */
@namespace url("http://www.w3.org/2000/svg");
/* `<a>` in the default (set to SVG) namespace */
a {
font-size: 1.4rem;
}
/* `<svg>` and `<p>` in the default (set to SVG) namespace */
svg,
p {
border: 5px solid gold;
}
/* links outside of any namespace */
|a {
text-decoration: wavy underline purple;
font-weight: bold;
}
/* links with any namespace or no namespace */
*|a {
font-style: italic;
color: magenta;
fill: magenta;
}
The selector with no namespace separator, the a, matched only the SVG <a> elements, as SVG was set as the default namespace.
The selector with no namespace, the |a, matched the JavaScript defined and appended <a>, as that node is the only node that doesn’t have a default namespace.
“Default namespace and no namespace” (MDN Web Docs). Retrieved February 13, 2024.
CSS Next-sibling combinator (+)
The next-sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.
/* Paragraphs that come immediately after any image */
img + p {
font-weight: bold;
}
Syntax
/* The white space around the + combinator is optional but recommended. */
former_element + target_element { style properties }
Examples:
/* Targets the second li element of a list */
li:first-of-type + li {
color: red;
}
“Next-sibling combinator - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved February 14, 2024.
CSS Selector list (,)
The CSS selector list (,) selects all the matching nodes. A selector list is a comma-separated list of selectors.
When multiple selectors share the same declarations, they can be grouped together into a comma-separated list. Selector lists can also be passed as parameters to some functional CSS pseudo-classes. White space may appear before and/or after the comma.
The following three declarations are equivalent:
span {
border: red 2px solid;
}
div {
border: red 2px solid;
}
span,
div {
border: red 2px solid;
}
\:is(span, div) {
border: red 2px solid;
}
“Selector list - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved February 14, 2024.
What is the problem with invalid selector lists?
An invalid selector represents, and therefore matches, nothing. When a selector list contains an invalid selector, the entire style block is ignored, except for the :is() and :where() pseudo-classes that accept forgiving selector lists.
A single unsupported selector in the selector list invalidates the entire rule.
Consider the following two CSS rule sets:
h1 {
font-family: sans-serif;
}
h2:invalid-pseudo {
font-family: sans-serif;
}
h3 {
font-family: sans-serif;
}
and
h1,
h2:invalid-pseudo,
h3 {
font-family: sans-serif;
}
They are not equivalent. In the first rule set, styles will be applied on the h1 and h3 elements, but the h2:invalid-pseudo rule will not be parsed. In the second rule set, because one selector in the list is invalid, the entire rule will not be parsed. Because of this, no style will be applied to the h1 and h3 elements as when any selector in a list of selectors in invalid, the entire style block will be ignored.
“Valid and invalid selector lists” (MDN Web Docs). Retrieved February 14, 2024.
What is a forgiving selector list?
A way to remedy the invalid selector list problem is to use the :is() or the :where() pseudo-class, which accept a forgiving selector list. Each selector in a forgiving selector list is parsed individually. So any invalid selectors in the list are ignored and the valid ones are used.
The following two CSS rule sets are equivalent:
h1 {
font-family: sans-serif;
}
h2:maybe-unsupported {
font-family: sans-serif;
}
h3 {
font-family: sans-serif;
}
and
\:is(h1, h2:maybe-unsupported, h3) {
font-family: sans-serif;
}
The difference between the two is that the specificity of :is() is its most specific argument, whereas the :where() selector and the forgiving selector list parameter do not add any specificity weight.
“Forgiving selector list” (MDN Web Docs). Retrieved February 14, 2024.
Subsequent-sibling combinator (~)
The subsequent-sibling combinator (~, a tilde) separates two selectors and matches all instances of the second element that follow the first element (not necessarily immediately) and share the same parent element.
In the following example, the subsequent-sibling combinator (~) helps to select and style paragraphs that are both siblings of an image and appear after any image.
img ~ p {
color: red;
}
Syntax
/* The white space around the ~ combinator is optional but recommended. */
former_element ~ target_element { style properties }
“Subsequent-sibling combinator - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved February 14, 2024.
