CODEWITHSUNDEEP
htmlcss
sviluppocsharp
sviluppocsharp

Reputation: 161

CSS issue on pseudo classes

I am trying to apply this rule to one ID how can I do it

this exist in the CSS and it works fine but I want to overwrite this rule just for one ID #menu-item-3091 (which is an "li" tag with a tag "a" within it) I want to leave this one

.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active{
    background:rgb(243,80,128);
    outline:0;
    color:#999;
}

I tried to modify with this code but I don't understand why it doesn't work can you explain it please, where I am wrong

.sf-menu #menu-item-3091:hover, .sf-menu #menu-item-3091.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active{
    background:rgb(243,80,128) !important;
    outline:0;
    color:#999;
}

this is the html 

<ul class="sf-menu">
<li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="http://www.example.com/contacts/">Contacts</a></li>
<li id="menu-item-3091" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3091"><a href="http://shop.example.com">Shop Online</a></li>
</ul>

Thank you in advance

Upvotes: 0

Views: 59

Answers (2)

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

try this

i have removed other selectors and only used selector for the particular id and only a tag 

    #menu-item-3091 a:hover,  #menu-item-3091.sfHover,
.sf-menu a:focus, .sf-menu a:active{
    background:rgb(243,80,128) !important;
    outline:0;
    color:#999;
}

DEMO

Upvotes: 0

Ennui
Ennui

Reputation: 10190

Try this. Assuming you are trying to change the a style properties, this will target the a only within the #menu-item-3091 li element.

.sf-menu #menu-item-3091:hover, .sf-menu #menu-item-3091.sfHover,
.sf-menu #menu-item-3091 a:focus, .sf-menu #menu-item-3091 a:hover, .sf-menu #menu-item-3091 a:active{
    background:rgb(243,80,128) !important;
    outline:0;
    color:#999;
}

Upvotes: 1

Related Questions