CSS Flashcards
Trying to create the dotted line that links between a menu item and a price (restaurant style website) - how would you make this dynamic?
Use a div with a dotted border to fill the gap between the description and the price
What will the * selector target?
- {
}
Everything in the document
It’s possibly not a good idea in production code though as it adds too much “weight” to the browser
What does the following selector target?
#container * {
}
Any element within a parent element that has the ID container
(Again - not a great technique)
What does the following selector target, and why should you avoid it as much as possible?
#container {
}
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.
What does the following selector target?
.container {
}
A class named “container”
What does the following selector target?
li a {
}
Any anchor (link) within an li element
What does the following selector target?
a {
}
All anchor tags on a page
What does the following selectors target?
a: visited { }
a: link { }
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.
What does the following selectors target?
ul + p {
}
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)
What does the following selector target?
div#container > ul {
}
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
What does the following selectors target?
ul ~ p {
}
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).
What does the following selectors target?
a[title] {
}
Known as an attributes selector, this will only select anchors with an attribute named “title”.
What does the following selectors target? Why would this specific example be useful?
a[href=”https://haikusnack.com”] {
}
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.
What does the following selectors target? Why would this specific example be useful?
a[href*=”https://haikusnack.com”] {
}
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.
What does the following selectors target? Why would this specific example be useful?
a[href^=”http”] {
}
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.
What does the following selectors target? Why would this specific example be useful?
a[href$=”.jpg”] {
}
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.
What does the following selectors target? Why would this specific example be useful?
a[data-*=””] {
}
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.
What does the following selectors target?
a[data-filetype~=”image”] {
}
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.
What does the following selectors target?
input[type=radio]:checked {
}
This will only select a radio type of button that has been checked.
What does the :before and :after selectors do?
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.
What does the following selectors target?
div:hover {
}
It selects any div element that the cursor is currently hovering over.
Which is better to use?
border-bottom: 1px solid black;
or
text-decoration: underline;
border-bottom - it looks much better
What does the following selectors target?
div:not(#container) {
}
Selects all div’s that do not have the id container
What does the following selectors target?
p::first-letter {
}
The first letter in a paragraph
NOTE: This is called a pseudo element selector
What does the following selectors target?
p::first-line {
}
The first line in a paragraph.
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.
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.
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.
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.
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).
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.
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.
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
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.
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
Elements with the position attribute “absolute” are…
taken out of the flow of the page.
What is the default position value of a html element if it is not specified?
static
What are the four values that a float attribute can have?
left, right, none and inherit.
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.
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.
What are the valid values for clear?
both, left, right, none (technically inherit too, but not supported in IE?)
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.
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.
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).
What will the following target?
nav > ul > li
All of the first level li's in the first level ul.
nav
ul
li
li
liGiven 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.
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;
}
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.
An object that is “absolute” positioned is positioned relative to…
The nearest POSITIONED ancestor
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.
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.
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).
