Jump to content
sajisweetgirl

grouping and nesting selectors

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

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...