CSS Selectors

Question 1

Combining selectors?

Answer 1

h1, h2, h3, h5{
font-family: sans-sarif;
}

Question 2

Descended selector?

Answer 2

footer p{
font-size: 13px;
}

Descended selector: The p element is in the footer element
Only applies to that <p> element
</p>

Question 3

Refers to id

Answer 3

#

Question 4

Refers to class - Class can be used more than once, preferred method

Answer 4

.related

Question 5

Pseudo class syntax?

Answer 5

li:first-child{}

First-child is an example of a pseudo class since it does not exist in the HTML
A list of pseudo classes can be found on the MDN reference page

Question 6

Pseudo class reference last child

Answer 6

li:last-child{}

Question 7

Pseudo class reference second entry

Answer 7

li:nth-child(2){}

Question 8

Pseudo class reference odd entries in list

Answer 8

li:nth-child(odd){}

Question 9

What does it do?

article p: first-child{}

Answer 9

This would not do anything at all.

Rather use: article : first-child{}

Question 10

What modes can we use for anchor element?
+ syntax
+ order

Answer 10

a{} Style link

ALWAYS USE THIS ORDER:

a:link{} Styling the link, overrides previous
a:visited{} If it has been visited
a:hover{}
a:active{} If it is being pressed

Question 11

Chaining pseudo classes and refer to last child only

Answer 11

nav a:link:last-child{}

‘Link’ here is the first state of the anchor element. It refers here to the last element of all anchor tags within the nav tag.

nav
<a>Blog</a>
<a>Challenges</a>
<a>Flexbox</a>
<a>CSS Grid</a>
nav

Question 12

Pseudo element first letter

Answer 12

Pseudo elements

It is possible to refer to just the first letter in an element with pseudo elements, you write the pseudo element with ::

h1::first-letter{}

Question 13

Pseudo element first line

Answer 13

p::first-line{}

You can highlight the complete first line of a paragraph for example

Question 14

This is how you refer to a pseudo element within a sibling

Answer 14

h3 + p::first-line{}

When there’s a < p > element straight after an < h3 > element it will color the first line of that < p > element

Question 15

Places the content straight after the last child within that element, so in this after the last character in h2

Answer 15

h2::after{}

Question 16

Pseudo element absolute positioning

Answer 16

h2::after{}

Set the h2 pseudo element to position:absolute

h2{}

Set h2 element to relative. This way you can position the pseudo element relative to the main element

Question 17

What happens when not using absolute positioning in pseudo element?

h2::before{
position:absolute
….
}

h2{
position:relative
}

Answer 17

When not using absolute positioning, the element will be placed before the text

Question 18

What does this do?

article :first-child {
color: red;
}

Answer 18

Code looks at sibling childs of article. This could be anything: < p >, < li >, etc

It then addresses the FIRST CHILD OF THOSE SIBLING childs and paints them red. This could be first letter italic text < em > or bold text < strong > within that <p> element in the article.

Or a first list entry of the lists within that article for example</p>

Question 19

Set hover pseudo class on button

Answer 19

.button:hover {
color: #000;
background-color: #fff;
}

Question 20

What does ::before do?

Answer 20

In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

Question 21

What to do when needing a global reset (0px margin and padding)?

Answer 21

*{
margin:0px;
padding:0px
}

Question 22

Problem: When having two consecutive grids and you want margin-bottom so you can split them, the margin will be added to all grids which you don’t want. How to resolve?

Answer 22

Set
.grid:last-child{margin bottom: 0}
Or
.grid:not(:last-child){margin bottom: 9.6rem}