CSS specificity problem

  • PODxt

    (@podxt)


    10 years, 3 months ago

    Hi,

    I wrote this code on my home page and I’m trying to set a CSS property on only the homepagediv class for ul and li items.

    <div class="homepagediv">
	<div class="panel-grid-cell" id="sitelatestposts">
	<h1 class="blogtitle">News</h1>
		<div class="sitelatestpostsimg">
			<ul>
				<li><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array( 220,130 )); ?></a>
				</li>
			</ul>
		</div>

	</div>
	<div class="panel-grid-cell" id="siteinfos">
	<h1>Contact</h1>
	<p>Phone 992-552-6233</p>
		<div class="testingdiv">
			<ul>
				<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></li>
				<li><p>Sed quis bibendum leo, quis dictum sapien.</p></li>
			</ul>
		</div>
	</div>
</div>

    The problem is that at the start of my CSS I have:

    ul {
	padding: 0 0 0 40px;
}

    When I try things like:

    .homepagediv li{
	padding: 0;
}

    the li padding is still at 40px instead of 0 for this div.
    Any ideas?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Bazan

    (@bazan)

    10 years, 3 months ago

    .homepagediv ul {padding:0}
    esmi

    (@esmi)

    10 years, 3 months ago

    Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

    Thread Starter PODxt

    (@podxt)

    10 years, 3 months ago

    Thanks, why wouldn’t it work with li?

    Bazan

    (@bazan)

    10 years, 3 months ago

    Because padding for li was 0 before too 🙂

    How u want to change ul when u set padding to li? ;P

    In styling ULs i am using a pattern like this (for example menu):

    #site-menu {}
#site-menu ul {}
#site-menu ul li {}
#site-menu ul li a {}
#site-menu ul li:hover a {}
#site-menu li ul {}
#site-menu li li {}

    to never forget all styles 🙂

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS specificity problem’ is closed to new replies.