Jump to content

grouping and nesting selectors


sajisweetgirl

Recommended Posts

HiI just started learning css from w3schools tutorials ,I have a question in chapter nesting selectors .in this style p{..............} .marked{...................} .marked p{...............} p.marked{................} whats the difference between 'p.marked' and '.marked p' ?!

thanks

Link to comment
Share on other sites

See the try-it-yourself at:http://www.w3schools.com/css/css_grouping_nesting.asp If you already have, what is it about the try-it-yourself that you didn't expect?

Link to comment
Share on other sites

A third style is specified only for p elements within elements with class="marked". EDIT: You must look at the HTML also.

Edited by niche
Link to comment
Share on other sites

.marked p corresponds to the nested <p> element in either of these HTML structures:

<p class="marked">   <p>First descendent</p></p> <div class="marked">   <table>	  <tr>		 <td>			<p>Arbitrary descendent</p>		 </td>	  </tr>   </table></div>

Edited by Deirdre's Dad
Link to comment
Share on other sites

paragraph within another paragraph element is invalid, bad bad example. tut tut
True. It sort of looked like OP's CSS wants to do it that way. A better example would look like this:
<div class="marked">   <p>Hello</p></div>

Edited by Deirdre's Dad
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...