CSS Selectors

Question 1

What is universal selector?

Answer 1

• {
  color: black;
  }
  Selects every possible element on page.

Question 2

What is element selector?

Answer 2

Selects everything of a given type.

img {
width: 100px;
height: 200px;
}

This will select all img elements.

Question 3

How do you combine multiple selectors?

Answer 3

Use a comma.
h1, h2 {
color: magenta;
}

Question 4

How do you write an ID selector?

Answer 4

Use # along with the id name. ID specific to one element ID.

#search {
     color: blue;
}

This will style the element with the ‘search’ id only.

Question 5

What is a class selector?

Answer 5

.tag {
color: red;
}

You can create a class on an element to specify/pinpoint styling (can be used on any element).
For example, if you have multiple <span> elements but only want to style certain ones, you can add a class tag to those <span class="tag">. then you would write
</span></span>

Question 6

Write a descendant selector for all anchor tags nested in a list styled with text color blue with a wavy underline.

Answer 6

li a {
color: blue;
text-decoration: wavy underline;
}

**A space is nested but a comma will select both ‘li’ and ‘a’ elements.

Question 7

Write an adjacent or combinator selector for a paragraph immediately preceded by a heading.

Answer 7

h1 + p {
color: red;
}

Question 8

Write a direct child combinator to select only li’s that are direct children of a div element.

Answer 8

div > li {
color: white;
}

Question 9

Write an attribute selector where all input type text is 300px wide and font color yellow.

Answer 9

input [type=”text”] {
width: 300px;
color: yellow;
}

• *Applies to all attributes even class attributes.
• **Check attribute selector MDN for variations.

Question 10

What are Pseudo Classes? Give examples.

Answer 10

Keyword/modifiers added to a selector that specifies a special state of the selected element(s).
\:active
\:checked
\:first
\:first-child
\:hover
\:not ( )
\:nth-child ( )
\:nth-of-type ( )

Question 11

Style a button element that when hovered over the color changes to pink.

Answer 11

button:hover {
color: pink;
}

Question 12

Style the item class with every other being green background with yellow text.

Answer 12

.item:nth-of-type(2n) {
background-color: green;
color: yellow;
}

Question 13

Define Pseudo Elements and give examples.

Answer 13

Keywords added to a selector that lets you style a particular part of selected element(s).
\::after
\::before
\::first-letter
\::first-line
\::selection

Question 14

Define ‘The Cascade’

Answer 14

The order your styles are declared in and linked to matters. If multiple styles are declared in a sheet the styling follows the latest. Also if there are multiple style.css sheets the last on ‘link’ is followed.

Question 15

What happens when you have conflicting styles targeting the same element?

Answer 15

Specificity will dictate which style will ultimately be applied to the page.

Remember ICE (ID>Class>Element)!!

Question 16

What is the hierarchy of specificity in regards to selectors? Specificity score?

Answer 16

ID > Class > Element

I-C-E

Question 17

What are Inline styles?

Answer 17

Inline styles are used within the html doc and takes highest priority. Generally not best use.

Question 18

What does !important declaration do?

Answer 18

!important takes highest priority by ignoring specificity. Not best use.

Question 19

What is CSS inheritance?

Answer 19

Some CSS properties will be inherited by child elements. For instance, if I style the body element, everything within the body will be styled as such.

Question 20

What is CSS inheritance?

Answer 20

Some CSS properties will be inherited by child elements. For instance, if I style the body element, everything within the body will be styled as such. Inheritance will be from the closest parent element that is styled.

Question 21

How do you force certain elements to inherit?

Answer 21

button, input {
color: inherit;
}

**Not all properties are inheritable.