SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div reacting differently depending on Class or ID Selector

    My CSS reacts differently depending on the selectors I use. I'm not sure why this happens, is anyone able to explain it?

    The following code doesn't work as intended. The .img_block p doesnt change font size or margins. It appears to be overridden by #textbody p. I thought it to be odd being that .img_block p is below #textbody p.

    Code:
    <html>
    <head>
    	<style>
    	#textbody p {
    	margin: 2em 8.5%;
    	font-size: 0.875em;
    	line-height: 1.5em;
    	}	
    
    	.img_block {
    		padding: 1em 0 2em;
    		text-align:center;
    	}
    	.img_block ul{
    			text-align: left;
    			margin: 0;
    			white-space:normal;
    	}
    	.img_block li{
    		padding: 0;
    		float: left;
    		margin: 0 auto;
    		list-style: none;
    		overflow: hidden;
    	}
    	.img_block img{
    		margin: 1.5%;
    		padding: 0;
    		width:100%;
    	}
    	.img_block p {
    		color: #444444;
    		font-style: italic;
    		font: .75em "Georgia", Serif;
    		border: 1px solid red;
    		padding: 0;
    		margin: 0;
    		text-align: left;
    	}
    
    	li.one{width:94%}
    	li.two{width: 47%}
    	li.four{width: 47%}
    	</style>
    	
    </head>
    <body><div id="textbody"><p>
    	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis urna sit amet nulla congue in gravida mi pellentesque. Aliquam vitae sem aliquet arcu faucibus dictum eget in odio. Sed ullamcorper dui et purus tincidunt non ullamcorper nisi commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas, tortor a mattis ullamcorper, erat tellus tincidunt lacus, in scelerisque nibh ante vel nunc. In a tortor in elit malesuada venenatis eu et arcu. In hac habitasse platea dictumst. Sed nec iaculis mi. In feugiat tincidunt mollis. Pellentesque ut vestibulum ante. Sed hendrerit leo a eros tempor semper. Donec ultricies nunc sed dolor suscipit convallis. Aliquam erat volutpat. Suspendisse in risus non tellus feugiat laoreet at sed magna. Etiam blandit est nulla, ac gravida risus. Quisque tincidunt risus non lacus blandit imperdiet.
    	</p>
    	<div  class="img_block"><ul>
    		<li class="two" ><img src="_images/1.jpg"/><p class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></li>
    		<li  class="two" ><img src="_images/2.jpg"/><p class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></li>
    	</ul></div>
    	</div>
    </body>
    </html>
    However if I change the Class .img_block to an ID everything works as expected - the same if instead I change the ID #textbody to a Class.
    So the following works as expected:

    Code:
    <html>
    <head>
    	<style>
    	#textbody p {
    	margin: 2em 8.5%;
    	font-size: 0.875em;
    	line-height: 1.5em;
    	}	
    
    	#img_block {
    		padding: 1em 0 2em;
    		text-align:center;
    	}
    	#img_block ul{
    			text-align: left;
    			margin: 0;
    			white-space:normal;
    	}
    	#img_block li{
    		padding: 0;
    		float: left;
    		margin: 0 auto;
    		list-style: none;
    		overflow: hidden;
    	}
    	#img_block img{
    		margin: 1.5%;
    		padding: 0;
    		width:100%;
    	}
    	#img_block p {
    		color: #444444;
    		font-style: italic;
    		font: .75em "Georgia", Serif;
    		border: 1px solid red;
    		padding: 0;
    		margin: 0;
    		text-align: left;
    	}
    
    	li.one{width:94%}
    	li.two{width: 47%}
    	li.four{width: 47%}
    	</style>
    	
    </head>
    <body><div id="textbody"><p>
    	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis urna sit amet nulla congue in gravida mi pellentesque. Aliquam vitae sem aliquet arcu faucibus dictum eget in odio. Sed ullamcorper dui et purus tincidunt non ullamcorper nisi commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas, tortor a mattis ullamcorper, erat tellus tincidunt lacus, in scelerisque nibh ante vel nunc. In a tortor in elit malesuada venenatis eu et arcu. In hac habitasse platea dictumst. Sed nec iaculis mi. In feugiat tincidunt mollis. Pellentesque ut vestibulum ante. Sed hendrerit leo a eros tempor semper. Donec ultricies nunc sed dolor suscipit convallis. Aliquam erat volutpat. Suspendisse in risus non tellus feugiat laoreet at sed magna. Etiam blandit est nulla, ac gravida risus. Quisque tincidunt risus non lacus blandit imperdiet.
    	</p>
    	<div  id="img_block"><ul>
    		<li class="two" ><img src="_images/1.jpg"/><p class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></li>
    		<li  class="two" ><img src="_images/2.jpg"/><p class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></li>
    	</ul></div>
    	</div>
    </body>
    </html>
    Code:
    <html>
    <head>
    	<style>
    	.textbody p {
    	margin: 2em 8.5%;
    	font-size: 0.875em;
    	line-height: 1.5em;
    	}	
    
    	.img_block {
    		padding: 1em 0 2em;
    		text-align:center;
    	}
    	.img_block ul{
    			text-align: left;
    			margin: 0;
    			white-space:normal;
    	}
    	.img_block li{
    		padding: 0;
    		float: left;
    		margin: 0 auto;
    		list-style: none;
    		overflow: hidden;
    	}
    	.img_block img{
    		margin: 1.5%;
    		padding: 0;
    		width:100%;
    	}
    	.img_block p{
    		color: #444444;
    		font-style: italic;
    		font: .75em "Georgia", Serif;
    		border: 1px solid red;
    		padding: 0;
    		margin: 0;
    		text-align: left;
    	}
    
    	li.one{width:94%}
    	li.two{width: 47%}
    	li.four{width: 47%}
    	</style>
    	
    </head>
    <body><div class="textbody"><p>
    	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis urna sit amet nulla congue in gravida mi pellentesque. Aliquam vitae sem aliquet arcu faucibus dictum eget in odio. Sed ullamcorper dui et purus tincidunt non ullamcorper nisi commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas, tortor a mattis ullamcorper, erat tellus tincidunt lacus, in scelerisque nibh ante vel nunc. In a tortor in elit malesuada venenatis eu et arcu. In hac habitasse platea dictumst. Sed nec iaculis mi. In feugiat tincidunt mollis. Pellentesque ut vestibulum ante. Sed hendrerit leo a eros tempor semper. Donec ultricies nunc sed dolor suscipit convallis. Aliquam erat volutpat. Suspendisse in risus non tellus feugiat laoreet at sed magna. Etiam blandit est nulla, ac gravida risus. Quisque tincidunt risus non lacus blandit imperdiet.
    	</p>
    	<div  class="img_block"><ul>
    		<li class="two" ><img src="_images/1.jpg"/><p class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></li>
    		<li  class="two" ><img src="_images/2.jpg"/><p class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></li>
    	</ul></div>
    	</div>
    </body>
    </html>
    And furthermore with the two working cases above if I replace #img_block p or .img_block p with .caption it breaks again.
    For Example:
    Code:
    <html>
    <head>
    	<style>
    	.textbody p {
    	margin: 2em 8.5%;
    	font-size: 0.875em;
    	line-height: 1.5em;
    	}	
    
    	.img_block {
    		padding: 1em 0 2em;
    		text-align:center;
    	}
    	.img_block ul{
    			text-align: left;
    			margin: 0;
    			white-space:normal;
    	}
    	.img_block li{
    		padding: 0;
    		float: left;
    		margin: 0 auto;
    		list-style: none;
    		overflow: hidden;
    	}
    	.img_block img{
    		margin: 1.5%;
    		padding: 0;
    		width:100%;
    	}
    	.caption {
    		color: #444444;
    		font-style: italic;
    		font: .75em "Georgia", Serif;
    		border: 1px solid red;
    		padding: 0;
    		margin: 0;
    		text-align: left;
    	}
    
    	li.one{width:94%}
    	li.two{width: 47%}
    	li.four{width: 47%}
    	</style>
    	
    </head>
    <body><div class="textbody"><p>
    	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis urna sit amet nulla congue in gravida mi pellentesque. Aliquam vitae sem aliquet arcu faucibus dictum eget in odio. Sed ullamcorper dui et purus tincidunt non ullamcorper nisi commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas, tortor a mattis ullamcorper, erat tellus tincidunt lacus, in scelerisque nibh ante vel nunc. In a tortor in elit malesuada venenatis eu et arcu. In hac habitasse platea dictumst. Sed nec iaculis mi. In feugiat tincidunt mollis. Pellentesque ut vestibulum ante. Sed hendrerit leo a eros tempor semper. Donec ultricies nunc sed dolor suscipit convallis. Aliquam erat volutpat. Suspendisse in risus non tellus feugiat laoreet at sed magna. Etiam blandit est nulla, ac gravida risus. Quisque tincidunt risus non lacus blandit imperdiet.
    	</p>
    	<div  class="img_block"><ul>
    		<li class="two" ><img src="_images/1.jpg"/><p class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></li>
    		<li  class="two" ><img src="_images/2.jpg"/><p class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></li>
    	</ul></div>
    	</div>
    </body>
    </html>
    So to fix my problem #textbody should be a Class not an ID (not the other working case because I require multiple .img_body intances) - But why should it be a class? And why does the selector you use change the outcome?

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,583
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    IDs are more specific than classes. The following references about specificity might help.

    http://reference.sitepoint.com/css/specificity

    http://www.w3.org/TR/CSS21/cascade.html#specificity

  3. #3
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    IDs are more specific than classes. The following references about specificity might help.

    http://reference.sitepoint.com/css/specificity

    http://www.w3.org/TR/CSS21/cascade.html#specificity
    Ah awesome, Thanks!

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ronpat View Post
    IDs are more specific than classes. The following references about specificity might help.

    http://reference.sitepoint.com/css/specificity

    http://www.w3.org/TR/CSS21/cascade.html#specificity
    In a nutshell, the process for comparing two selectors that both target the same element but have different rules is:

    1. Is one of the rules inline? If so, it wins. If not, carry on.
    2. Does one of the rules have more IDs than the other? If so, it wins. If not, carry on.
    3. Does one of the rules have more classes than the other? If so, it wins. If not, carry on.
    4. Does one of the rules have more elements than the other? If so, it wins. If not, carry on.
    5. Whichever one appears last in the stylesheet(s) wins. Game over.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Whichever one appears last in the stylesheet(s) wins. Game over...
    Unless the previous one has !important on it.

  6. #6
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Unless the previous one has !important on it.
    Oh yeah, that one was rule zero, but I accidentally typed it in invisible ink...

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Unless the previous one has !important on it.
    which will be over-ridden if the user stylesheet has !important on it

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    which will be over-ridden if the user stylesheet has !important on it
    ... which will be overridden if the user turns off his freaking computer.

  9. #9
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Haha, thanks guys. I can't believe I didn't run into this problem earlier - I only knew about "Whichever one appears last in the stylesheet(s) wins."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •