ITP CSS Selectors Flashcards
These are examples of ______.
p .card a:hover ul li
Selectors
Between the curly braces is called…
.card { color: #ff0000; font-weight: bold; }
declaration block
When you see these in a CSS declaration block, these are…
color background-color font-weight text-decoration
Properties
When you see these in a CSS declaration block, these are…
#ff0000 bold none underline 3px solid #00cc00
Values
What does a selector do?
Applies some styles based on a HTML pattern
What kind of selector is this?
ul
Type or element selector
What kind of selector is this?
.card p
Descendent selector
What kind of selector is this?
.warning
Class selector
Read this selector out loud:
li
For all list items
Read this selector out loud:
.featured
For any element with a class of featured
Read this selector out loud:
ul li a
For all links descended from a list item descended from an unordered list
Read this selector out loud:
h1 span .smaller
For all elements with a class of smaller descended from a span descended from an H1
Read this selector out loud:
h1 span.smaller
For all spans with a class of smaller descended from an h1
Read this selector out loud:
p a:hover
For all links in a hover state descended from a paragraph
Read this selector out loud:
p a :hover
For any element in a hover state descended from an a element descended from a paragraph
Read this selector out loud:
a.warning:hover
For all links with a class of warning in a hover state
Read this selector out loud:
div.card.card3
For all divs with a class of card and a class of card3
Read this selector out loud:
div .card.card3
For any element with a class of card and a class of card3 descended from a div
Read this selector out loud:
div .card .card3
For any element with a class of card3 descended from any element with a class of card descended from any div
Read this selector out loud:
div.card .card3
For any element with a class of card3 descended from a div with a class of card