How to override existing in-text styling when applying new styles

I am struggling with a website that is built on a CMS. The custom pages are generating html code with styling added to the elements individually, rather than through a style sheet.

My issue is that I need to either remove the background-color property from all span elements under any div with the class .page_text or change it to none.

I apologize for the messy block of html below:

<div class="page_text">
  <h2 dir="ltr" style="line-height: 1.15; margin-top: 10pt; margin-bottom: 2pt;">
     <span style="font-weight: normal;">
       <p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt; display: inline !important;">
     <span style="font-size: 15px; font-family: Arial; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); vertical-align: baseline; white-space: pre-wrap;">If you’d like to contribute to Trashswag you can submit “reports” in several ways.</span></p></span><br></h2>

The solution I tried using Chrome's inspect element feature was adding a selector like 

.page_text h2 span {background-color: none;}
, but unfortunately, it did not work as expected.

Can someone please help me figure how to select and modify all spans within .page_text?

csscss-selectors

Answer №1

Your approach faces a couple of issues.

As pointed out by @Alexandra Ivanova, it's necessary to incorporate !important because of the inline styles. However, replacing none with transparent is also crucial since none is not a valid value for background-color.

Consider this solution:

.section_text h1 span {
    background-color: transparent !important;
}

(Alternatively, you could utilize background: none !important, as it implicitly sets background-color to its default value of transparent. Additional details are available here.)

Answer №2

When it comes to inline styles, their specificity level is consistently higher than other CSS rules, causing you to resort to using the !important declaration.

.section_header h2 span {background-color: transparent !important;}

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

Select a division and retrieve the identification of a different division

I am looking to trigger an event by clicking on one element and extracting the ID from a separate, unrelated div. Here is my attempt: $(".map_flag").on("click",function(){ var selectedID = ($(this).attr("data_modal")); $("#" + selectedID).fade ...

javascriptjqueryhtmlcss

Adjust the left margin to be flexible while keeping the right margin fixed at 0 to resolve the spacing

To create a responsive design that adjusts based on screen size, I initially set the content width to 500px with a margin of 0 auto. This meant that for a 700px screen, the content would remain at 500px with left and right margins of 100px each. Similarl ...

javascriptjqueryhtmlcss

Is there a way to accomplish this using Bootstrap?

Hello there! I have a piece of code that is working with both bootstrap and Pixedelic camera. Here it is: <section id="slider" class="container-fluid"> <div class="row fluid"> <div id="camera_wrap_1"> <div data-src="conten ...

csstwitter-bootstrap

I seem to be having an issue with the decimal point on my calculator - I only want to see one dot

Only need one dot for the calculator to function properly. The current situation with multiple dots is causing confusion. I intend to address other aspects of the code later, but I'm currently struggling with this issue. function dec(d) { let ...

javascripthtmlcss

The child element extends beyond the boundaries of its parent container in HTML

Have you ever encountered a situation where the inner div element is wider than the outer div? It can be a bit frustrating, but there are ways to address this issue. So, what causes this to happen in the first place? And more importantly, how can we ensur ...

htmlcss

New Feature in Bootstrap 4 Beta: Double dropdown icons now available in Options Menu

I'm facing an issue with the way Bootstrap is displaying my options menu. Here's a screenshot for reference: https://i.sstatic.net/LLxcF.png I'm unsure of what's causing this problem. I've omitted labels in this case, but they do ...

htmlcssgulptwitter-bootstrap-4

Unable to modify SVG color to a white hue

I am currently working on an Angular project where I am utilizing SVG to display some icons. These icons originally have a default grey color, but I want them to change to white when hovered over. Interestingly, while changing the color to red, green, or y ...

htmlcsssvgsass

Don't forget to preserve the hover state of divs even after refreshing

I recently added a navigation bar that expands in width upon hovering over it. For an illustration, check out this example: http://jsfiddle.net/Gsj27/822/ However, I encountered an issue when clicking on a button within the hover effect area. After load ...

javascripthtmlcss

Utilizing Javascript to implement a tooltip feature for dynamically inserted text

I recently incorporated a brief jQuery tooltip plugin into my site. It consists of approximately ten lines of code and works smoothly, as demonstrated in this demo. However, I encountered an issue when attempting to add new text that should also trigger t ...

javascriptjqueryhtmlcsstooltip

Modify the border color of a div contained within another div

I recently incorporated a Vue component (available at ): <vue-editor id="description" name="description" :class="{'uk-form-danger': errors.has('description') }" v-model="description" :editorToolbar="customToolbar" v-validate="' ...

cssvue.js

Styling an image with dual attributes using CSS

I'm looking to customize two img classes with different properties. For instance, in my CSS, I want to define: img { padding-left: 15pt; float: right; } and then: img1 { padding-left: 15pt; float: left; } where img1 would serve as a tag fo ...

htmlcss

Is there a solution available for tidying and organizing a CSS stylesheet efficiently?

In the project I am currently working on, the previous developers took an interesting approach by constructing all the selectors based on individual properties. For instance: .panel .selected a, a.selected-thumb, .date-picker input[type="submit"], .headi ...

cssparsing

Exploring the Transition from React.js with Material UI to Next.js for Server-Side Rendering: A Comparison of Tailwind CSS, Material UI, and Chakra UI

Currently, I am in the process of moving my React.js application with Material UI components to Next.js for server-side rendering (SSR) while considering some UI changes. In my research, I have come across three UI frameworks: Material UI, Chakra UI, and T ...

cssreactjsnext.jsmaterial-uifrontend

Seeking assistance with CSS - need to adjust block layout based on media query - considering using flexbox

I struggle with HTML5/CSS and have a simple task of laying out three DIVs differently based on screen size, using @media declarations. Layout 1 Layout 2 +----- container -----------------+ +----- container -------------- ...

htmlcss

What is causing my two divs to fail in expanding to the full height of the parent div?

HTML: <div id="main" class="rounded-corners"> <div id="benefits"> <img src="/benefits-heading.png" style="padding: 30px;" /> <div id="corporateside"> ...

css

An unusual outcome occurred while attempting to duplicate the text

After copying the letter A, I noticed that an empty string is being logged to the console instead of the expected A. However, when I paste, the console does successfully log the letter A. document.addEventListener('copy', handler); document ...

javascripthtmlcss

Create a notification menu in Bootstrap using Bootply, which conveniently displays a numerical badge at the top

I am interested in implementing a bootstrap notification menu similar to the one found at this link: http://www.bootply.com/oasBuRC8Kz# However, I would like to add the number of notifications to the upper right corner of the glyphicon. I have gone throug ...

csstwitter-bootstrapglyphicons

Display a pop-up alert following the completion of form validation using JavaScript

I am currently learning JavaScript and working on an enrollment form that requires validating a cellphone number with 11 characters. The issue I'm facing is that every time I hit submit, the page refreshes instead of displaying the validation message. ...

javascriptcssvalidationbootstrap-4popup

iterative outcomes with ajax and jquery scripting in javascript

Hey there! I'm trying to create a JavaScript script using AJAX that will extract the id and value of a button when hovered over. The extracted value will then be sent to a PHP script on the same page, where it will be used as a variable for searching ...

javascriptphpjquerycssajax

Navigate to a specific section within a table

My table is quite large, with potentially more than 100 rows. To handle this, I've used the Scroll class to give it a fixed height. Within the table, there is a radio button. The issue arises when the table is rendered and, for example, row No. 50 is ...

javascriptjqueryhtmlcssbootstrap-4