Make paragraphs inside .card red.
Acceptance criteria
- 1.Make paragraphs inside .card red.
CSS Tutorial · CSS Selectors
These 10 tasks go with the CSS Combinators chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “CSS Combinators are used to define relationships between selectors.” Read the chapter.
1.Use a descendant combinatorexercise · easy · 10 min
Make paragraphs inside .card red.
Passes when: Make paragraphs inside .card red.
2.Use a child combinatorexercise · easy · 10 min · practice plan
Target only direct paragraph children of #one.
Passes when: Target only direct paragraph children of #one.
3.Use an adjacent siblingexercise · easy · 10 min · practice plan
Style the span immediately after the paragraph.
Passes when: Style the span immediately after the paragraph.
4.Use a general siblingexercise · easy · 10 min · practice plan
Style every span that follows a paragraph.
Passes when: Style every span that follows a paragraph.
5.Combine two combinatorsexercise · medium · 10 min · practice plan
Target a span that is a direct child of #one and follows a p.
Passes when: Target a span that is a direct child of #one and follows a p.
6.Fix the child combinator used for a descendantbug fix · easy · 8 min
The paragraph is not a direct child in every card.
Passes when: The paragraph is not a direct child in every card.
7.Fix the missing combinatorbug fix · easy · 8 min · practice plan
Two selectors with no space target one element with both.
Passes when: Two selectors with no space target one element with both.
8.Fix the wrong sibling symbolbug fix · easy · 8 min · practice plan
An adjacent sibling uses +, not -.
Passes when: An adjacent sibling uses +, not -.
9.Fix the reversed sibling orderbug fix · easy · 8 min · practice plan
The span comes after the paragraph, not before.
Passes when: The span comes after the paragraph, not before.
10.Fix the over-nested selectorbug fix · easy · 8 min · practice plan
The span is a sibling of the paragraph, not inside it.
Passes when: The span is a sibling of the paragraph, not inside it.
Between them these tasks cover Descendant, Child and Sibling combinators.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.