Mix-up of inheritance and specificity within CSS

Trying to comprehend the discrepancy between two CSS rules, I am currently reviewing this HTML file.

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title>specificity</title>
  <!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  <style>
    aside,
    article,
    section,
    header,
    footer,
    nav {
      display: block;
    }
    body {
      font-family: Georgia;
      font-size: 120%;
    }
    /*add styles here*/
    #mainContent p {
      color: red;
    }
    p {
      color: blue;
    }
    .green {
      color: green;
    }
    /**/
  </style>
</head>

<body>
  <section id="mainContent">
    <p>I am a paragraph nested inside a section. I also have a <strong class="green">strong tag</strong> nested inside of me.</p>
  </section>
</body>

</html>

Still grappling with the clarity of the following statement:

Specificity works just fine until inheritance is involved. If a child element has a style that differs or conflicts with the parent styles, the child styles always win. So for strong element above, we are seeing inheritance and not specificity.

However, if I assign the green class to the <p> element, an observation of specificity can be made as the green style is disregarded in favor of the style applied with an ID to the paragraph.

The query then arises, given that <p> is a child of <section>, shouldn't inheritance be evident here as per the previous statement, similar to what is observed with the <strong> element?

Answer №1

Each CSS rule is only valid for the specific element selected by its selector.

When you have a rule like p { ... }, it applies to all p elements on the page.

However, if your rule is #mainContent p { ... }, then it only applies to p elements nested within an element with the id of mainContent.

If a p element is inside the element with id mainContent, the rule #mainContent p { ... } takes precedence because it is more targeted and specific.

Rules that do not directly target the element, like the strong element in this case, will not apply.

In the example given, the .green { ... } rule is targeting the strong element specifically, so it will be applied to that element.

So how does inheritance work in CSS?

Property inheritance can occur when there is an explicit rule targeting the element with the property set to inherit. For example, strong { color:inherit; } would force the color of a strong element to inherit from its parent if no other color rule is in place.

If there are no rules defining a specific property for a particular element, it defaults to an inherited value if that property is specified as such. The color property is one that can be inherited.

Therefore, if there are multiple color rules targeting a specific element, inheritance may not take effect.

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

Using jQuery to drag a div and drop it to swap out an image in a different

I am looking to implement a drag and drop function where I can move elements from one div to another, each containing different images. However, I want the image displayed in the second div to change based on the element being dragged. For example: When d ...

Displaying a dynamic splash screen during the resource-loading process on an Android application

I would like to implement an animated image (currently using a set of PNGs) as a splash screen while my resources are loading. I have successfully displayed the splash screen using this method. However, the issue I am facing is that the splash screen appe ...

Struggling with CSS to display images

Struggling to align my images within the designated red lines in the CSS sections I created. Can't seem to get it right. Here's my HTML: <!-- Your code goes here --> <div class="container"> <section class="left"> <h1& ...

Show a multipage report of a MySQL database

I have a MySQL database with some information that I would like to make accessible to everyone, with an option to edit. <?php $username = "VKSolutions"; $password = "VKSolutions@1"; $hostname = "VKSolutions.hostedresource.com"; $database = "VKSolut ...

Seeking to duplicate script for a new table without making any changes to the original script

I am working with two tables that require the capability to dynamically add and delete rows using separate scripts. How can I modify the second script so that it only affects the second table and not the first one? Table: <table id="myTable" class=" t ...

The percentage height setting for a div is not functioning properly, but setting the height in pixels or viewport

Within a dialog box body, I am attempting to display a table and have applied a CSS class to the wrapping div. When specifying the height in pixels or viewport height units, it works as expected. However, when using a percentage like 50%, the height of the ...

Django causing CSS issues following the utilization of an if statement

I have been working on adding a dropdown list to my navbar, which I created using Bootstrap. However, whenever I place the dropdown menu inside an if statement for looping categories into a list, it seems to be breaking the CSS. Check out the navbar witho ...

How to set textboxes as read-only depending on the drop-down choice?

After developing some scripts to automatically populate the data-length and data-width in textboxes based on a dropdown selection, I now face the challenge of making the .width and .length textboxes readonly depending on the selected dropdown option. Is t ...

ReactJS encountering an invalid dropzone element

Encountering the error "invalid dropzone element". I added var Dropzone = require('react-dropzone'); to my webpack.config.js file in hopes of activating the Dropzone element. This is what is included in my JavaScript file, copied from a Gith ...

Customize the Emotion Styled Material UI Tab Indicator Overwrite

Looking for a way to customize the appearance of tab indicators using Emotion styled components. I'm struggling to target nested classes in my code. Here's what I have so far: const StyledTabs = styled(Tabs)( { classes: { indicator: ...

Steps to turn off fancybox for mobile and show the full image instead

In this scenario... I am seeking a way to deactivate fancybox functionality on mobile devices. I have already discovered one method to disable it... And now I want to directly show the large image in the a href="xxx_large.jpg" instead of using the img src= ...

Is there a way for me to insert a new column into a table using jinja?

As a beginner in the final project of CS50x, I am working on creating a webpage that allows users to input weights into a database table and then view those weights along with weight gain/loss information. I am using jinja and python to render a query resu ...

Display a popup notification when clicking in Angular 2

Can anyone help me with displaying a popup message when I click on the select button that says "you have selected this event"? I am using Angular 2. <button type="button" class="button event-buttons" [disabled]="!owned" style=""(click)="eventSet()"&g ...

Python's Selenium encountering a NoSuchElementException with the error message "./ancestor-or-self::form"

Trying to create a Python script that allows me to input my credentials and tweet text in the Python console. The script should then log in and post a tweet using Selenium. Everything works fine, except for the final click on the Tweet button which is caus ...

Position your Logo to the left, align the Menu in the center, and place top links on the right using Bootstrap

I am currently struggling to create two rows with the logo aligned to the left, 'Home' and 'User' menu links at the top right corner, and a second row displaying 'Link1', 'Link2', 'Link3' menus centered. Th ...

SASS: Issues with the @media query functionality

My SASS file is giving me trouble with the media query. The background color changes properly, but the text remains unaffected. I would greatly appreciate your assistance with this issue. Below is the HTML and SASS code snippets in question: <!-- HTM ...

I want to create a Bootstrap 4 card deck that includes expand/collapse functionality for its content. The expanded content should only impact the current

I am experiencing an issue with my card decks and expand/collapse functionality. Currently, when I expand one card in the deck, all the other cards in the row also expand, leaving a large blank area. This becomes problematic especially when the content is ...

What is the best way to save website information in SQL Server?

My website is www dot abc dot com and it contains some valuable content that I want to store in SQL Server. Can this be done using DOM? If not, please recommend alternative methods. I've searched this forum for similar solutions but haven't found ...

Below are the steps to handle incorrect input after receiving only one letter:

H-I This is my input .centered-name { width: 80%; margin: auto; } .group { width: 100%; overflow: hidden; position: relative; } .label { position: absolute; top: 40px; color: #666666; font: 400 26px Roboto; cursor: text; transit ...

When implementing the "box-sizing: border-box" reset, the layout may become distorted if the image height is specified in percentage

I am facing an issue with my header containing a logo when I apply the box-sizing: border-box reset. Here is the functional header: .header-container { height: 60px; width: 100%; background-color: #333333; color: white; display: flex; justif ...