pseudo-element

I want to make a menu where each item is separated with a ·. To achieve this I use menu li:before { content: "· "; } This is swell, but it generates a dot before the first item as well. Therefore, i would like to use :first-child pseudo-class as well. Can I do this? Sure you can - http://jsfiddle.net/WQBxk/ p:before { content: "BEFORE "; display: block; } p:first-child:before { content: "1ST"; display: block } ​ The bad - it won't work in IE7 and below. Not because of the multiple pseudo selectors, but because of non-supported :before - http://kimblim.dk/css-tests/selectors/ Just tested in IE8

I have a product category page with 3 products per row. I want every row to have a border bottom except for the last row. This should have no border bottom. The last row may contain 1, 2, or 3 <li> elements. The current code that I'm using applies the border-bottom property to every 3rd <li> element, which is not quite what I want. CSS: .products li { width: 33.33333%; } .products li:nth-child(3n){ border-bottom: 1px rgba(51, 51, 51, 0.1) solid; } .products li:nth-child(2-PREVIOUS-SIBLING-ELEMENTS){ border-bottom: 1px rgba(51, 51, 51, 0.1) solid; } HTML: <ul class="products"> <li>Product</li>

Before moving to my question, I know how the :before and :after selectors work. (not a duplicate of what is ::before or ::after expression ). My question is in regards to use. I've seen some inconsistencies over the years where these selectors have been used to display the same thing. Same results, different approach. In some specific cases, such as adding a font awesome icon within an li before the a the :before selector makes sense. I'm not inquiring about that use, since it's intuitive enough to understand. But take a speech bubble for a tooltip for instance. I have seen the triangle placed

I'm setting the selection background color via CSS: ::selection { background:#cc0000; color:#fff; } ::-moz-selection { background:#cc0000; color:#fff; } On most browsers when the focus is somewhere else (like an IFrame), the selection color will stay the same, e.g.: but on Firefox it won't: You can see this in action on jsFiddle here . How can I get Firefox to set the selection color in this case? Is this a bug? How can I get Firefox to set the selection color in this case? Unfortunately, there doesn't appear to be a way to do so. Is this a bug? Nobody (including Mozilla themselves?) can say

I'm trying to overlay a transparent image over another via the after property. It's not even showing up using this method. I wanna use a base64 encoded image if at all possible. I tried with a regular non-encoded image too. No dice. Anyone have any thoughts? My HTML: <div class="image-container"> <img src="images/sample.jpg" alt="Sample Image" /> </div> My CSS: .image-container { position: relative; width: 183px; height: 137px; overflow: hidden; } .image-container img { position: absolute; } .image-container img:after { display: block; position: absolute; margin-top: -50%; width: 183px; height