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.
<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:
<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>
<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:
<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?
