Question

I am new to css and while I understand the basics, I am having trouble selecting specific text on my Drupal site. The theme I am using is “stark”, so it adds very little styling at all and none that shows up when I examine my styles for the content ‘TEST’ (last line) using firebug.

The current div stack is below. I am using panels so it adds a few divs.

<div id="crhub" class="panel-flexible crhub clearfix">
 <div class="panel-flexible-inside crhub-inside">
  <div class="crhub-left">
   <div class="panels-flexible-column panels-flexible-column-crhub-1 panels-flexible-column-first ">
    <div class="inside panels-flexible-column-inside panels-flexible-column-crhub-1-inside panels-flexible-column-inside-first">
     <div class="panels-flexible-row panels-flexible-row-crhub-3 panels-flexible-row-first clearfix ">
      <div class="inside panels-flexible-row-inside panels-flexible-row-crhub-3-inside panels-flexible-row-inside-first clearfix">
       <div class="panels-flexible-region panels-flexible-region-crhub-cr_logo panels-flexible-region-first panels-flexible-region-last cr-logo">
        <div class="inside panels-flexible-region-inside panels-flexible-region-crhub-cr_logo-inside panels-flexible-region-inside-first panels-flexible-region-inside-last">
         <div id="#cr-logos" class="panel-pane pane-page-site-name">
          <div class="pane-content"> TEST </div>

When I select “TEST’ on the site firebug state the controlling CSS as the following taken from my local.css file.

body {
    color: #000000;
    font-family: "Lucida Grande","Lucida Sans Unicode",sans-serif;
    font-size: 81.3%;
    font-size-adjust: none;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1.538em;
}

The intended styling in my local.css is nothing uncommon.

{
  color: #669900;
  font-weight: bold;
  font-size: xx-large; 
}

EDIT:
The classes defined by panels occurs anywhere I use a panel on the page or site. I need specific css to lock this down to the specific text on this specific content. That is why I added the ID #cr-logos, but I can’t seem to isolate this ext.

I have tried many combinations to select the text, but nothing overrides the base body definition in the CSS above. All of these divs, IDs, and classes have me confused. I am also confused by class names such as "class="panel-pane pane-page-site-name". Is this two classes listed together, or just one?

Answer 1

It looks like you just need to remove the “#” from your div’s id attribute.

<div id="cr-logos" class="panel-pane pane-page-site-name">
  <div class="pane-content"> TEST </div>
</div>

And then it should be as simple as selecting .pane-content with a descendant selector:

#cr-logos .pane-content {
    color: #669900;
    font-weight: bold;
    font-size: xx-large;
}