Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Combining :hover and :nth-child(n4+4)?

Combining :hover and :nth-child(n4+4)?


I'm stuck and can't figure out a fix to my current problem and was hoping to get some help and/or direction.

I was wondering if there is a way to combine the :hover and :nth-child(4n+4) pseudo classes. If you visit my sandbox page there is an un-ordered list (the deal polaroids) where I have every 4th list item display a zero margin. The problem is that the :hover adds a 10px padding that breaks the flow on every 4th list item. I can't seem to figure out how to prevent the flicker that is caused by hovering over those list items. I tried combining things to no avail and using "!important" (which I try and avoid). Can anyone help? I that I'm overlooking something and a second pair of eyes would help.

here is the CSS/HTML:


ul#myTiks li {
    float: left;
    width: 230px;
    display: block;
    margin-right: 35px;
    list-style-type: none;
    margin-bottom: 35px;
    color: #333;

ul#myTiks li:hover {
    padding: 10px;
    background-image: url(../img/dwt/white_bgd_30.png);
    margin: -10px 25px 25px -10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

ul#myTiks li:nth-child(4n+4) {
    margin-right: 0 !important;


  • Title Of Deal
    Deal Category
  • Problem courtesy of: BrownFreelance


    Just change your right margin to -10px, no need for important:

    ul#myTiks li:nth-child(4n+4) {
        margin-right: -10px;
    Solution courtesy of: thebiffboff


    View additional discussion.

    This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

    Share the post

    Combining :hover and :nth-child(n4+4)?


    Subscribe to Css3 Recipes - The Solution To All Your Style Problems

    Get updates delivered right to your inbox!

    Thank you for your subscription