Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

CSS > pseudo-classes > Flashcards

pseudo-classes Flashcards

1
Q

What is a CSS pseudo-class?

A

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user’s pointer hovers over the button and this selected button can then be styled.

/* Any button over which the user's pointer is hovering */
button:hover {
  color: blue;
}

A pseudo-class consists of a colon (:) followed by the pseudo-class name (e.g., :hover). A functional pseudo-class also contains a pair of parentheses to define the arguments (e.g., :dir()). The element that a pseudo-class is attached to is defined as an anchor element (e.g., button in case button:hover).

Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).

Syntax

selector:pseudo-class {
  property: value;
}

“Pseudo-classes - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved February 15, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Type of pseudo-classes?

A
  • Element display state pseudo-classes - These pseudo-classes enable the selection of elements based on their display states.
  • Input pseudo-classes - These pseudo-classes relate to form elements, and enable selecting elements based on HTML attributes and the state that the field is in before and after interaction.
  • Linguistic pseudo-classes - These pseudo-classes reflect the document language and enable the selection of elements based on language or script direction.
  • Location pseudo-classes - These pseudo-classes relate to links, and to targeted elements within the current document.
  • Resource state pseudo-classes - These pseudo-classes apply to media that is capable of being in a state where it would be described as playing, such as a video.
  • Time-dimensional pseudo-classes - These pseudo-classes apply when viewing something which has timing, such as a WebVTT caption track.
  • Tree-structural pseudo-classes - These pseudo-classes relate to the location of an element within the document tree.

“Pseudo-classes - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved February 15, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

element display state pseudo-classes

A

These pseudo-classes enable the selection of elements based on their display states.

  • :fullscreen - Matches an element that is currently in fullscreen mode.
  • :modal - Matches an element that is in a state in which it excludes all interaction with elements outside it until the interaction has been dismissed.
  • :picture-in-picture - Matches an element that is currently in picture-in-picture mode.

Note: :fullscreen and :picture-in-picture are not widely supported by majors browser. Check their availability before using them.

“Pseudo-classes - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved February 15, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Input pseudo-classes

A

These pseudo-classes relate to form elements, and enable selecting elements based on HTML attributes and the state that the field is in before and after interaction.

  • :autofill - Matches when an <input> has been autofilled by the browser.
  • :enabled - Represents a user interface element that is in an enabled state.
  • :disabled - Represents a user interface element that is in a disabled state.
  • :read-only - Represents any element that cannot be changed by the user.
  • :read-write - Represents any element that is user-editable.
  • :placeholder-shown - Matches an input element that is displaying placeholder text. For example, it will match the placeholder attribute in the <input> and <textarea> elements.
  • :default - Matches one or more UI elements that are the default among a set of elements.
  • :checked - Matches when elements such as checkboxes and radio buttons are toggled on.
  • :indeterminate - Matches UI elements when they are in an indeterminate state.
  • :blank - Matches a user-input element which is empty, containing an empty string or other null input.
  • :valid - Matches an element with valid contents. For example, an input element with the type ‘email’ that contains a validly formed email address or an empty value if the control is not required.
  • :invalid - Matches an element with invalid contents. For example, an input element with type 'email' with a name entered.
  • :in-range - Applies to elements with range limitations. For example, a slider control when the selected value is in the allowed range.
  • :out-of-range - Applies to elements with range limitations. For example, a slider control when the selected value is outside the allowed range.
  • :required - Matches when a form element is required.
  • :optional - Matches when a form element is optional.
  • :user-valid - Represents an element with correct input, but only when the user has interacted with it.
  • :user-invalid - Represents an element with incorrect input, but only when the user has interacted with it.

“Input pseudo-classes” (MDN Web Docs). Retrieved February 26, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Linguistic pseudo-classes

A

These pseudo-classes reflect the document language and enable the selection of elements based on language or script direction.

  • :dir() - The directionality pseudo-class selects an element based on its directionality as determined by the document language.
  • :lang() - Select an element based on its content language.

“Linguistic pseudo-classes” (MDN Web Docs). Retrieved February 26, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Location pseudo-classes

A

These pseudo-classes relate to links, and to targeted elements within the current document.

  • :any-link - Matches an element if the element would match either :link or :visited.
  • :link - Matches links that have not yet been visited.
  • :visited - Matches links that have been visited.
  • :local-link - Matches links whose absolute URL is the same as the target URL. For example, anchor links to the same page.
  • :target - Matches the element which is the target of the document URL.
  • :target-within - Matches elements which are the target of the document URL, but also elements which have a descendant which is the target of the document URL.
  • :scope - Represents elements that are a reference point for selectors to match against.

“Location pseudo-classes” (MDN Web Docs). Retrieved February 26, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Resource state pseudo-classes

A

These pseudo-classes apply to media that is capable of being in a state where it would be described as playing, such as a video.

:playing - Represents a media element that is capable of playing when that element is playing.

:paused - Represents a media element that is capable of playing when that element is paused.

“Resource state pseudo-classes” (MDN Web Docs). Retrieved February 26, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Time-dimensional pseudo-classes

A

These pseudo-classes apply when viewing something which has timing, such as a WebVTT caption track.

  • :current - Represents the element or ancestor of the element that is being displayed.
  • :past - Represents an element that occurs entirely before the :current element.
  • :future - Represents an element that occurs entirely after the :current element.

“Time-dimensional pseudo-classes” (MDN Web Docs). Retrieved February 27, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

User action pseudo-classes

A

These pseudo-classes require some interaction by the user in order for them to apply, such as holding a mouse pointer over an element.

  • :hover - Matches when a user designates an item with a pointing device, such as holding the mouse pointer over the item.
  • :active - Matches when an item is being activated by the user. For example, when the item is clicked on.
  • :focus - Matches when an element has focus.
  • :focus-visible - Matches when an element has focus and the user agent identifies that the element should be visibly focused.
  • :focus-within - Matches an element to which :focus applies, plus any element that has a descendant to which :focus applies.

“User action pseudo-classes” (MDN Web Docs). Retrieved February 27, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Functional pseudo-classes

A

These pseudo-classes accept a selector list or forgiving selector list as a parameter.

  • :is() - The matches-any pseudo-class matches any element that matches any of the selectors in the list provided. The list is forgiving.
  • :not() - The negation, or matches-none, pseudo-class represents any element that is not represented by its argument.
  • :where() - The specificity-adjustment pseudo-class matches any element that matches any of the selectors in the list provided without adding any specificity weight. The list is forgiving.
  • :has() - The relational pseudo-class represents an element if any of the relative selectors match when anchored against the attached element.

“Functional pseudo-classes” (MDN Web Docs). Retrieved February 28, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

:is() functional pseudo-class

A

The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.

It accepts a forgiving selector list

Note: Originally named :matches() (and :any()), this selector was renamed to :is() in CSSWG issue #3258.

Syntax

\:is(<forgiving-selector-list>) {
  /* ... */
}

Examples:

ol {
  list-style-type: upper-alpha;
  color: darkblue;
}

/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
\:is(ol, ul, menu:unsupported) :is(ol, ul) {
  color: green;
}

\:is(ol, ul) :is(ol, ul) ol {
  list-style-type: lower-greek;
  color: chocolate;
}

“:is() - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved February 28, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Does :is() support pseudo-elements?

A

The :is() pseudo-class does not match pseudo-elements. So rather than this:

some-element:is(::before, ::after) {
  display: block;
}

or this:

\:is(some-element::before, some-element::after) {
  display: block;
}

instead do:

some-element::before,
some-element::after {
  display: block;
}

“:is() does not select pseudo-elements” (MDN Web Docs). Retrieved February 28, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

How can you use :is() to simplify selectors?

A

The :is() pseudo-class can greatly simplify your CSS selectors. For example, take the following CSS:

/* 3-deep (or more) unordered lists use a square */
ol ol ul,
ol ul ul,
ol menu ul,
ol dir ul,
ol ol menu,
ol ul menu,
ol menu menu,
ol dir menu,
ol ol dir,
ol ul dir,
ol menu dir,
ol dir dir,
ul ol ul,
ul ul ul,
ul menu ul,
ul dir ul,
ul ol menu,
ul ul menu,
ul menu menu,
ul dir menu,
ul ol dir,
ul ul dir,
ul menu dir,
ul dir dir,
menu ol ul,
menu ul ul,
menu menu ul,
menu dir ul,
menu ol menu,
menu ul menu,
menu menu menu,
menu dir menu,
menu ol dir,
menu ul dir,
menu menu dir,
menu dir dir,
dir ol ul,
dir ul ul,
dir menu ul,
dir dir ul,
dir ol menu,
dir ul menu,
dir menu menu,
dir dir menu,
dir ol dir,
dir ul dir,
dir menu dir,
dir dir dir {
  list-style-type: square;
}

Can be replaced with:

/* 3-deep (or more) unordered lists use a square */
\:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  list-style-type: square;
}

“Simplifying section selectors” (MDN Web Docs). Retrieved February 28, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

:where() functional pseudo-class

A

The :where() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.

The difference between :where() and :is() is that :where() always has 0 specificity, whereas :is() takes on the specificity of the most specific selector in its arguments.

“:where() - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 5, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

:not() functional pseudo-class

A

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

Syntax
The :not() pseudo-class requires a comma-separated list of one or more selectors as its argument. The list must not contain another negation selector or a pseudo-element.

\:not(<complex-selector-list>) {
  /* ... */
}

“:not() - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 5, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

:not() quirks, tricks, and unexpected results

A

There are several unusual effects and outcomes when using :not() that you should keep in mind when using it:

  • Useless selectors can be written using this pseudo-class. For example, :not(*) matches any element which is not an element.
  • This pseudo-class can increase the specificity of a rule. For example, #foo:not(#bar) will match the same element as the simpler #foo, but has the higher specificity of two id selectors.
  • The specificity of the :not() pseudo-class is replaced by the specificity of the most specific selector in its comma-separated argument of selectors; providing the same specificity as if it had been written :not(:is(argument)).
  • :not(.foo) will match anything that isn’t .foo, including <html> and <body>. This selector will match everything that is “not an X”. This may be surprising when used with descendant combinators, since there are multiple paths to select a target element. For instance, body :not(table) a will still apply to links inside a <table>, since <tr>, <tbody>, <th>, <td>, <caption>, etc. can all match the :not(table) part of the selector.
  • You can negate several selectors at the same time. Example: :not(.foo, .bar) is equivalent to :not(.foo):not(.bar).
  • If any selector passed to the :not() pseudo-class is invalid or not supported by the browser, the whole rule will be invalidated. The effective way to overcome this behavior is to use :is() pseudo-class, which accepts a forgiving selector list. For example :not(.foo, :invalid-pseudo-class) will invalidate a whole rule, but :not(:is(.foo, :invalid-pseudo-class)) will match any (including <html> and <body>) element that isn’t .foo.

“:not() - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 5, 2024.

17
Q

:has() functional pseudo-class

A

The functional :has() CSS pseudo-class represents an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element. This pseudo-class presents a way of selecting a parent element or a previous sibling element with respect to a reference element by taking a relative selector list as an argument.

The :has() pseudo-class takes on the specificity of the most specific selector in its arguments the same way as :is() and :not() do.

Syntax

\:has(<relative-selector-list>) {
  /* ... */
}

If the :has() pseudo-class itself is not supported in a browser, the entire selector block will fail unless :has() is in a forgiving selector list, such as in :is() and :where()).

The :has() pseudo-class cannot be nested within another :has(). This is because many pseudo-elements exist conditionally based on the styling of their ancestors and allowing these to be queried by :has() can introduce cyclic querying.

Pseudo-elements are also not valid selectors within :has() and pseudo-elements are not valid anchors for :has().

Example:

/* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 */
h1:has(+ p) {
  margin-bottom: 0;
}

“:has() - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 7, 2024.

18
Q

:only-of-type pseudo-class

A

The :only-of-type CSS pseudo-class represents an element that has no siblings of the same type.

Syntax

\:only-of-type {
  /* ... */
}

Examples:

main :only-of-type {
  color: red;
}

“:only-of-type - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 7, 2024.

19
Q

:local-link pseudo-class

A

The :local-link CSS pseudo-class represents a link to the same document. Therefore an element that is the source anchor of a hyperlink whose target’s absolute URL matches the element’s own document URL.

Syntax

\:local-link {
  /* ... */
}

Example:

/* Selects any <a> that links to the current document */
a:local-link {
  color: green;
}

“:local-link - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 7, 2024.

20
Q

:indeterminate pseudo-class

A

The :indeterminate CSS pseudo-class represents any form element whose state is indeterminate, such as checkboxes that have been set to an indeterminate state with JavaScript, radio buttons which are members of a group in which all radio buttons are unchecked, and <progress> elements with no value attribute.

Syntax

\:indeterminate

Examples:

/* Selects any <input> whose state is indeterminate */
input:indeterminate {
  background: lime;
}

Elements targeted by this selector are:

<input type="checkbox"> elements whose indeterminate property is set to true by JavaScript.
<input type="radio">, when all radio buttons with the same name value in the form are unchecked.
<progress> elements in an indeterminate state.

“:indeterminate - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 8, 2024.

21
Q

:scope pseudo-class

A

The :scope CSS pseudo-class represents elements that are a reference point, or scope, for selectors to match against.

/* Selects a scoped element */
\:scope {
  background-color: lime;
}

Which element(s) :scope matches depends on the context in which it is used:

  • When used at the root level of a stylesheet, :scope is equivalent to :root, which in a regular HTML document matches the <html> element.
  • When used inside a @scope block, :scope matches the block’s defined scope root. It provides a way to apply styles to the root of the scope from inside the @scope block itself.
  • When used within a DOM API call — such as querySelector(), querySelectorAll(), matches(), or Element.closest() — :scope matches the element on which the method was called.

Syntax

\:scope {
  /* ... */
}

“:scope - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 8, 2024.

22
Q

:root pseudo-class

A

The :root CSS pseudo-class matches the root element of a tree representing the document. In HTML, :root represents the <html> element and is identical to the selector html, except that its specificity is higher.

/* Selects the root element of the document:
   <html> in the case of HTML */
\:root {
  background: yellow;
}

Syntax

\:root {
  /* ... */
}

Examples:

Declaring global CSS variables
:root can be useful for declaring global CSS variables:

\:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

“:root - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 8, 2024.

CSS (44 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions