CODEWITHSUNDEEP
htmlcssdrupal
user1406987
user1406987

Reputation: 73

How can I target a class within a class with CSS?

I've been up for hours trying and failing to make this work. I have some code like this:

<h1 class="title ">MasterClass Lessons</h1>
<div class="view view-uc-products view-id-uc_products view-display-id-page_4 3col-grid view-dom-id-1">
  <div class="view-content">
    <table class="views-view-grid">
      <tbody>
        <tr class="row-1 row-first">
          <td class="col-1"><div class="panel-display panel-1col clear-block" >
            <div class="panel-panel panel-col">
              <div>
                <div class="views-field-field-image-cache-fid">
                  <div class="field-content">
                    <a href="/content/gold-pass-all-lessons">
                    <a href="/content/gold-pass-all-lessons"></a>
                  </div>
                </div>
                <div class="views-field-title">
                   <span class="field-content"><a href="/content/gold-pass-all-lessons">GOLD PASS - ALL LESSONS!</a></span> 
                </div>

I want to target the class "views-field-title" with a style sheet, but I only want to apply a style when it's a subclass of "3col-grid" which is specified in a div a few levels above. Drupal lets me specify my own class name (I used 3col-grid) for the specific purpose of this CSS targeting, but when I do the following…

<style>
.3col-grid .views-field-title {
font-weight:bold;
}
</style>

It doesn't work.

I also tried

.3col-grid>.views-field-title

and

.3col-grid * .views-field-title

and

.3col-grid*.views-field-title

I'm sure there must be a way to make it work, and I'm sure it's quite simple.

Anyone who can tell me what that is will make me a happy man.

Thanks, Joe

Upvotes: 0

Views: 1097

Answers (1)

SLaks
SLaks

Reputation: 888177

Your HTML is invalid.
CSS classnames cannot begin with numbers.

Once you fix that, you can use the descendant selector:

.OuterClass .InnerClass

Upvotes: 10

Related Questions