Question

I am trying to access only the ELEMENT for toc-chapter number (1 in this case). The element is in nested classes. I’ve used this approach on toc-section and was able to produce the wanted result.

Css:

.book .toc {

    & > .title{
        font-size: x-large;
        font-weight: bold;
        padding-bottom: .25em;
        margin-bottom:.50em;
        border-bottom: 1px solid @tuscany;          
    }

    & a.target-chapter{
        .cnx-gentext-n{
            &:before{content: "testing";}           
        }   
        color:red ; 
    }
}

HTML:

<div class="toc">
  <div class="title">
    Table of Contents
  </div>

  <ul>
    <li xmlns:d="http://docbook.org/ns/docbook" xmlns:db=
    "http://docbook.org/ns/docbook" xmlns:pmml2svg=
    "https://sourceforge.net/projects/pmml2svg/" xmlns:c="http://cnx.rice.edu/cnxml"
    xmlns:ext="http://cnx.org/ns/docbook+" xmlns:svg="http://www.w3.org/2000/svg"
    xmlns:mml="http://www.w3.org/1998/Math/MathML" class="toc-chapter">
      <a href="#idm3792312" class="target-chapter"><span class=
      "cnx-gentext-chapter cnx-gentext-autogenerated">Chapter</span> <span class=
      "cnx-gentext-chapter cnx-gentext-n">1</span><span class=
      "cnx-gentext-chapter cnx-gentext-autogenerated">.</span> <span class=
      "cnx-gentext-chapter cnx-gentext-t">Aging and the Elderly</span></a>

Answer 1

Based on your provided info, I would assume that LESS is producing the following css selector (I have not actually recoded your problem in LESS, this is just my interpretation):

.book .toc a.target-chapter .cnx-gentext-n:before {content: "testing";}

Which should work based on this fiddle. I will assume you are testing in a browser that supports :before (not some old version of IE). So to trouble shoot this, you need to:

1. Verify that such a selector is in fact being produced.
2. If NOT, determine what selector string is in fact being produced by your code (if any), and that may lead you to solving your issue.

If such a correct selector string is being produced, then you need to look at other css (which you have not posted, so I am merely speculating here):

1. Is some more specific (which seems unlikely) selector string targeting the same thing and overriding it?
2. Do you elsewhere set the display or color or visibility or some other property on that :before pseudo-element that in fact “hides” the added “testing” from view?
3. Is your actual use case putting an image as content and are you seeing it not show up in printing (that would be a whole different issue)?

Basically, if your selector string is coming out correct, there are numerous other things that could be happening, and we would need more details to resolve it. If it is not coming out as above, then I would be interested in know what it is producing.