Logo

Go on. Explore!

lvl 0 • 0 xp

lvl 1

HomeMarketDecksInterests
CSS - Selectors

CSS - Selectors

memorize.aimemorize.ai (lvl 286)
Star 0%
Star 0%
Star 0%
Star 0%
Star 0%
(0)
(0)
(0)
36 cards
()
Section 1

Preview this deck

child combinator (>) (дочерние наследники)

Front

1 / 36

Web Dev
Star 0%
Star 0%
Star 0%
Star 0%
Star 0%

0.0

0 reviews

5
0
4
0
3
0
2
0
1
0

Active users

0

All-time users

0

Favorites

0

Last updated

6 years ago

Date created

Mar 1, 2020

Cards (36)

Section 1

(36 cards)

child combinator (>) (дочерние наследники)

Front

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the children of elements matched by the first.

Back

[attribute] Ex: [target]

Front

Selects all elements with a target attribute

Back

[attr operator value i]

Front

Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).

Back

CSS Selectors

Front

are patterns used to select the element(s) you want to style.

Back

[attribute $= value] Ex: a[href $= ".pdf"]

Front

Selects every <a> element whose href attribute value ends with ".pdf" Represents elements with an attribute name of attr whose value is suffixed (followed) by value.

Back

general sibling combinator (~) (родственные)

Front

The general sibling combinator (~) separates two selectors and matches the second element only if it follows the first element (though not necessarily immediately), and both are children of the same parent element.

Back

4 types of combinators?

Front

1) adjacent sibling combinator (+) 2) general sibling combinator (~) 3) child combinator (>) 4) descendant combinator ' '

Back

Type selector?

Front

Selects all elements that match the given node name. Syntax: eltname Example: input will match any <input> element.

Back

Pseudo element ::cue (:cue) Ex: p::cue

Front

The ::cue CSS pseudo-element matches WebVTT cues within a selected element. This can be used to style captions and other cues in media with VTT tracks. Used to format captions in HTML5 video tag.

Back

element1 ~ element2 Ex: p ~ ul

Front

Selects every <ul> element that are preceded by a <p> element

Back

Pseudo element ::first-line (:first-line) Ex: p::first-line

Front

The ::first-line CSS pseudo-element applies styles to the first line of a block-level element. Note that the length of the first line depends on many factors, including the width of the element, the width of the document, and the font size of the text.

Back

[attribute ^= value] Ex: a[href ^= "https"]

Front

Selects every <a> element whose href attribute value begins with "https" Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.

Back

ID selector?

Front

Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document. Syntax: #idname Example: #toc will match the element that has the ID "toc".

Back

What is CSS Combinator?

Front

A combinator is something that explains the relationship between the selectors.

Back

[attribute *= value] Ex: a[href *= "w3schools"]

Front

Selects every <a> element whose href attribute value contains the substring "w3schools" Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.

Back

Pseudo element ::first-letter (:first-letter) Ex: p::first-letter

Front

The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).

Back

[attribute |= value] Ex: [lang |= "en"]

Front

Selects all elements with a lang attribute value starting with "en" Represents elements with an attribute name of attr whose 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.

Back

Class selector?

Front

Selects all elements that have the given class attribute. Syntax: .classname Example: .index will match any element that has a class of "index".

Back

What is CSS Pseudo-class?

Front

A pseudo-class is used to define a special state of an element. For example, it can be used to: - Style an element when a user mouses over it - Style visited and unvisited links differently - Style an element when it gets focus

Back

element > element Ex: element div > p

Front

Selects all <p> elements where the parent is a <div> element

Back

[attribute = value] Ex: [target = "_blank"]

Front

Selects all elements with target="_blank"

Back

element + element Ex. elementdiv + p

Front

Selects all <p> elements that are placed immediately after <div> elements

Back

adjacent sibling combinator (+) (соседние)

Front

The adjacent 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.

Back

Attribute selector? Name 7 attribute selectors.

Front

Selects elements based on the value of the given attribute. Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] Example: [autoplay] will match all elements that have the autoplay attribute set (to any value).

Back

7 types of attribute selectors?

Front

1) [attribute] 2) [attribute = value] 3) [attribute ~= value] 4) [attribute |= value] 5) [attribute ^= value] 6) [attribute $= value] 7) [attribute *= value] https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Back

[attr operator value s]

Front

Adding an s (or S) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).

Back

[attribute ~= value] Ex: [title ~= "flower"]

Front

Selects all elements with a title attribute containing the word "flower" Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.

Back

Pseudo element ::slotted()

Front

The ::slotted() CSS pseudo-element represents any element that has been placed into a slot inside an HTML template (see Using templates and slots for more information). This only works when used inside CSS placed within a shadow DOM. Note also that this selector won't select a text node placed into a slot; it only targets actual elements.

Back

Pseudo element ::before (:before) Ex: p::before

Front

In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

Back

element element Ex: element div p

Front

Selects all <p> elements inside <div> elements

Back

element, element Ex: element div, p

Front

Selects all <div> elements and all <p> elements

Back

descendant combinator ' ' (вложенные элементы)

Front

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 element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.

Back

Pseudo element ::after (:after) Ex: p::after

Front

In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

Back

What is CSS Pseudo-element?

Front

A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to: - Style the first letter, or line, of an element - Insert content before, or after, the content of an element

Back

Pseudo element ::selection Ex: ::selection

Front

The ::selection CSS pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).

Back

Universal selector?

Front

Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces. Syntax: 1) *, 2) ns|*, 3) | Example: * will match all the elements of the document. https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors

Back