Selectors Flashcards
What are the parts of a CSS rule?
A CSS rule consists of selectors and declarations. A declaration contains a property-value pair that applies styles to elements matched by the selector.
What does the universal selector (*) do?
It matches any element in the document.
What does a type selector do?
It matches an HTML element by its tag name.
How does a class selector work?
It selects elements with a specific class using the . character (e.g., .my-class).
How does an ID selector work?
It selects an element with a specific id using the # character (e.g., #rad).
How do attribute selectors work?
They match elements based on attributes, using square brackets ([ ]).
How do you select elements with a specific attribute value?
[attribute=’value’] (e.g., [data-type=’primary’]).
What do *, ^, and $ mean in attribute selectors?
*= matches a substring in the attribute value.
^= matches values that start with a specific string.
$= matches values that end with a specific string.
How do you apply styles to multiple selectors at once?
Use commas to separate selectors (e.g., h1, h2, .my-class { color: red; }).
What are pseudo-classes?
They style elements based on a state or user interaction (e.g., :hover, :nth-child(even)).
How do you style a link when it is hovered?
Use a:hover { /* styles */ }.
What are pseudo-elements?
They act like inserting new elements with CSS, using ::before or ::after.
What do ::before and ::after do?
::before inserts content before an element.
::after inserts content after an element.
What does the descendant combinator (whitespace ) do?
It selects elements inside a parent element (e.g., p strong { color: blue; }).
What does the child combinator (>) do?
It selects direct children of an element (e.g., div > p { color: red; }).
What does the + combinator do?
It selects the next immediate sibling of an element.
What does the ~ combinator do?
It selects all following siblings that share the same parent.
What are compound selectors used for?
To increase specificity by combining multiple selectors (e.g., a.my-class { color: red; }).
