Selectors

Question 1

Type selector vs. Universal selector

Answer 1

Type selector selects all elements by their tag

Universal selector selects all element

Question 2

What symbol does the universal selector use?

Answer 2

*

Question 3

Class attribute

Answer 3

Applied to HTML code, it is used to select things in CSS
For example:
< p class = “brand” > Shoe Company < / p >

Question 4

How do you select something from the class attribute in CSS

Answer 4

Dot then the text
For example:
.brand {

}

Question 5

How would you add multiple classes to an HTML element

Answer 5

Separate them with a space
For example:
< p class = “ green bold “ >Green and bold text< / p >

Question 6

Class vs. Id attribute

Answer 6

Class can be used for multiple elements

ID can only be used for one element

Question 7

How do you select an element’s ID for CSS

Answer 7

Put a # in front of the name

Question 8

How do you use the <em>attribute selector</em>

Answer 8

Surround the attribute you want to target with brackets in CSS
For example:
[href] {
    color: magenta;
}

Question 9

How do you select attributes with a specific value?

Answer 9

type[attribute*=value}
For example:
<em>For < img src='summer' /></em>
img[src*='summer'] {
height: 50px;
}

Question 10

What are pseudo-class selectors?

Answer 10

A line of code that changes the appearance of certain elements for user interactions
For example:
An anchor element turning purple after you click on it

Question 11

How do you attach a pseudo-class to a selector?

Answer 11

Put the element name, colon, and then the name of the pseudo-class
For example:
p:hover {
   background color: lime;
}

Question 12

What does the hover pseudo-class do?

Answer 12

Changes something when you hover over it with your mouse
For example:
If you hover over an anchor it will change color

Question 13

How to give an element a background color?

Answer 13

With the <em>background-color:</em>

Question 14

Order of specificity for CSS (highest to lowest)

Answer 14

ID, class, type

Question 15

What is chaining?

Answer 15

Combing CSS selectors

Question 16

What does the <em>descendant combinator</em> allow you to do?

Answer 16

Allows you to select elements nested inside of other elements
For example:
.main-list li {

}

Question 17

How do you write multiple selectors for one rule?

Answer 17

Separate the selectors with a comma
For example:
h1,
.menu {
  font-family: Georgia;
}