[Solved] Combine CSS functions for different ID/class

[misscosmic]

Paulie_D, you already learned how to style all of the object that have a same prefix (if this word is rightly used here ..) with [id^=”attachment_”]. But I don’t really understand how to do this in the following cases of #nav_menu-4 and #nav_menu-5 ..
This can’t be it .. :
[code]
#nav_menu-4 > li:last-child,
#nav_menu-5 > li:last-child {
padding-right: 0;
}
#nav_menu-4 a,
#nav_menu-5 a {
color: #FFF;
display: block;
position: relative;
text-decoration: none;
}
#nav_menu-4 a:hover,
#nav_menu-5 a:hover {
color: #6c8b18;
}
[/code]

Peace and happiness

[Paulie_D]

I’m concerned that you’re getting overspecific with the use of IDs here.

This for instance
\#nav_menu-4 > li:last-child,
#nav_menu-5 > li:last-child {
padding-right: 0;
}

How many menus do you have?

Is it really necessary to address them all by ID? Can’t you given them a common class?

[misscosmic]

Only two menus (lucky me :-), it’s for a bilingual (en/fr) site. So the menu have to be styled exactly the same way .. for now it does not work yet but don’t know the cause. Do you think things might conflict by the way I just duplicated them .. ?

[Paulie_D]

Do you think things might conflict by the way I just duplicated them .. ?

No, not based on the code we have but mkrisc was right

[id^="nav_menu-"] means that you don’t have to use #nav_menu-xat all.

So this
\#nav_menu-4 > li:last-child,
#nav_menu-5 > li:last-child {
padding-right: 0;
}

becomes
[id^="nav_menu-"] > li:last-child{
padding-right: 0;
}

[misscosmic]

NOw things are going to work better with this method. But this

#nav_menu-4 li > a,
#nav_menu-5 li > a {
padding-bottom: 8px;
}

when changed to this

[id^="nav_menu-"] li > a, {
padding-bottom: 8px;
}
curiously enough doesn’t work properly ..

[misscosmic]

You’re totally right about the car, I’ll change my behavior :-)
But reason that it works for one menu and not for the other with exaclty the same CSS tags is that I just found out that .current-menu-item class not being added to ‘custom menu links’. And one menu is a page-linked and the other a link-linked menu ..
So the problem is somewhere else ..

Thanks anyway everybody for all your great and quick help!

[misscosmic]

I would like to come back just briefly .. Is this possible
[id^="nav_menu-"] [class^="alignnone size-medium wp-image-"] {
margin-top: 15px !important;
margin-bottom: 15px !important;
}

[Paulie_D]

That’s actually an incredibly specific CSS selector AND with an !important statement

If you’re having to use it I suspect that you have bigger issues.

I think you have “themeing” issues.

[misscosmic]

I’m sorry I’m a totally left-brain graphic designer that ended up in CSS land ..

[misscosmic]

All the “menu-item-X” have the same “menu-item menu-item-type-post_type menu-item-object-page menu-item-X”
They all need the same properties, is this possible to combine .. ?

<

div>
<aside>
Immobilier Commercial

<

div>
<ul id="menu-immo_comm_fr" class="menu">
<li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70">
<li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68">
Raison technique Diligence

<li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67">
<li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66">
Bâtiment évaluation

<li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-53 current_page_item menu-item-69">

[Paulie_D]

All the “menu-item-X” have the same “menu-item menu-item-type-post_type menu-item-object-page menu-item-X”
They all need the same properties, is this possible to combine .. ?

My point is that you shouldn’t need to do this. A proper theme review would be indicated.

At the moment you are desperately looking to use a band-aid on something that, it would appear, needs major surgery.

You best option is to get in a qualified surgeon, not an ambulance driver or EMT.

[Author]

Posts