CSS Flashcards
1
Q
Trying to create the dotted line that links between a menu item and a price (restaurant style website) - how would you make this dynamic?
A
Use a div with a dotted border to fill the gap between the description and the price
2
Q
What will the * selector target?
- {
}
A
Everything in the document
It’s possibly not a good idea in production code though as it adds too much “weight” to the browser
3
Q
What does the following selector target?
#container * {
}
A
Any element within a parent element that has the ID container
(Again - not a great technique)
4
Q
What does the following selector target, and why should you avoid it as much as possible?
#container {
}
A
It’s an ID tag, and you should avoid it as it is too rigid, and doesn’t allow for reuse. Try using a tag or a class.
5
Q
What does the following selector target?
.container {
}
A
A class named “container”
6
Q
What does the following selector target?
li a {
}
A
Any anchor (link) within an li element
7
Q
What does the following selector target?
a {
}
A
All anchor tags on a page
8
Q
What does the following selectors target?
a: visited { }
a: link { }
A
The link pseudo class is used to select any anchor that has yet to be visited (i.e. it’s just a link).
The visited pseudo class is used to select any anchor that has been visited.
9
Q
What does the following selectors target?
ul + p {
}
A
The + selector only targets the first adjacent element that matches. I.e. in the given example, only the first paragraph AFTER an unordered list will be affected. (i.e. this is at the same level as the first item - it’s not referring to a child element)
10
Q
What does the following selector target?
div#container > ul {
}
A
The first DIRECT ul decendantS of a div with id container.
NOTE: It does select other UL’s at the top level, not just the first. Also note that colors and things that inherit will appear to not be working because of course if you set the parent colour, the child ones will also get it.
div id="content"
ul --This one gets selected
ul -- This one does not get selected
/ul
/ul
ul -- This one DOES get selected
/ul
/div
11
Q
What does the following selectors target?
ul ~ p {
}
A
Very similar to the + operator, the ~ operator will select any p that is adjacent to the ul. However, unlike +, it will select all of them, whereas the + operator will only select the first one. (note - only p’s that come AFTER the ul).
12
Q
What does the following selectors target?
a[title] {
}
A
Known as an attributes selector, this will only select anchors with an attribute named “title”.
13
Q
What does the following selectors target? Why would this specific example be useful?
a[href=”https://haikusnack.com”] {
}
A
Only selects anchor tags that have a href with a value of https://haikusnack.com
- This could be useful if you wanted links to your own site to have a different colour than all other links. Of course - this is not exclusive to a href - there are many uses, this is just one.
14
Q
What does the following selectors target? Why would this specific example be useful?
a[href*=”https://haikusnack.com”] {
}
A
Only selects anchor tags that have a href attribute that contains SOMEWHERE the value of “haikusnack”.
This is probably more useful than simply using the straight equality operator - since it’s rare that you want to affect a specific url, rather a range - i.e. any link that contains haikusnack within it.
15
Q
What does the following selectors target? Why would this specific example be useful?
a[href^=”http”] {
}
A
This will select all anchor tags with a href attribute that begins with the string “http”. This can be useful for putting an icon on a page before a URL that indicates the link is offsite.
But of course, this can be used to capture any attribute on any tag.
16
Q
What does the following selectors target? Why would this specific example be useful?
a[href$=”.jpg”] {
}
A
This matches any anchor tag with an href attribute that ends with the string “.jpg”.
Could be useful in doing something special with links that are images. NOTE - this can of course be used to match any attribute that you need.
17
Q
What does the following selectors target? Why would this specific example be useful?
a[data-*=””] {
}
A
This is a custom “data-“ attribute selector. You can set the data- to be anything you require. This is useful because the attribute selectors can’t do multiple selection, so rather than doing that - you can add your own custom data attribute and select that. For example - you want to capture .jpg and .png -
Add a data-filetype attribute to the img element. Then give it the value of “image”.
a[data-filetype=”image”] {
}
This can now be used to select any image file type.
18
Q
What does the following selectors target?
a[data-filetype~=”image”] {
}
A
The tilde character can be used to select an attribute with a spaced list of values. For example:
data-filetype=”image external compressed”
[data-filetype~=”external”]
would select this attribute.
19
Q
What does the following selectors target?
input[type=radio]:checked {
}
A
This will only select a radio type of button that has been checked.
20
Q
What does the :before and :after selectors do?
A
They produce content before or after the selected element.
i.e.
p:after {
content: “stuff”;
}
This would put the word “stuff” after the content WITHIN the p tag. NOTE: It does not put it after the end p tag.
21
Q
What does the following selectors target?
div:hover {
}
A
It selects any div element that the cursor is currently hovering over.
22
Q
Which is better to use?
border-bottom: 1px solid black;
or
text-decoration: underline;
A
border-bottom - it looks much better
23
Q
What does the following selectors target?
div:not(#container) {
}
A
Selects all div’s that do not have the id container
24
Q
What does the following selectors target?
p::first-letter {
}
A
The first letter in a paragraph
NOTE: This is called a pseudo element selector
25
What does the following selectors target?
p::first-line {
}
The first line in a paragraph.
26
What does the following selectors target?
li:nth-child(2) {
}
Note: this is not 0 based - second element is indexed by 2!
Selects the li element that is the 2nd child. Note - it's not selecting the 2nd child element of an li - it's selecting the second li element that is a child.
ALSO NOTE: if there is say a h1, before the p. And we are looking for the second child, and the p is the second child - it doesn't matter that the h1 was a child. It will still be selected.
27
What does the following selectors target?
li:nth-last-child(2) {
}
Note: this is not 0 based - second element is indexed by 2!
Selects the li element that is the 2nd to last child. Basically works the same way as li:nth-child - but works it's way back.
28
What does the following selectors target?
ul:nth-of-type(3) {
border: 1px solid black;
}
Basically the third of any type of element that it matches.
NOTE: The curious thing about this selector is that it seems to work at the top level. If there are three UL's, and even if the first one as it's own list of 3 UL's contained within it - only the outer UL will get the border box. This indicates it's not selecting the internal ones.
29
What does the following selectors target?
ul:nth-last-of-type(3) {
border: 1px solid black;
}
Basically the third of any type of element that it matches - but starting from the bottom of the document.
30
What does the following selector target?
ul li:first-child {
border-top: none;
}
Lets us target the first child of the elements parent. i.e. the first li in every ul.
Note: This particular selector (ul li:first-child) will target all first child li's regardless of level in the document).
31
What does the following selector target?
ul li:last-child {
color: green;
}
Lets us target the last child of the given elements parent. I.e. the last li in every ul.
32
What does the following selector target?
div p:only-child {
color: red;
}
Lets you target elements that are the only child of the parent. So, given the example, if there are two p's in a div, neither will be targeted. But if there is only one p, then it will be targeted.
33
What does the following selector target?
li:only-of-type {
font-weight: bold;
}
For example, if we want to target all li elements that do not have any siblings within it's parent container. i.e. only single list items. This will only select the li if it is the ONLY li child of it's parent. However, other elements do not affect whether this will select the li (unlike only-child)
ul > li:only-of-type
34
What is the difference between the selectors "only-of-type" and "only-child"?
They can appear quite similar.
Only-of-type will only select elements that are of that type, if they are the only child in the container OF THAT TYPE. This means if there are other children of different types, it will not affect the selection.
Only-child will only select elements that of that type if they are the only child in that element OF ANY TYPE. For example, if you have a p and a span element in there, they aren't the only child - so it will not be selected.
35
What does the following selector do?
p:first-of-type {
color: orange;
}
Selects the first sibling of type 'p'.
NOTE: this means if we have multiple p siblings - then each will be selected
36
Elements with the position attribute "absolute" are...
taken out of the flow of the page.
37
What is the default position value of a html element if it is not specified?
static
38
What are the four values that a float attribute can have?
left, right, none and inherit.
39
If we used absolute positioning on a container, and had an avatar inside that container that was set to position "absolute" - what would happen to any text if that container was resized?
It would probably run over the image. Since there is no float, the text will not reflow around the image.
40
If an element has clear:both set, what does this mean?
It will not float up next to any elements that have been marked float left / right.
41
What are the valid values for clear?
both, left, right, none (technically inherit too, but not supported in IE?)
42
If you have two images floated right, what happens if the second one is "clear:right"
Rather than sneaking up against the first image, it will slide in below it.
43
What happens when a container contains only elements that are floated?
The Div will collapse - which can cause some weird formatting issues.
One way to diagnose it is give the container a different background color - and you may see the collapsed element highlighting where the issue is.
44
How do you fix the collapsing div issue?
You need to make sure you have content inside of the div that isn't floated, or use a clearfix (or both).
45
What will the following target?
nav > ul > li
```
All of the first level li's in the first level ul.
nav
ul
li
li
li
```
46
Given the following css rule:
nav > ul > li {
color: green;
float: left;
}
Why are sub li's (i.e li's that belong to ul's inside of top level li's) green, but they don't float left?
Because color is inherited, but float's are not. The rule is not actually applying directly to the sub li's of a top level li. It's simply inheriting the value.
47
If you create a menu within a nav element, and the nav element doesn't cover all of the menu, why is this, and what can you do?
It's likely that all the content is floated, so the outer most parent doesn't extend to fit the content. To fix it, you can apply a clearfix to a pseudo element within the nav bar. Usually to the item that is one below the collapsing container. This effectively puts something in the parent container that isn't floated, and therefore it extends to cover it.
```
nav ul::after {
content: '';
display: block;
clear: both;
}
```
48
What is the difference between inline, inline-block and block?
Inline is an element that takes up space within a line of text, it doesn't affect the surrounds and can't be given dimensions as such.
inline-block, like a block element can have dimensions - but it doesn't take up the whole line. So you can give it height and width, but doing so doesn't fill the entire line, and doesn't push it out of the current line.
Block takes up the entire line - if a word, that was inline was changed to block, the word would move to it's own line, and take up the entire width of the newline, to a height specified by the CSS rules.
49
An object that is "absolute" positioned is positioned relative to...
The nearest POSITIONED ancestor
50
Why might you use "position: absolute" on a sub menu item?
Because, if the menu is in a nav, and you are positioning the entire nav bar to encompass all of the nav elements, the navbar may extend to the very bottom of the longest menu item.
By making the menu items position: absolute, then you take them out of the flow, meaning the nav bar will extend to below the top level of the menu, but no further.
51
What is the following targetting?
nav ul li:hover > ul
It is targetting any unordered list that is a direct decendant of an li element that is in a hover state.
So for example, if you are hovering over a top level menu, this will target the probably "invisible" sub menu - which you can then display using display:block.
NOTE: this will affect any li element within a ul - because it's not specifying a direct decendant relationship with the first ul. This is actually what you want, but it means you don't have to write CSS for each level of nesting to get the menus to display.
52
If you have a css, such as
nav ul ul ul {
left: 100%;
top: 0;
}
But the UL doesn't just move to the left, it also moves up - what's going wrong?
It's likely that the immediate ul above this ul doesn't have a position property set. If that's the case it will be positioned to the next ancestor that has a position property. So basically
nav ul ul li
needs to be position relative or something similar. NOTE: (I'm targetting the li, because that is actually the direct ancestor of the nav ul ul ul - the ul is inside the li).
53
If you have an item that is position "relative", what does this mean for any items within it that are absolute positioned?
They will be positioned relative to the parent. The parent will of course be positioned relative to itself.
54
If you have a div B which is inside div A, and item A has a position (say relative).
What happens when you give div B the property top: 100%.
Interestingly, the top position on the inside div will move it 100% the height of the CONTAINER. Not the height of itself. This is important - as it may not be what you expect!
VERY USEFUL WHEN DESIGNING MENUS - SO YOU CAN MOVE A SUB MENU DOWN BY THE HEIGHT OR WIDTH (left: 100%) OF THE PARENT CONTAINER.
55
What does ARIA stand for?
Accessible Rich Internet Applications
It refers a CSS specification that allows for touch / multi input devices to work across devices (i.e. mouse hover working on touch events)
56
ARIA is only in the recommendation phase, is there an issue with adding it to the HTML?
No - because the browsers will gracefully ignore it if they can't support it.
57
How do you add support for touch when using drop down menus to a HTML document with new devices such as the windows 10 devices?
At the level in the UL that the drop down menu occurs, add the following to the anchor tag (NOT THE LI).
aria-haspopup="true"
This is simply a HTML attribute.
58
How do you make an ordered list an alphabetical one?
Not so much a CSS trick, rather in the html, the ol element will take a "type" attribute. You can give it 'a' for lower case alphabetical, or 'A' for uppercase. Same goes for roman numerals. "i" or "I".
59
You've added this CSS, but the nav bar fails to have a grey fill, why?
nav {
position: relative;
background-color: rgba (0, 0, 0, 0.8);
}
There is a space between rgba and the brackets. Apparently CSS requires that there be no spaces.
60
Does positioning cascade?
No
61
"Position: relative" means relative to what?
Itself. Moving the object will move it relative to where it would be in the normal flow of things.
62
If you set "position: relative" on an element, but you do not touch the left/right/top/bottom values, what effect does it have on the position?
Absolutely none. It would be in the same position as if you didn't add that information.
63
If a div is set to "position: relative" and you set the "top" value to 10px; where will it move to?
10px DOWN from it's current position. Relative to itself in other words.
64
What are the two main side effects of using "Position: relative" on an element, OTHER than the fact you can move it relative to it's own position?
1. The z-index attribute is now useable
2. It limits the scope of child elements within the "position: relative" element. Any element that is a child of a "position: relative" element, can be ABSOLUTELY positioned within that block
65
Position: absolute allows you to position an element...
anywhere you want, using top/left/right/bottom
66
What are two caveats with the "position: absolute" attribute?
It is relative to the next container up the chain that is either "position: relative" or "position: absolute".
It is taken out of the flow - and does not affect, nor can be affected by elements around it.
67
If an element is positioned using "Position: absolute", and it is not contained within an element that has either "absolute" or "relative" positioning, where is it's positioning set from?
All the way to the top from the HTML element.
68
Position: fixed - is positioned relative to what?
The viewport
69
What are the four position options?
Static (default)
Absolute
Relative
Fixed
70
What two positioning method result in the object being removed from the flow?
Absolute and fixed
71
Is an img element a block or inline element?
They are both. They flow like text (i.e. inline), but have dimensions, (i.e. block). They are inline-block elements.
72
How would you make a span element emulate the behaviour of an image?
Make it:
display: inline-block
73
Point size refers to the height of text (font) from which reference points?
The top of the highest ascender, to the lowest descender (i.e. the bits above and below the base line).
74
1em is meant to represent what?
The height and width of an uppercase M (based on the current font).
75
In terms of old school font faces, what is the equivalent term for "line-height"?
leading (as in lead metal, based on the practice of using led separators). This is important as Photoshop and other tools still use this term to refer to line height.
76
If you have a font that is 12 pixels. And you change the line height to be 16px. What does this actually do?
It adds to pixels to the top and to the bottom, to give a TOTAL line height (including the font) of 16 pixels.
77
What are the names of the four "edges" in the CSS box model?
Content edge - the edge right up to the content
Padding edge
Border edge
Margin edge
78
If there is no styling applied to a CSS box, where would each of it's edges be located?
If there was no styling, they would all be on top of each other. However, most browsers provide their own user agent styling's and so there is usually a margin/border etc.
79
What does "box-sizing: border-box" do?
If you have a 100px wide box, and add padding: 20px, this will create a box 140px wide.
By using border-box "box-sizing" mode, you retain the original 100px, and the size is shrunk by 40px to implement the padding.
80
What are some of the border styles that are possible in CSS?
```
solid
dashed
dotted
inset
double
grooved
outset
```
81
Does the width of a box add to the box size?
Yes - a 2px border will add four pixels to the width.
82
Margin can be used to move a box in a negative direction, true or false?
True
You normally use the margin to create whitespace between two boxes, however, using a negative value, you can actually make boxes come together.
83
text-indent adds an indentation where?
To the first line of the box.
84
Changing the width and height of an inline-block, does what to the line height?
It will override that value, and force the lines further apart.
85
What does display: flex do?
It turns any first level children of a container into flexible items that share the available space.
NOTE: Supported by almost all browsers, however, pretty much only the most current generation.
86
What does the css "table" and "table-cell" properties of display do?
.container { display: table }
.bucket { display: table-cell }
Essentially turns containers into a table - very useful for displaying content of uneven height.
87
Why is it that when you add a background to an image element, that a small margin appears at the bottom of the box?
You may think it's a margin - or even padding. It's not. It's the space for the descender, because an image is an inline element, it is expecting to be in a sentence - and therefore behave like a font - therefore it has room for the descender.
88
How do we get around the fact that images are inline elements, and therefore don't always behave how we would expect?
Set them as block elements.
89
If you have an image that is set to "display:block" and "position:relative" and you change the position to "top: -50px;", what happens to the text surrounding the image?
Nothing - the image moves relative to it's original position (position:relative) - but the text that might be around it continues to flow around the ORIGINAL position of the text. This means the image may in fact overlap the text around it.
90
What is the most frequent reason for setting an elements position to "relative"?
To make it the reference point for any contained elements to be moved from.
91
If a child box is set to "position:absolute" and is inside a container with position that is set to anything other than "static" - how is the child box moved?
Relative to the parent. It doesn't actually matter if the parent is absolute or relative, it will move relative to the top left corner of the parent that has position.
NOTE: This can mean that the child element may be rendered outside of it's immediate parent if that parent has no positioning, but it's parent does. This is because the child will be positioned based on the first ancestor with a position value.
92
There is a new position type, other than static, fixed, relative and absolute, what is it?
sticky - it will work like an absolutely positioned element, until it hits the edges of the viewport, where it works like a fixed positioned element.
NOTE: Limited browser support!
93
Why is the css clearfix preferable to the standard of introducing an empty div to the container?
Because adding an empty div is poor semantics, and using CSS allows us to keep it out of the HTML.
94
Rather than using a clear fix, what is the more modern approach to fixing the issue?
You can use "display: flex" - it will automatically size the box appropriately. However, support is thin.
95
What is the difference between a pseudo class, and a pseudo element?
A pseudo class alters the display or behaviour of ALL the contents within an element box.
A pseudo element alters the display or behaviour of a certain part of of the contents within the box.
96
What is the list of pseudo elements?
```
::before
::after
::first-letter
::first-line
::selection
::backdrop (pretty much unsupported)
```
97
What is one interesting side effect of using the pseudo element ::after/::before to add content into a web page?
It cannot be selected by the user - so if you use them to add quotes, only the text within will be selected with a drag and not the quotes.
98
If you are creating a drop letter (i.e. making the first letter of an article large...) what css pseudo element would you use for this?
The ::first-letter
```
.container::first-letter {
color: red;
font-size: 2.7em;
float: left;
line-height: 0.9em;
padding-right: 3px;
}
```
The float:left is pretty important, makes the content float around the the first letter and gives it that 'embedded look"
99
How would you make the highlighted text on a screen change color for emphasis? For instance, on social media sites, people like to cut and paste text, you may want to highlight this in a unique way.
blockquote::selection {
background-color: aqua;
}
NOTE: There are only a few different options with the selection pseudo selector, and if you need to use it in firefox, you will need the -moz- bit at the front. Check the docs.
100
What CSS style can be used to have text flow around the outside of a circle, instead of a box?
shape-outside: circle();
Instead of flowing around the object like a box, it will actually used the specified shape. The good news is, even if it isn't supported, the default fallback is probably going to be okay.
NOTE: This is not widely supported, but it is in Chrome. (-webkit-shape-outside
101
How would you make sure a css file only loaded based on a media query?
Use the media attribute of the link tag.
link rel="stylesheet" type="text/css" media="only screen and (min-width: 50px) and (max-width: 500px)" href="css/screen_layout_small.css"
102
How would you make IE 7 and 8 use HTML5 elements?
You need to load the google html5shiv
103
When producing a mobile website, you should prevent the browser from trying to scale the website - how do you do this?
Use the meta tags to instruct the browser to keep a one to one scale.
104
In the meta tag, you can prevent the browser from scaling the content when it loads (useful for mobile). What do the following two attribuets do?
maximum-scale=1.0, minimum-scale=1.0,
They are part of the parameters for the content attribute of the meta tag. They are optional - but what they do is prevent scaling on SOME web browsers when the orientation is changed (horizontal to vertical).
105
If you set a font size in the body
body {
font-size: 15px;
}
What effect does using 2em for a font size have later on?
It will double the font based on the base size. Which has been set in body as 15px. Therefore 2em is 30px;
NOTE: There maybe some issues that occur should a different font be set in the hiearchy between the base and the use of font-size.
106
What is the difference between:
div.cta { color: blue; }
and
div .cta { color: blue; }
div.cta will target any div WITH the class "cta".
div .cta will target any item that has the class "cta" WITHIN the div
107
What are two ways you could add an arrow to a link using css?
You could either use somethign like font awesome, where you use an i element to embed the font / icon into the HTML.
Otherwise, you could use the background property of the a element. You can also use css sprites in this case to change the color on rollover.
108
You have a background-color element, set by using rgba (0, 0, 0, 1); But it isn't working, what could the issue be? The inspector shows that it's there, but it's greyed out, so not being applied?
There is possibly a space between the function rgba and the first bracket.
109
Is it okay to have multiple footer tags within a single page?
Yes, the footer tag is designed to be positioned as a footer for it's nearest ancestor section / div. For instance, you can have a footer for the whole page, but you can also have footers for each article or blog post within that same page.
110
You want to center a block of text in the footer, and you have vertically centered it by making the containing div a "display: table-cell; vertical-align: middle" - but when you set that div to center using "margin: 0 auto" it doesn't work. Why?
You can't have a table-cell center with margins like this. You will need to contain the cell within another div to get the effect.
Also - for margin: 0 auto; to work, you must set the width.
111
If you have a textarea, what is the problem with setting rows and cols through CSS?
you can't, you have to use height and width. But if you want to approximate cols and rows, you can use 'ems to set the height. That way you are setting the height and width by the width of a character, which is very similar.
112
Given a div that you have to highlight, as well as some of the contents, it may be tempting to use jQuery to highlight each element that you have to toggle on - but what is a more efficient way of doing this with CSS doing most of the heavy lifting?
You can use jQuery to toggle on the highlight for the parent container. Say a div with the class "event".
.event { background-color: red; }
But then instead of explicitly highlighting the containing text, you can just have more CSS which is only enabled when the parent class is active (i.e. during that hover event)
.event .mytext { color: white; }
113
What are the three ways of adding a styles to a page?
inline,
embedded / internal,
linked / external
114
What is a pseudo class?
It's like a class, but is not in the markup itself. Pseudo classes are defined by first specifying the selector, then a colon, then the pseudo class name.
115
What is CSS grouping?
It's when you use a number of selector names in a comma seperated list in order to apply one set of rules to all of them.
h1, h2, h3 {
}
NOTE: Benefit - can help memory usage
116
How would you prevent a DIV from wrapping on resizing, when the resize can't fit all the floated divs on the same line?
Use a container that has a minimum size to wrap them. The div will never go below that size, thereby never triggering the wrap in the child divs.
117
What is an ID selector and how is it used?
It is a keyword specified on a HTML element with the attribute ID. It is referenced with a selector using the # character. There can only be one per page.
118
What is a class selector and how does it differ from ID selectors?
Class selectors are similar to ID's, however they are referenced using the '.' character instead of '#'. They can also appear multiple times within the context of a page.
119
What are child selectors and how are they used?
Child selectors separate two selectors, i.e. div and a span:
div > span
The > indicates that we are looking for span's that are direct children of div's.
120
What are the different keywords used to change dimensions in CSS?
```
height
width
min-height
min-width
max-width
max-height
```
121
What are the various types of value that can be passed to a dimension keyword (i.e. height width)?
length (px)
length (%)
auto
inherit
122
What are the components of the CSS Box model?
margins
borders
padding
content
123
How do you restore the default properties of a CSS element?
You can't really do that - but you could use the initial property which resets the value to the initial value (not the default value) of an attribute. NOTE: Does not work in i.e.
124
What is the purpose of pseudo elements?
Pseudo elements are created using a double colon (unlike pseudo selectors which uses one. ) i.e. p::after
They are used to add special effects to some selectors and can only be used on block level elements.
::first_line
::first_letter
::before
::after
125
How are block level and inline elements different?
Block elements have a br before and after them, and they will default to taking the entire width of the screen.
Inline elements only take up the room that they require on a line, cannot accept width and height properties and does not force line breaks.
126
What is the purpose of the z-index and how is it used?
It specifies the stacking order of the elements. The value can be any integer (negative and positive), with higher numbers placing the element higher in the stack.
z-index follows the following rules:
auto: sets the value to value of parents
number: orders the stack order
initial: sets value back to default: (0)
inherit: inherits from parent value
127
What is the technique called, by which you prepare a HTML file such that it degrades gracefully from full JS support, to just css, to no css and no JS (and continues to work)?
Progressive enhancement
128
How do you select every second child of a specific type - making sure you don't select the first one?
p:nth-child(2n + 0)
If you start at 1 - then it will select the first one.
129
What's the difference between nth-child and nth-of-type?
They are almost the same - however, nth-of-type ignores any previous children that aren't of that type. So if we are looking for the second p in a div. And there was a h1, then a p, then a second p. The nth-child would get the wrong one. It would count the h1 as one of the children (even though it's not a p).
130
How can you avoid FOUC?
You can put the web content within a div that has a specific class. i.e. 'no-fouc'. For this class, the container is set to display none.
Once the DOM has loaded, you remove the class - and the now styled content is displayed.
131
What is the difference between observer and pub/sub?
They are often talked about differently - but the biggest difference appears to be in the way the coupling between objects occurs.
In observer, teh object (the subject) - itself takes a reference to another object that has an update method. When an event occurs in that object, it sends to all observers.
In pub sub - a centralised object (possibly a singleton) - will take a reference to any objects / methods that are listening for specific events.
Other objects can fire events - but do so through the pub/sub objects.
So in observer the relation ship is observer registers with subject.
In pub sub The observer AND the Subject register with a pub sub object.
Observer is useful in cases where you might wont to be more specific about who gets the messages.
Pub/sub is more of broadcasting mentality.
