Question

I am trying to override the css from another file and I would like to know how specific of a reference I would need to override it.

Here is the page I am working with if you’d like to take a look:

http://www.bolistylus.com/shop/

This is what I’m trying to override:

.products li {
  float: left;
  margin: 0 10px 20px 0;
  padding: 0;
  position: relative;
  width: 150px;
}

Here is the HTML I’m working with:

<div id="main">

<section id="primary"><div id="content" role="main"><div id="breadcrumb"><a class="home" href="http://www.bolistylus.com">Home</a>  &rsaquo; <a href="http://www.bolistylus.com/shop/">Shop</a></div>
            <h1 class="page-title">All Products</h1>

<ul class="products">   
     <li class="product first">
        <a href="http://www.bolistylus.com/shop/boli-2/">

            <img width="150" height="150" src="http://www.bolistylus.com/wp-content/uploads/pinkproduct-150x150.png" class="attachment-shop_small wp-post-image" alt="pinkproduct" title="pinkproduct" />

            <strong>Boli Pink</strong>

            <span class="price">&#36;24.00</span>
        </a>

        <a href="/shop/?add-to-cart=38&_n=188fa640fb" class="button">Add to cart</a>
    </li>   <li class="product ">
    </li></ul><div class="clear"></div> 

</div></section>

    </div><!-- #main -->

Answer 1

.products li has a specificity of (0, 0, 1, 1)

a minimal higher specificity can be created with

ul.products li which has a specificity of (0, 0, 1, 2)

See this jsfiddle: http://jsfiddle.net/DAL9A/