Apply CSS rules to a nested class inside a div

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.