What is the best way to choose the content within this css cascade?

After recently diving into the world of CSS, I have a solid grasp on the fundamentals. However, I am encountering difficulties when attempting to target specific text within my Drupal site. The theme in use is "stark" which provides minimal styling, almost none of which is visible when inspecting the content 'TEST' (last line) with tools like Firebug.

Below is the current stack for the divs being utilized. Panels are incorporated, resulting in additional div elements.

<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>

Upon selecting the "TEST" text in Firebug, the controlling CSS is identified as shown below 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 desired styling specified in my local.css is relatively straightforward.

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

EDIT: The classes defined by panels are present whenever a panel is used on the page or site. I require precise CSS targeting for this particular piece of text within this specific content. This is why I included the ID #cr-logos, yet I am unable to isolate this text successfully.

I've experimented with various combinations to select the text, but the base body definition in the CSS mentioned above consistently overrides any attempts. The multitude of divs, IDs, and classes are proving confusing. Additionally, class names like 

"class="panel-pane pane-page-site-name"
leave me wondering if these are two distinct classes listed together or just one.

cssdrupal-7

Answer №1

To enhance the appearance of your div element, consider removing the "#" from its id attribute.

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

After making this change, you can easily target .pane-content using a descendant selector:

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

Answer №2

"class="panel-pane pane-page-site-name"

There are two classes applied to the element, which can be identified by the space between them.

If using .pane-content does not give the desired result, consider adding !important after the css rules, like so:

.pane-content{
    font-weight:bold !important;
}

If this still doesn't work, you may need to provide a more specific selector, such as:

#crhub .panel-flexible-inside .crhub-left .panels-flexible-column .inside .panels-flexible-row .inside .panels-flexible-region .inside #cr-logos .pane-content{
    font-weight:bold;
    ...
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing React to highlight buttons that share the same index value upon hover

I have some data in a JavaScript object from a JSON file, where certain entries have a spanid (number) while others do not. I've written React code to highlight buttons with a spanid on hover, but I'm looking for a way to highlight or change the ...

javascriptcssreactjs

What is the best way to incorporate component-specific CSS styles in React?

This is the layout that I am attempting to replicate (originally from react-boilerplate): component |Footer |style.css |Footer.js In Footer.js, the styles are imported in a very elegant manner like this: import React from 'react'; im ...

javascripthtmlcssreactjswebpack-dev-server

Issue with embedding icon within input field in Bootstrap version 4.1

I am currently implementing a project using Angular 6 along with the latest version of Bootstrap v4.1. I am attempting to create a reactive form with icons within input fields. As there is no direct way in bootstrap to place icons on the left side of input ...

htmlcsstwitter-bootstrapbootstrap-4angular-reactive-forms

When you hover, a panel will slide in from the right. When you move the mouse

Hey everyone, I've been trying to implement the solution provided but I seem to be missing something. Can you take a look at my fiddle? http://jsfiddle.net/cancerian73/Ej5k8/ body { position: relative; min-height: 3000px; margin: 0; padding: 0; to ...

jqueryhtmlcsspanelslide

Achieving Vertical Alignment of Content in Bootstrap 5

I've experimented with different approaches based on search results, StackOverflow suggestions, and examining existing code snippets. Here is the snippet of code I am working with: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a ...

htmlcsstwitter-bootstrapbootstrap-5

Footer displays within the content section

Currently, I am utilizing Next.js and antd's layout components to create a dashboard-style page using their Layout component. However, I have encountered two issues related to styling (CSS) in this setup: Footer appearing within the Content: I am wo ...

htmlcssreactjslessantd

Show parent menu when child menu is clicked

I'm dealing with a menu that has sub-child menus, and the issue I'm encountering is that whenever I choose a child menu after the page loads, the menu collapses. My goal is to have the parent menu open and expanded instead. This is the HTML Code ...

javascriptjquerycssmenu

How can I postpone the spring animation until the image is fully loaded?

Currently, I am utilizing the react-spring library along with the render-props API to adjust the background-size CSS property based on changes in the background image. However, I have noticed that there are instances where the background image fails to loa ...

javascriptcssreactjsjsxreact-spring

What is the best way to include an ellipsis after a couple of lines of

Is there a way to add an ellipsis after two lines of text? I've been able to successfully implement the ellipsis in one line, but what if the text spans across two lines? And what if it's even longer than that — can we show an ellipsis after th ...

javascriptjqueryangularjscss

What is the best way to incorporate inline css in Angular for various views that share identical content but require distinctive styles?

Below is my HTML code: <p ng-if= "editMode=='edit'" style="margin-left: 1px;margin-top: -2px;">===some messages---</p> <p ng-if= "editMode=='addNew'" style="margin-left: 1px;margin-top: -2px;">===some messages- ...

htmlcssangularjsangularjs-scopeangularjs-ng-repeat

Insert a CSS Class into an HTML div element with JQuery

I'm faced with a bit of a challenge. Here's the scenario: <div class="portItem"></div> <div class="portItem"></div> <div class="portItem"></div> <div class="p ...

javascriptjquerycssclassinsertafter

What methods are available to decrease the width of the clarity stack component label?

Is there a way to decrease the width of the label in the clarity stack component? I attempted to adjust the width using custom styling, but it did not work as expected. Custom styles applied: .myStyle { max-width: 10% !important; flex-basis: 10% ...

cssangularvmware-clarity

I would like my division to split into two halves, each with a width of 50%, and be aligned next to each other using fxLayout

<div fxLayout="row" fxLayoutAlign="space-between" style="background-color: blue;"> <div fxLayout="column" style="width: 50%;">1stOne </div> <div fxLayout="column" styl ...

htmlcssangularlayoutflexbox

Creating dynamic content within an expandable div element

In my web app development, I have crafted a unique 'virtual desktop' where I can open draggable and resizable 'windows'. These windows are represented by absolutely positioned div elements. I am looking to create responsive content with ...

htmlcssresponsive-design

What are the steps for creating personalized sliders with WordPress?

Seeking guidance on how to code WP Template files to enable control from the WP dashboard for adding or removing slider images. A sample code snippet is provided below. <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indi ...

javascriptphpcssajaxwordpress

Enhancing the design of a button with whitespace using CSS

Recently, I had a well-designed landing page created using LeadPages. However, due to financial constraints, I am unable to continue paying for their services at the moment. The current landing page has proven to be effective in converting leads. https:// ...

cssbutton

Selecting a child element based on its position within an element with a

Is there a way to use CSS to select the nth child from an element with a specific class? For instance, in the scenario below, how would I target the li element with the id="this"? Essentially, I am looking to pinpoint the 2nd element within the element t ...

htmlcsscss-selectors

Is there a way to reduce the spacing between these child containers when they wrap?

I'm looking to reduce the space between my child divs when they wrap It seems like the issue lies within the media query * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 10px; width: 100%; } html, bo ...

htmlcssalignment

The HTML button remains hidden behind a Three.js background until I bring up the Dev Tools

As I dive into my university assignment, creating a 3D scene with Three.js is both challenging and exciting. One specific requirement is to add a button that triggers the movement of one of my three vehicle objects. However, an issue arises as I can' ...

javascripthtmlcssthree.js

Tips for inserting manual line breaks in justified text

My task involves taking a 5-page story from a Word document and implementing it on a website. #reading { hyphens: auto; text-align: justify } <div style="font-size: 20px; width: 750px; margin-bottom: 4em;" class="reading" id="reading"> TextT ...

htmlcss