Troubleshooting problem with CSS combinators

I'm having trouble with this, if I have these two tag combinations in my CSS:

aside h4 {
  color:yellow;
}

article h4 {
  color:blue;
}

And I apply them to the following HTML:

    <div>
        <h4>International new</h4>
        <article>
            <h4 class="headline">New Developments!</h4>
            <aside>
                <h4>Impact On Marckets</h4>
            </aside>
        </article>
    </div>

Why is Impact On Marckets blue? I thought it should be yellow. I thought in this case the tags should apply from the inside out, not the opposite. Is it something about the Article tag?

.headline {
    color:red;
}

aside h4 {
    font-style: italic !important;
    color:yellow;
}

article h4 {
    font-style:normal;
    color:blue;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
    <div>
        <h4>International new</h4>
        <article>
            <h4 class="headline">New Developments!</h4>
            <aside>
                <h4>Impact On Marckets</h4>
            </aside>
        </article>
    </div>
</body>
</html>

tag

Answer №1

The reason for this outcome is the equal specificity of article h4 and aside h4. When two selectors have the same level of specificity, the style defined in the last rule of your CSS file will take precedence.

Specificity in CSS is a measure of importance given to a particular style declaration based on the selector's structure. In cases where specificity values are equal, the style defined in the latest CSS rule will be applied. Specificity matters only when targeting the same element. Directly targeted CSS rules will always override inherited styles from ancestors.

Learn more about specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

If you reverse the order of these styles in your CSS, the text will appear in yellow.

.headline {
    color:red;
}

article h4 {
    font-style:normal;
    color:blue;
}

aside h4 {
    font-style: italic !important;
    color:yellow;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
    <div>
        <h4>International new</h4>
        <article>
            <h4 class="headline">New Developments!</h4>
            <aside>
                <h4>Impact On Marckets</h4>
            </aside>
        </article>
    </div>
</body>
</html>

Answer №2

The reason for your issue lies in the specificity of CSS selectors. For more information on this topic, you can refer to this resource.

To resolve the problem, you simply need to be more specific when defining your CSS rules. For example, if you take the following rule:

article h4 {
    font-style: normal;
    color: blue;
}

and add the .headline class, the text will change to yellow:

article h4.headline {
    font-style: normal;
    color: blue;
}

You can view the updated rule in action in this fiddle: http://jsfiddle.net/x73hne3v/

Answer №3

The reason why the article h4 CSS rule is not being applied is because it is located at the bottom of the page. To fix this issue, try placing the aside h4 rule at the bottom instead, as it will override the previous reference.

It has been suggested by others to increase the CSS specificity by making your CSS rules more specific.

Answer №4

It appears that the only property you need to modify in your css file is:

aside h4 {
    font-style: italic !important;
    color:yellow !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

What is the method for incorporating this effect into the final sentence of a text?

I am trying to create a unique design effect by applying a custom border to only the last line of text. You can see an example here. In this scenario, the target text is "2000 years old." (with that specific length) and not the entire width of the parent ...

Is it possible to enable tab navigation for a button located within a div when the div is in focus?

I have a component set up like this: (Check out the Code Sandbox example here: https://codesandbox.io/s/boring-platform-1ry6b2?file=/src/App.js) https://i.sstatic.net/ZuxdL.png The section highlighted in green is a div. Here is the code snippet: import { ...

Missing Overlay in jQuery UI Dialog

I have integrated the jquery ui dialogue into my asp.net mvc application. I customized the styles related to ui dialogues by copying and modifying them. For the overlay, I used the following style: .ui-widget-overlay { background: #666666 url(im ...

difficulty generating a tooltip

Purpose: My main goal is to implement a tooltip feature where hovering over text triggers the display of a tooltip. To achieve this, I am seeking inspiration from an example on w3schools which can be found at this link. Current Implementation: render() { ...

What is the best way to implement automatic color changing in PHP code?

I have a MySQL table called 'contact number' that contains the field 'c_n'. I need to display data from this field and change the color based on the length of the value. If the field's value is less or more than 11 digits, the colo ...

Adjust the size of a panel in Extjs when its parent div is resized

Within my div, I have included an Extjs panel using the renderTo configuration option. Can someone please advise on how to adjust the panel size dynamically when the div is resized? Appreciate any help! Thank you. ...

Tips for inserting an element with a background color into an email using variables

I have encountered an issue while trying to send an email that includes an element from my component. The element is passed from Angular to C# and then sent to the customer. Here is the element: https://i.sstatic.net/2ky1b.png Everything looks good in ...

Can JavaScript executed within a web browser have the capability to manipulate files on the underlying host system's file system?

Is it possible to programmatically move files or folders from a website using code? I am aware that with Python and Node.js, this can be achieved through the OS, path, and fs modules. Can JavaScript running in a website also handle file management tasks ...

When the user clicks on the iframe, they will be redirected to the

My goal is to create a scenario where clicking on an iframe opens the same URL in a new browser tab, while ensuring that scroll and other mouse events within the iframe are not affected. I have experimented with various approaches but none have been succe ...

What is causing the pull-right class to not function correctly in Bootstrap version 4.1.0?

After upgrading from Bootstrap version 3+ to 4.1.0, I encountered an issue with aligning elements using pull-right and pull-left, as well as float-right and float-left. The problem persists despite my efforts. Here is an image (https://i.sstatic.net/Z6ba3. ...

Toggle button color on click by using ng-click on a different button

As a newcomer to Angular, I am facing an issue. I have two buttons - button1 and button2. What I want is that when I click on button1, its color changes from green to red. Then, when I click on button2, the color of button1 should revert back to green. How ...

What is the best way to display a segment of an SVG on a Canvas element?

Main Issue: The main objective here is to display a specific part of an SVG image on a fixed size Canvas element within a web page. Approach I Tried: After considering various options, such as using CanVG, I thought about utilizing the viewBox attribute ...

Python web scraping with BeautifulSoup to gather information

After searching on zillow, I aim to extract all items from the unordered list and target a specific class: "StyledPropertyCardDataWrapper-c11n-8-84-3__sc-1omp4c3-0 bKpguY property-card-data" This class contains information such as price, address ...

Choose various files (from various directories) using a single input type file element

Is it possible to select multiple files from different directories for the same input file type element using only HTML? I am aware of the multiple attribute, but it seems to only allow selecting several files at a time in the same directory within the b ...

Arranging divs in a row using jQuery sortable technique

Greetings! I have been attempting to achieve horizontal sorting for two divs but have encountered a couple of issues. Firstly, the divs do not align correctly upon initial page load and secondly, while they can be dragged around, the sortable functionality ...

Creating a two-dimensional canvas within a div element using the console

I have some code that currently generates an image in the console when I hit F12. However, I would like to display this image inside a more user-friendly area such as a div on the webpage. I attempted to create a <div class = "mylog"> to place the i ...

Adjusting the Size of a Slideshow: HTML Tutorial

I'm currently working on a project to develop an interactive website using PHP and HTML for educational purposes. My main challenge is trying to implement a 'slideshow' similar to the one demonstrated in this video: https://www.youtube.com/ ...

The image in drag and drop ghost preview is not appearing on Firefox

I want to show a ghost element instead of the default browser preview while dragging and dropping. However, in Firefox, the image inside the ghost element is not displayed during dragging. Oddly enough, if I drop it and then drag again, the image does appe ...

What is the best way to change the inner text of an HTML element without causing it to resize or impacting its overflow?

Is it possible to change the text content of an HTML element without affecting its size? I am using Bootstrap and the card component. I want to dynamically update the card text without impacting the overflow that I have already set. Here is a sample of t ...

What is the best way to animate an element when it comes into the user's view

In order to activate the animation of the skill-bars when the element is displayed on the website, I am seeking a solution where scrolling down through the section triggers the animation. Although I have managed to conceptualize and implement the idea with ...