'how can i make the last <div> green?

I'm really new to HTML and CSS and I have just studied nesting where I've got an issue with one of the css challenges for beginners. Here are the challenge requirements:

  1. to make the word (title) red.
  2. to make the word (child title) blue.
  3. to make the word (paragraph content) green.
  4. to make the word (section title) green too.

I was already gives the HTML code and as per the requirements I MUST NOT make any change in it.

div div span {
  color: red;
}

div span {
  color: blue;
}

p {
  color: green;
}
<div class="parent">
  <div class="child">This Is Child <span class="title">Title</span></div>
  <span class="title">Child Title</span>
  <p>Paragraph Content</p>
</div>
<div class="title">Section Title</div>

Kindly assist with number 4. Thank you very much in advance.

htmlcss


Solution 1:[1]

Can take note of this CSS for all requirements.

> = child selector

~ = sibling selector

, = comma represents styles for both elements separately

.parent>.child>span {
  color: red;
}

.parent>.child~.title {
  color: blue;
}

.parent>p,
.title {
  color: green;
}
<div class="parent">
  <div class="child">This Is Child <span class="title">Title</span></div>
  <span class="title">Child Title</span>
  <p>Paragraph Content</p>
</div>
<div class="title">Section Title</div>

Solution 2:[2]

Change your CSS to

div div span { 
color: red;
}
div span { 
color: blue;
}
p { 
color: green;
}div {
color: green;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Kameron

Related Questions