Classes and Subclasses

[Engine44]

I have a site that includes a class named Category (.category). Within that class, there are a number of subclasses (e.g. Green, Red, Blue). Each post on the site has the parent (.category) and a subcategory assigned to it (e.g. Green). Is it possible to create a selector that will dig down and specify a subclass (e.g.Green)? It might be something like .category.green. But that syntax is wrong, i’m sure. Thanks.

[PaulOB]

@Engine44

.category.green. But that syntax is wrong, i’m sure.

That rule would apply to this html:

<div class="category green">Me</div>

If you want a child of category to be targeted then you need the descendant selector (a space):

e.g. .category .green{}

That would target html like this:

<div class="category">
  <div class="green">Me</div>
  <div class="red">Not Me</div>
  <div>Or Me</div>
</div>

Of course you could just use .green if there weren’t any specificity issues or the class wasn’t used in other constructs that you didn’t want to target.

Using a colour as a class name is generally considered bad practice because if later on you want the red to be orange then you need ot change both the css and the html for it to make sense. A better classname would be something like .warning{color:red} . If later you decide a warning should be orange then you only have to change the css and the html still makes sense.