Question

I don’t know exactly how to apply CSS to a nested element. Here is my example code, but I’m looking for a manual that explains all the rules:

<div id="content">
  <div id="main_text">
    <h2 class="title"></h2>
  </div>
</div>

How can I apply CSS to only the class title, nested inside that particular div?

Answer 1

You use

#main_text .title {
  /* Properties */
}

If you just put a space between the selectors, styles will apply to all children (and children of children) of the first. So in this case, any child element of #main_text with the class name title. If you use > instead of a space, it will only select the direct child of the element, and not children of children, e.g.:

#main_text > .title {
  /* Properties */
}

Either will work in this case, but the first is more typically used.