CSS Selectors Flashcards

Questions and Answers

What are CSS Selectors?

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

What is a CSS Combinator?

A combinator explains the relationship between the selectors.

What is a CSS Pseudo-class?

Defines a special state of an element.

What is a CSS Pseudo-element?

Styles specified parts of an element. Signup and view all the answers

What is a type selector in CSS?

Selects all elements that match the given node name. Signup and view all the answers

What is a class selector in CSS?

Selects all elements that have the given class attribute. Signup and view all the answers

What is an ID selector in CSS?

Selects an element based on the value of its id attribute. Signup and view all the answers

What is a universal selector in CSS?

Selects all elements. Signup and view all the answers

What are the types of attribute selectors in CSS?

<ol> <li>[attr] 2) [attr=value] 3) [attr~=value] 4) [attr|=value] 5) [attr^=value] 6) [attr$=value] 7) [attr*=value]</li> </ol> Signup and view all the answers

What are the 4 types of combinators in CSS?

<ol> <li>Adjacent sibling combinator (+) 2) General sibling combinator (~) 3) Child combinator (>) 4) Descendant combinator ( )</li> </ol> Signup and view all the answers

What does the adjacent sibling combinator (+) do?

Matches the second element only if it immediately follows the first element. Signup and view all the answers

What does the general sibling combinator (~) do?

Matches the second element only if it follows the first element. Signup and view all the answers

What does the child combinator (>) do?

Matches only those elements that are children of another element. Signup and view all the answers

What does the descendant combinator ( ) do?

Selects elements matched by the second selector if they have an ancestor element matching the first selector. Signup and view all the answers

What does element div, p selector do?

Selects all div elements and all p elements. Signup and view all the answers

What does element div p selector do?

Selects all p elements inside div elements. Signup and view all the answers

What does element > element selector do?

Selects all elements where the parent is a specified element. Signup and view all the answers

What does element + element selector do?

Selects all elements that are placed immediately after specified elements. Signup and view all the answers

What does element1 ~ element2 selector do?

Selects every element that is preceded by specified elements. Signup and view all the answers

Study Notes

CSS Selectors

Patterns used to select elements for styling.

CSS Combinator

Describes the relationship between selectors.

CSS Pseudo-class

Defines a special state of an element.
Examples include styling elements on mouse over, differentiating between visited and unvisited links, and styling focused elements.

CSS Pseudo-element

Styles specific parts of an element.
Can style the first letter or line of an element and insert content before or after an element's content.

Type Selector

Selects elements matching the specified node name.
Syntax: eltname
Example: input matches any <input> element.

Class Selector

Selects elements with a given class attribute.
Syntax: .classname
Example: .index matches elements with class "index".

ID Selector

Selects elements based on their ID attribute.
Each ID should be unique within a document.
Syntax: #idname
Example: #toc matches the element with ID "toc".

Universal Selector

Selects all elements in the document.
Syntax options: *, ns|*, *|*
Example: * matches all elements.

Attribute Selector

Selects elements based on attribute values.
Syntax variations include:
- [attr]
- [attr=value]
- [attr~=value]
- [attr|=value]
- [attr^=value]
- [attr$=value]
- [attr*=value]
Example: [autoplay] matches all elements with the "autoplay" attribute.

Combinators

Four types of combinators defining element relationships:
- Adjacent sibling combinator (+): Matches the second element immediately following the first.
- General sibling combinator (~): Matches the second element following the first, not necessarily immediately.
- Child combinator (>): Matches elements that are direct children of the first selector.
- Descendant combinator ' ': Matches elements that are descendants of the first selector.

Selector Examples

element, element: Selects all specified elements, e.g., div, p selects all <div> and  elements.
element element: Selects elements inside specified elements, e.g., div p selects all  inside <div>.
element > element: Selects elements that are direct children, e.g., div > p targets  within <div>.
element + element: Selects elements immediately following another, e.g., div + p selects  right after <div>.
element1 ~ element2: Selects elements preceded by a specified element, e.g., p ~ ul targets all <ul> after a .

Attribute Selector Variations

Seven types of attribute selectors specify how elements can be selected based on attributes:
- [attribute]: Selects elements with that attribute.
- [attribute=value]: Selects elements with a specific attribute value.
- [attribute~=value]: Selects elements with an attribute containing a specific word.
- [attribute|=value]: Selects elements with an attribute starting with a specified value.
- [attribute^=value]: Selects elements with attributes starting with specific characters.
- [attribute$=value]: Selects elements with attributes ending with specific characters.
- [attribute*=value]: Selects elements with attributes containing specific characters.
Example: [target] matches all elements with a "target" attribute.
Example: [target="_blank"] matches all elements with target="_blank".
Example: [title~= "flower"] matches elements with the title attribute containing "flower".

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

This quiz focuses on CSS selectors, combinators, and pseudo-classes. Test your knowledge on how these elements interact and their importance in styling web pages. Ideal for students or anyone looking to improve their CSS skills.