Monday, 4 April 2016

List of items generated in HTML but parent and child items are assigned to the same class. How can I style the parent without affecting the child?

Hi all

I'm a self-taught beginner with a CSS question.

One of the plugin I’m using on my wordpress site generates a list of categories. The list looks something like this when viewed in the browser:

Parent item 1

  • Child item 1.1

  • Child items 1.2

Parent item 2

  • Child item 2.1

  • Child item 2.2

I would like to style this list so that the parent item is bolded. However I don’t see a way to do this in CSS because the way the plugin generates the HTML the parent item and child items have the exact same class.

<ul> <li category-item=”1” class=”x”> <a href=”#”>Parent item 1</a></li> <ul> <li category-item=”1.1” class=”x”> - < a href=”#”>Child item 1.1</a></li> <li category-item=”1.2” class=”x”> - < a href=”#”>Child item 1.2</a></li> </ul> <li category-item=”2” class=”x”> <a href=”#”>Parent item 2</a></li> <ul> <li category-item=”1.2” class=”x”> - < a href=”#”>Child item 2.1</a></li> <li category-item=”1.2” class=”x”> - < a href=”#”>Child item 2.2</a></li> </ul> </ul> 

Given that the parent items and child items have the same class, how can I can bold the parent item without affecting the child item?

In order to assign a different class to parent and child items I would have change the HTML, but the HTML is generated by the plugin so I presume that this would require me to do some PHP work in the plugin which is beyond my abilities.

Perhaps the fact that the child items is a new unordered listed nested in the main unordered list gives some kind of way to differentiate the parent and child?

Or perhaps the fact that the child items have a “-“ at the start gives us some clever way to differentiate them in the CSS?

Note - I will probably have lots of similar queries going forward so please tell me if this is not the most appropriate forum to post these?

Thanks in advance



Epic visual tool

Epson 5030UB 2D/3D 1080p 3LCD Projector Submitted April 04, 2016 at 10:05AM by riverswimmer11 http://ift.tt/1Xb9XGX

No comments:

Post a Comment