Advertisement:

Author Topic: How to style child category of sub category?  (Read 1181 times)

tryinghard

  • Newbie
  • *
  • Posts: 21
How to style child category of sub category?
« on: September 17, 2014, 11:13:33 am »
Hi guys,

I have 1 Parent Category, 1 Sub Category and 1 child Sub Category. (1 category 3 levels deep).

Currently i can style the parent category and sub category but i have not figured a way to distinguish between the sub category and the subsequent child of this sub category. Eg different size font, indention or otherwise.

Anyone have any ideas? Thanks!


design

  • Hero Member
  • *****
  • Posts: 2619
  • Osclass 3.5 MAC/PC w/ Modern Browsers
Re: How to style child category of sub category?
« Reply #1 on: September 17, 2014, 09:46:57 pm »
http://www.w3schools.com/cssref/sel_nth-child.asp

this is what we use for dynamic content. firefox dev tools can help you select the right nth-child

tryinghard

  • Newbie
  • *
  • Posts: 21
Re: How to style child category of sub category?
« Reply #2 on: September 18, 2014, 08:43:52 pm »
hi design,

I have experimented around with not much success:

.home #main .categories .category a:nth-child(4){
 background: #ff0000;
}
<!--
.home #main .categories .category:nth-child(4) {
    background: #ff0000;
}

The reason it doesn't really work properly is because past the second subcategory i can't seem to find any "class" to style. the first parent category is styled using h1 but subsequent subclasses irregardless of level all have the same style?

Samples of what i played with:

.category.cat_122 {
 background: #ff0000;
}
.category:nth-child(2){
 background: #ff0000;
}


.home #main .categories .category a:nth-child(4){
 background: #ff0000;
}
}
.category:only-child(1){
 background: #ff0000;
}
 
class[cat_*="*"] {
 background: #ff0000;
}

i also tried n-child of col c1 and etc but no love.

The actual code on the website:

<div class="content home">
<div id="main">
<div class="categories c5">
<div class="col c1">
<div class="category">
<h1>
<ul>
<li>
<a class="category cat_122" href="http://xxx/index.php?page=search&sCategory=122">WA</a>
<span>(5)</span>
<ul>

the only way i see is to style each category number indivdually which works but i might grow old doing this and its not dynamic, eg if the category number changes l'm out of luck.

This code currently works to style each individual category:
.category.cat_122 {
 background: #ff0000;
}

but this is not feasible as i have so many categories and the numbers can change!!

Instead i need code to style category cat_* (whereby which i could possibly specify a range of numbers eg 50-100)

Any ideas?

Thanks guys