How to Edit List without affecting Nested List

[rosco]

Hi,

Can anyone instruct me how I can apply styles to a list without affecting the nested list within that list. If you have a look on this page http://69.195.124.130/~imagesq3/product-category/london/ I’m trying to edit the sidebar so that I can make the names of the cities bold without that change affecting the subtitles beneath them.

Does anyone know how I can achieve this?

Many thanks,

Ross

[Paulie_D]

We’d need to see your HTML/CSS but generally you can use the > selector to only affect direct children

Soul > li only affects top level list items whereas ul li selects ALL list items.

http://jsfiddle.net/jJ7LQ/

Does that help?

http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

[rosco]

Hi Paulie,

That should help, the only thing is I’m struggling to find where to add / edit the code. I think this sidebar section maybe pulled through from WooCommerce but I can’t find a sidebar php file to edit. I’ve had a look at the files that make up the WooCommerce plugin, but nothing stands out.

Any ideas?

Thanks,

Ross

[Paulie_D]

You’d have to Inspect the sidebar with Developer Tools to see where the CSS is coming from.

It might be in the theme’s CSS file or provided by WooCommerce.

[rosco]

I’ve checked the source, and I can see where I’ve previously amended the code by adding a hyphen before the children elements of the list to define subcategories. (Shown below)

.product-categories .children li:before {
content: “- “;
}

However, Firebug is saying the source css file is custom.css?ver=3.7 and the only file I can find is custom.css which doesn’t feature this code. It’s very confusing.

Any ideas?

Ross

[rosco]

This might help, I’ve found where to edit the custom css. It’s in the theme files. To edit the children elements of the list I inserted the following code, which works:

.product-categories .children li:before { content: "- "; }

.product-categories .children .children li { padding-left: 10px; }

I then tried entering the following code to make the parent elements bol:

.product-categories { font-weight: bold; }

However this didn’t work. Based on this code can anyone help?

Thanks,

Ross

[rosco]

Hi,

Can anyone else help with this? I’m trying to change the style of a list without editing the children elements on the following page http://69.195.124.130/~imagesq3/product-category/durham/.

I’ve successfully edited the children elements as shown below:

.product-categories .children li:before { content: "- "; }

However, I don’t seem to be able to edit the main list items. All I’m trying to do is set the main list items to bold.

I tried:

    .cat-item li{ font-weight: bold; } 

However this didn’t work.

Any ideas?

[Johannes]

It’s almost definitely just specificity issues you’re having. Your “.cat-item li” rule isn’t specific enough and is being overruled by previous or future styles.

The best way would be to analyse the code and work out how you can best over-ride them (in a separate file is probably best to ensure you can update the theme in the future without removing your adjustments)..

The worst way (and easiest) is to simply add “.cat-item li {font-weight: bold !important;}” !important rules will generally always over-ride theme files regardless of how specific they have written them.. Unless of course they have also used !important.

Hope you fix your issue! :)

EDIT I reported this post to have it removed/changed to my nickname, rather than email address if possible!** Heh

[rosco]

Hi John, I’ve just tried adding .cat-item li {font-weight: bold !important;} but it still didn’t work. I’m not sure why not. The theme has a section for adding custom code, so I just added it there. Any other ideas why this wouldn’t work?

Thanks,

Ross

[Paulie_D]

John.

EDIT I reported this post to have it removed/changed to my nickname, rather than email address if possible!

You would need to edit your profile to change your visible username.

[Author]

Posts