how can i make the last <div> green?-CodePudding

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:

to make the word (title) red.
to make the word (child title) blue.
to make the word (paragraph content) green.
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 >
  <div >This Is Child <span >Title</span></div>
  <span >Child Title</span>
  <p>Paragraph Content</p>
</div>
<div >Section Title</div>

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

CodePudding user response：

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 >
  <div >This Is Child <span >Title</span></div>
  <span >Child Title</span>
  <p>Paragraph Content</p>
</div>
<div >Section Title</div>

CodePudding user response：

Change your CSS to

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

CodePudding user response：

You can check the following code.

.parentDiv:last-child {
  background: green;
}

You can also use class to put CSS on that div/element.