Overrule the child element selector using a class identifier

I'm facing an issue where the descendant selector is overriding my .red_p class. Is there a way to prevent this from happening without having to assign a class to each p element individually?

HTML:

<html>
  <head>
    <style>
      .red_p {
        color: red;
      }

      #main p {
        color: blue;
      }
    </style>
  </head>
  <body>    
    <div id="main">
      <p>This text should be displayed in blue.</p>           
      <p class="red_p">Although, this text should be red, it appears in blue instead.</p>             
    </div>  
  </body>
</html>
htmlcss

Answer №1

To enhance the specificity of the color blue, you can consider modifying the CSS code. Currently, the selector #main p is more specific than .red_p due to the presence of an id.

One approach is to include an id in the red rule like this: .red_p, #main .red_p, and place it after the blue rule (later styles take precedence over earlier ones) or utilize the !important declaration.

The concept of specificity operates as follows:

  • If style A is marked as !important while B is not, then A has higher specificity than B; stop comparison.
  • If A contains more id selectors compared to B, then A is more specific; stop comparison.
  • If A is inline whereas B is not, then A holds greater specificity; stop comparison.
  • If A includes more class selectors, pseudo-class selectors, or attribute selectors than B, A is considered more specific; stop comparison.
  • If A includes more elements than B, A is deemed more specific; stop comparison.
  • If style A is declared after style B, then A takes priority in terms of specificity; stop comparison.

(The universal selector does not impact specificity)

For additional guidance and visuals on CSS specificity, you can visit .

Answer №2

When it comes to CSS, specificity rules play a crucial role (as explained on MDN, with additional examples for better understanding):

The following selectors are arranged in ascending order of specificity:

  • Universal selectors - e.g.: *
  • Type selectors - e.g.: p
  • Class selectors - e.g.: .p_red
  • Attributes selectors - e.g.: [class="red"]
  • Pseudo-classes - e.g.: :hover
  • ID selectors - e.g.: #main
  • Inline style - e.g.: style attribute in your HTML

Hence, you have the option to increase specificity in your selector. In your scenario, there are multiple ways to achieve this:

#main .red_p
#main p.red_p

Alternatively, as a third method, you can eliminate the #main from #main p, making it less specific than your red p rule.

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

What causes the disparity between Chrome's print preview and printed output? [HTML - CSS]

In my Angular demo project, I have included basic text and a table. There is a print button that calls window.print() to print the page with applied styling. printPage() { window.print(); } CSS: @media print { @page { size: landscap ...

javascripthtmlcssangularprinting

Firefox is having trouble keeping <select> tags within their designated borders

I am currently developing a mobile app that requires the use of 3 <select> elements stacked on top of each other. It is crucial for these tags to align perfectly with each other and not extend beyond the boundaries of the background div. I have manag ...

htmlcssangularjsdrop-down-menu

The collapsing z-index menu in Bootstrap 4 is experiencing CSS issues and is not functioning correctly

I have a bootstrap 4 menu with a slide effect that is functioning correctly, but there seems to be an issue with the z-index value I have set for it. Specifically, there is some content within a parallax jumbotron that is overlapping the menu links. I need ...

htmlcsstwitter-bootstrap

I am unable to view the input appearing inside the input box on my React/HTML application

I have been developing a React app for building portfolios, but I am facing an issue where I cannot see any text that I type into my input boxes. Can someone please help me troubleshoot this issue? Any assistance would be greatly appreciated. I have made ...

javascripthtmlreactjs

tips for organizing the <div> element horizontally within a design

I have reviewed some similar questions that have been posted and attempted to apply their solutions to my code. However, I am still encountering difficulties. Below is the code that I need help with. I am looking to organize the main content along with t ...

htmlcss

Customizing HTML element tags in MUI: Best practices

Using the most recent version of MUI (v5) and incorporating CssBaseline from @mui/materials. Typically, in CSS, I would set up my styles like this: body, html, #root { width: 100%; height: 100%; min-height: 100%; margin: 0; padding: 0; font-siz ...

cssreactjsmaterial-ui

Being required to design a distinct div for every article I am extracting from the API

In the midst of developing a website for my college project, I have successfully configured my news API to pull and display data using JavaScript. Currently, I am faced with the challenge of having to create separate div elements each time I want to add n ...

javascripthtmlcss

What are some ways I can showcase the outcomes of my multiple choice quiz?

I need help with my multiple choice quiz. I want to display the answers under each question and highlight the correct one in bold. Here is the current code: function check() { var question1 = document.quiz.question1.value; var question2 = document.q ...

javascripthtml

The HTML image is not updating, the function does not appear to be triggering

My attempt to add a source to an image using JavaScript and some jQuery code I found online isn't working as expected: <html> <head> <script src = "http://www.example.com/images/"> var count=1; var initnumber=100 ...

javascriptjqueryhtml

What is the best way to create a toggle effect for a <nav> bar that appears from beneath a div?

I need assistance with a navigation setup where the nav (located inside the header) needs to be connected to the bottom of a div named .menu_bar. The desired behavior is for the nav to slide down from directly underneath the .menu_bar when toggled, but cur ...

javascriptjqueryhtmlcss

Is there a way to customize the background size of the selected date in the DateCalendar component of MUI?

I need assistance with modifying the background size of DateCalendar's selected date in MUI (material-UI). I attempted to adjust it by changing some CSS properties using styled(DateCalendar) as shown below. However, clicking on dates caused issues wit ...

cssreactjsmaterial-ui

What is the best way to show the selected values of dropdown and checkboxes on a redirected page for confirmation using PHP?

<form action="action.php" method="POST" target="_self"> <table class="main" border="1" height="100%" align="center">t; <h3> <p id="id1" style="background-color: #9FF" >Registration form</p></h3> <tr><t ...

phphtml

What is the method for centering an input field with inline CSS?

Is there a way to center align an input text box on a webpage using only inline CSS? I have tried various techniques, including the following code snippet, but nothing seems to work: <input type="text" id="myInput" style= "margi ...

htmlcss

Refreshing page using jQuery following an AJAX request

My script is functioning properly, however the use of location.reload(); does not seem to be effective. I am aiming to refresh the page after deselecting the last checkbox. $(".catcf, .coursetype, .yearcf, .manthcf, .venucf").on('click' ...

htmljqueryajax

Fluidly Floating and Steadfastly Sized Element

Creating a 4-column Panel Bar Layout with Specific Conditions: #c1, #c2 = fixed width #c3 autofill with remaining width #c4 auto width (adjusts based on content) corresponding to #c3 Requirements: Float #c4 to the right instead of absolute positionin ...

htmlcsscss-floatfixed-widthvariable-width

Prevent the resizing of my website on iOS devices using HTML and CSS

I'm encountering an issue with a website I developed that seems to be resizable on certain iOS devices, including the new iPhone X. I haven't been able to replicate this behavior on other standard websites. Perhaps there's a simple CSS solut ...

javascripthtmlcssreactjs

Creating an Angular form that adapts to changing input values

I'm encountering a problem with angular not recognizing the dynamic values from my inputs. My objective is to have angular populate hidden form fields with lat/lon when a user clicks on the map. The user then submits the form, but the data ends up mi ...

javascripthtmlangularjsformsdata-binding

Column flexbox self is not functioning properly with text ellipsis

Is there a way to apply text-overflow: ellipsis to a flexbox element? I know I need to set the width and overflow: hidden, but how can I achieve the ellipsis effect within the grey block when the text overflows? Removing the flexbox property from the < ...

htmlcss

Achieve the positioning of a Bootstrap navbar within a div without it getting wrapped by following

I have been attempting to overlay my navbar on top of a background image by nesting it within a div and using absolute positioning. However, I've run into an issue where the navbar-header/navbar-brand section causes the rest of the navbar to wrap onto ...

htmlcsstwitter-bootstrap

Struggling with a dynamic HTML table using Mustache and Icanhazjs technologies

I am encountering an issue while attempting to construct a dynamic table using Icanhazjs (Mustache). The table data is consistently rendered outside the table tag, resulting in my data not being displayed within the table itself. To observe the output, pl ...

htmlmustacheicanhaz.js