11. Calculate the specificity of the following selector:
```ul#alpha li.visited ```
- 13
- 22
- 103
- 112
12. ```nth-last-of-type``` is a pseudo element that matches the last sibling from a list of siblings of specific type inside a parent.
- TRUE
- False
13. For the given HTML code, irrespective of the effect on other list elements, which of the following will be a valid selector to ensure “Little” is coloured “red”? Select all that apply.
< body>
< ul>
< li class="red">Little
< li>Lemon
< li>Restaurant
< /ul>
< /body>
- ul > .red{ color: red; }
- li > red { color: red; }
- #red { color: red; }
- .red{ color: red; }
- li { color: red; }
14. Which of the selectors below will select < div> tags with a title attribute in CSS?
- div[title]
- div#title
- #title
- div.title
Knowledge check: CSS effects
15. Which of the following properties is used to set the length of time in seconds for one iteration of animation in CSS?
- animation-delay
- animation-timeline
- animation-timing-function
- animation-duration
16. What are the benefits of using preprocessors such as SASS and SCSS? Select all that apply.
- They allow for re-use of values across CSS rules
- They reduce the amount of CSS to maintain
- They provide audit functionality
17. The ______ suffix is used to define variables inside SCSS files used for CSS.
- @
- $
- #
- No special characters are needed
18. What styling property will you apply if you want to rotate an object 60 degrees in counter clockwise direction?
- rotate: 60deg
- transform: rotate(-60deg)
- transform: rotate(60deg)
- rotate: -60deg
Shuffle Q/A 2
19. You cannot apply more than one property inside a single ‘transform’ declaration rule in CSS.
- True
- False
20. Is this valid code for an animation-name ‘animate’?
@keyframes animate {
0% {
transform: rotate(60deg) scale(0.8);
}
25% {
transform: rotate(90deg) scale(1.2);
}
}
- No, the animation transition is not fully defined
- Yes, this should work fine
- No, you cannot use the transform inside @keyframes