CSS

Question 1

What are CSS Combinators? List the 4 available

Answer 1

Additional CSS Selectors that combine with an initial CSS Selector
• Descendant selector (space)
• Child selector (>)
• Adjacent sibling selector (+)
• General sibling selector (~)

Question 2

What is a CSS pseudo class?

Answer 2

Defines a special state of an element, for example when an element is hovered over (:)

Question 3

What is a CSS pseudo element?

Answer 3

A CSS pseudo-element is used to style specified parts of an element, for example styling the first letter or line of an element (::)

Question 4

What is CSS specificity?

Answer 4

A set of rules that determine which style declarations are ultimately applied to an element.

Question 5

What is the CSS specificity hierarchy?

Answer 5

• Inline styles
• IDs
• Classes, attributes and pseudo-classes
• Elements and pseudo elements

Question 6

What are CSS Modules?

Answer 6

CSS files that can be imported into JS files that are scoped locally as opposed to globally, by using module loaders and giving class names unique identifiers

Question 7

How can you enforce global styling in CSS modules?

Answer 7

Using the global keyword, for example:

:global .button {
…
}

Question 8

What is composition in CSS modules?

Answer 8

You can reference classes from the same file or external dependencies and get all the styles applied to the element. For example;

.background-red {
background-color: #ff0000;
}

.button {
composes: background-red;
font-size: 12px;
}