CSS Selectors

Question 1

What selector can you use to to apply CSS styling to every element on the page

Answer 1

The Universal Selector. e.g. * {
border: 2px solid black;
}

Question 2

What can you think of an HTML document like?

Answer 2

A tree where elements branch out from the Trunk

Question 3

An element is a child of what?

Answer 3

An element is a child of EVERY element wrapped around it, even if that element is several “branches” away!

Question 4

The Tag is like a what on a tree

Answer 4

Trunk

Question 5

What are the immediate branches of the HTML tag or Trunk

Answer 5

Head and Body or it’s children

Question 6

How can you grab direct children—that is, an element that is directly nested inside another element, with no elements in between

Answer 6

> e.g. div > p { /* Some CSS */ }

Question 7

When will certain selectors override others?

Answer 7

if they have a greater specificity value. ul li p { is more specific CSS than just p {, so when CSS sees tags that are both <p> tags and happen to be inside unordered lists, it will apply the more specific styling (ul li p {) to the text inside the lists.

Question 8

What are the two selectors that are more specific than nested selectors?

Answer 8

Classes and IDs

Question 9

How are classes assigned to elements?

Answer 9

with the word class and an equals sign. <div class="square"></div>

Question 10

How are classes identified in CSS

Answer 10

With a dot.

Question 11

When is it a good idea to use an ID

Answer 11

When there is ONE element that needs styling

Question 12

How are IDs assigned

Answer 12

With the word id and the =

e.g. <div></div>

Question 13

How are IDs identified?

Answer 13

With a # sign. e.g. #serious

Question 14

What is a pseudo-class selector?

Answer 14

way of accessing HTML items that aren’t part of the document tree

Question 15

What’s a use case for a pseudo-class selector

Answer 15

you can control the appearance of unvisited and visited links—even links the user is hovering over but hasn’t clicked!

Question 16

What is the syntax for pseudo-class selectors?

Answer 16

selector:pseudo-class_selector {
property: value;
}

Question 17

What pseudo-class selector is used to apply styling to only the elements that are the first children of their parents.

Answer 17

first-child selector

Question 18

What pseudo-class selector is used to apply styling after the 1st element>

Answer 18

nth-child selector

E.g. p:nth-child(2) {
color: red;
}

Question 19

What is the difference between an ID and a class?

Answer 19

An ID can be used to identify one element, whereas a class can be used to identify more than one.