Selectors Flashcards
Types of selectors
Simple selector
A simple selector is a selector with a single component, such as a single type selector, attribute selector, or pseudo-class, that’s not used in combination with or contains any other selector component or combinator.
#myId {
}
[pattern*="\d"] {
}
Compound selector
A compound selector is a sequence of simple selectors that are not separated by a combinator. A compound selector represents a set of simultaneous conditions on a single element.
a#selected {
}
[type="checkbox"]:checked:focus {
}
In a compound selector, the type selector or universal selector must come first in the sequence of selectors. Only one type selector or universal selector is allowed in the sequence. As whitespace represents the descendant combinator, no whitespace is allowed between the simple selectors that make up a compound selector.
Complex selector
A complex selector is a sequence of one or more simple and/or compound selectors that are separated by combinators, including the white space descendant combinator.
A complex selector represents a set of simultaneous conditions on a set of elements.
a#selected > .icon {
}
.box h2 + p {
}
Selectors can be read from right to left. For example, a#selected > .icon matches all elements with a class of icon that are the direct children of the <a> element with the id selected. The selector .box h2 + p matches the first <p>s to come immediately after any <h2> elements that are descendants of any element with the class of box.
Relative selector
A relative selector is a selector representing an element relative to one or more anchor elements preceded by a combinator. Relative selectors that don’t begin with an explicit combinator have an implied descendant combinator.
\+ div#topic > #reference {
}
> .icon {
}
dt:has(+ img) ~ dd {
}
Selector list
A selector list is a comma-separated list of simple, compound, and/or complex selectors. A given element is said to match a selector list when the element matches any (at least one) of the selectors in that selector list.
#main,
article.heading {
}
If any selector in a non-forgiving selector list is invalid, the entire selector list is invalidated.
#main,
\:bad-pseudoclass,
.validClass {
/* `:bad-pseudoclass` is invalid, invalidating this style block */
}
The :is() and :where() pseudo-classes can be used to construct forgiving selector lists.
“Relative selector” (MDN Web Docs). Retrieved February 14, 2024.
What are CSS atribute selectors
The CSS attribute selector matches elements based on the element having a given attribute explicitly set, with options for defining an attribute value or substring value match.
The case sensitivity of attribute names and values depends on the document language. In HTML, attribute names are case-insensitive.
If the attribute value is case-sensitive, like class, id, and data-* attributes, the attribute selector value match is case-sensitive. Attributes defined outside of the HTML specification, like role and aria-* attributes, are also case-sensitive. Normally case-sensitive attribute selectors can be made case-insensitive with the inclusion of the case-insensitive modifier (i).
/* <a> elements with a title attribute */
a[title] {
color: purple;
}
/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"]
{
color: green;
}
/* <a> elements with an href containing "example" */
a[href*="example"] {
font-size: 2em;
}
/* <a> elements with an href ending ".org", case-insensitive */
a[href$=".org" i] {
font-style: italic;
}
/* <a> elements whose class attribute contains the word "logo" */
a[class~="logo"] {
padding: 2px;
}
“Attribute selectors - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved February 8, 2024.
CSS attribute selector syntax
Syntax
-
[attr]- Represents elements with an attribute name ofattr. -
[attr=value]- Represents elements with an attribute name ofattrwhose value is exactlyvalue. -
[attr~=value]- Represents elements with an attribute name ofattrwhose value is a whitespace-separated list of words, one of which is exactlyvalue. -
[attr|=value]- Represents elements with an attribute name ofattrwhose value can be exactly value or can begin with value immediately followed by a hyphen,-(U+002D). It is often used for language subcode matches. -
[attr^=value]- Represents elements with an attribute name ofattrwhose value is prefixed (preceded) by value. -
[attr$=value]- Represents elements with an attribute name ofattrwhose value is suffixed (followed) by value. -
[attr*=value]- Represents elements with an attribute name ofattrwhose value contains at least one occurrence of value within the string. -
[attr operator value i]- Adding ani(orI) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range). -
[attr operator value s]Experimental - Adding ans(orS) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).
Examples:
a {
color: blue;
}
/* Internal links, beginning with "#" */
a[href^="#"] {
background-color: gold;
}
/* Links with "example" anywhere in the URL */
a[href*="example"] {
background-color: silver;
}
/* Links with "insensitive" anywhere in the URL,
regardless of capitalization */
a[href*="insensitive" i] {
color: cyan;
}
/* Links with "cAsE" anywhere in the URL,
with matching capitalization */
a[href*="cAsE" s] {
color: pink;
}
/* Links that end in ".org" */
a[href$=".org"] {
color: red;
}
/* Links that start with "https://" and end in ".org" */
a[href^="https://"][href$=".org"]
{
color: green;
}
“Attribute selectors - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved February 8, 2024.
What is the specificity of an attribute selector?
It has the same specificity than a class selector
“CLASS column” (MDN Web Docs). Retrieved February 8, 2024.
What are CSS class selectors?
The CSS class selector matches elements based on the contents of their class attribute.
/* All elements with class="spacious" */
.spacious {
margin: 2em;
}
/* All <li> elements with class="spacious" */
li.spacious {
margin: 2em;
}
/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
margin: 2em;
}
“Class selectors - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved February 8, 2024.
Syntax of CSS class selectors
Syntax
.class_name { style properties }
Note that this is equivalent to the following attribute selector:
[class~=class_name] { style properties }
Examples
.red {
color: #f33;
}
.yellow-bg {
background: #ffa;
}
.fancy {
font-weight: bold;
text-shadow: 4px 4px 3px #77f;
}
“Class selectors - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved February 8, 2024.
What are CSS ID selectors?
The CSS ID selector matches an element based on the value of the element’s id attribute. In order for the element to be selected, its id attribute must match exactly the value given in the selector.
/* The element with id="demo" */
#demo {
border: red 2px solid;
}
“ID selectors - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved February 9, 2024.
CSS ID selectors syntax
Syntax
#id_value { style properties }
Note that syntactically (but not specificity-wise), this is equivalent to the following attribute selector:
[id=id_value] { style properties }
Examples:
#identified {
background-color: skyblue;
}
“ID selectors - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved February 9, 2024.
What is the CSS & nesting selector?
The CSS & nesting selector explicitly states the relationship between parent and child rules when using CSS nesting. It makes the nested child rule selectors relative to the parent element. Without the & nesting selector, the child rule selector selects child elements. The child rule selectors have the same specificity weight as if they were within :is().
Note: Child rule does not mean child element selector. A child rule can target parent element or child elements depending on use of the & nesting selector.
If not used in nested style rule, the & nesting selector represents the scoping root.
“& nesting selector - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved February 9, 2024.
CSS & nesting selector syntax
Syntax
parentRule {
/* parent rule style properties */
& childRule {
/* child rule style properties */
}
}
With the & nesting selector added with no whitespace, the elements matched by the parent rule will be styled when hovered.
.parent-rule {
/* parent rule properties */
&:hover {
/* child rule properties */
}
}
/* the browser parses the above nested rules as shown below */
.parent-rule {
/* parent rule properties */
}
.parent-rule:hover {
/* child rule properties */
}
The & nesting selector can also be appended to reverse the context of the rules.
.card {
/* .card styles */
.featured & {
/* .featured .card styles */
}
}
/* the browser parses above nested rules as */
.card {
/* .card styles */
}
.featured .card {
/* .featured .card styles */
}
The & nesting selector can be placed multiple times:
.card {
/* .card styles */
.featured & & & {
/* .featured .card .card .card styles */
}
}
/* the browser parses above nested rules as */
.card {
/* .card styles */
}
.featured .card .card .card {
/* .featured .card .card .card styles */
}
“& nesting selector - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved February 12, 2024.
What is a CSS type selector?
The CSS type selector matches elements by node name. In other words, it selects all elements of the given type within a document.
/* All <a> elements. */
a {
color: red;
}
Type selectors can be namespaced when using @namespace. 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 without any declared namespace
Syntax
element { style properties }
Examples
span {
background-color: skyblue;
}
“Type selectors - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved February 12, 2024.
What are universal selectors?
The CSS universal selector (*) matches elements of any type.
/* Selects all elements */
* {
color: green;
}
The universal selector is a special type selector and can therefore be namespaced when using @namespace. 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|*- matches all elements in namespacens -
*|*- matches all elements -
|*- matches all elements without any declared namespace
Syntax
* { style properties }
The asterisk is optional with simple selectors. For instance, *.warning and .warning are equivalent.
Examples:
* [lang^="en"] {
color: green;
}
*.warning {
color: red;
}
*#maincontent {
border: 1px solid blue;
}
.floating {
float: left;
}
/* automatically clear the next sibling after a floating element */
.floating + * {
clear: left;
}
“Universal selectors - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved February 12, 2024.
