Unit 3.2 CSS

Question 1

Attribute selectors come in handy for styling:

Answer 1

Forms

Question 2

Define “attribute selector”

Answer 2

The CSS “attribute selector” matches elements based on the presence or value of a given attribute

Question 3

DRY CSS stands for:

Answer 3

Don’t Repeat Yourself

Question 4

”>” combinator:

Answer 4

targets a direct child of an element

Question 5

”+” combinator:

Answer 5

targets an element’s immediate(adjacent) sibling

Question 6

”~” combinator:

Answer 6

targets all the specified siblings that follow an element

Question 7

“:first-child” :

Answer 7

represents the first element among a group of sibling elements

Question 8

“:last-child” :

Answer 8

represents the last element in a group of sibling elements

Question 9

Define “pseudo” classes

Answer 9

a keyword added to a selector that specifies a special state of the selected element(s)

Question 10

“:only-child” :

Answer 10

represents an element without any siblings. So targets elements with a single child.

Question 11

“:empty” :

Answer 11

represents any element that has no children.

Question 12

”^” : and write example

Answer 12

“begins with” tells the browser to match a piece of code that’s at the beginning of an attribute’s value.

Question 13

”$” : and write example

Answer 13

“ends with” tells the browser to match a piece of code that’s at the end of attribute’s value.

Question 14

“*” : and write example

Answer 14

“contains” tells the browser to matcha piece of code that can be any part of an attribute’s value

Question 15

When do we want to use these types of selectors? (child, attribute, combinators)

Answer 15

1. When a CMS or framework allows no access to HTML
2. When we are unable to add classes or IDs to elements
3. With dynamic lists or image galleries

Question 16

“:checked” :

Answer 16

pseudo-class selector represents any radio (), checkbox (), or option ( in a ) element that is checked or toggled to an on state.

Question 17

“:disabled” :

Answer 17

pseudo-class represents any disabled element. An element is disabled if it can’t be activated (selected, clicked on, typed into, etc.) or accept focus.

Question 18

Define “:nth-child()” pseudo-class

Answer 18

the “nth-child” matches elements based on their position among a group of siblings

Question 19

With “:nth-child()” how can we target a list of elements starting with the 3rd sibling then every other item from that element?

Answer 19

Using the argument (2n+3)

Question 20

What arguments can we pass to “:nth-child()” to target either all odd siblings or all even siblings

Answer 20

(even) or (odd)

Question 21

“:nth-of-type” :

Answer 21

pseudo-class targets an element based on its position within a parent, but only if it’s a specific type of element.

Question 22

“:nth-last-of-type” :

Answer 22

pseudo-class targets the last to first element based on its position within a parent, but only if it’s a specific type of element.

Question 23

“:root” :

Answer 23

matches the root element of a tree representing the document. In HTML :root represents the element

Question 24

“:target” :

Answer 24

CSS pseudo-class represents a unique element (the target element) with an id matching the URL’s fragment.

Question 25

“:not()” :

Answer 25

pseudo-class is referred to as a negation pseudo-class because it selects everything except the element we specify in the selector.

Question 26

”::first-line and ::first-letter”

Answer 26

pseudo-elements let us target the first line of text and the first character in a line of text.

Question 27

”::before and ::after pseudo-elements” :

Answer 27

let us insert virtual elements before and after an element’s content. These virtual elements are visible to the user and are style-able with CSS, but they do not appear in the source code.

Question 28

The only way we’re able to generate pseudo-elements

Answer 28

is with the “content” property (even if it’s empty)

Question 29

Pseudo-elements do NOT work with

Answer 29

images and form elements