The importance of CSS style prioritization

I can't seem to figure out CSS declaration priority. I have an external CSS file with a rule and some inline CSS declarations that are supposed to override it. According to my understanding, inline styles should take precedence over external CSS rules. But in Chrome, the second row of the table is displaying blue instead of red as defined in the internal style declarations.

What am I overlooking here?

Below is the HTML code:

<html>
<head>
    <link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection">
    <style type="text/css">
        td,tr,th
        {
            background: Red;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>11</td>
            <td>22</td>
        </tr>
        <tr>
            <td>aa</td>
            <td>bb</td>
        </tr>
    </table>
</body>
</html>

And here is the CSS file content:

tbody tr:nth-child(even) td,
tbody tr.even td
{
    background: #e5ecf9;
}

Answer №1

Calculating the highest specificity rule depends on the number of selectors used.

If you want a better understanding of CSS specificity, check out these two great visualizations: http://www.example.com/css-specificity-visualization and http://www.example.com/css-specificity-wars

Avoid using !important as a quick fix to override styles. Instead, adjust the selector to ensure your rule has equal or greater weight than the overridden rule (see Implications of Using "!important" in CSS).

For instance, consider this code to set all cells' background color to red:

thead tr:nth-child(1n) th, tbody tr:nth-child(1n) td {
    background:red;
}

Answer №2

When it comes to this scenario, the more detailed guideline takes precedence.

Give this a shot in your HTML:

<style type="text/css" media="screen, projection">
    tbody tr:nth-child(even) td,
    tbody tr:nth-child(even) tr,
    tbody tr:nth-child(even) th
    {
        background: Red;
    }
</style>

Warm regards

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

Issues with displaying iframes on iOS devices, particularly iPhones

There is a strange issue I am encountering with iframes not displaying on certain phones while working perfectly on others. (They show up fine on all android devices) (However, they do not work on iphone 6 and 7 but surprisingly work on 7 plus, 7S, and a ...

Challenging jQuery AJAX journey

After tirelessly searching the web, I am still unable to solve this issue and cannot understand why it is not functioning. My JavaScript code seems to work only on Firefox and fails to run on any other browser. So, I have made the decision to switch to j ...

Retrieve the XPath for the elements that combine to create a specific string within an HTML document

Issue: Searching for the xpath of node(s) that contribute to a text string in an HTML document. Using Python language (lxml to parse the document) To demonstrate, let's examine the following document: <HTML> <HEAD> <TITLE>samp ...

The PHP code I wrote will be executed on the subsequent HTML page, not the one currently being displayed

I have a school project where I am creating a quiz-game web page. Each question will have 4 possible answers. The questions, along with their 4 answer choices and the correct answer, are randomly selected from a database. However, I am facing an issue w ...

Discovering the Email Address input field on Disneyworld's login page for sending text with Selenium in Python

I'm currently working on a project to automate the login process for my Disney World account. However, I've hit a roadblock in locating the email address element. While I've been successful in automating other buttons on the Disney World web ...

IE10 has a problem with the height being set to 100%, but it seems to work fine in Quirks mode in IE and all

Check out this page for reference: I've noticed an issue with scrolling in Internet Explorer, while other browsers seem to be fine. Can you help me understand why IE is causing the scroll and how I can fix it? Thank you, Judson Here's the cod ...

Unsuccessful attempt at a basic CSS transition - no success

I'm currently trying to create an image with a gradient that disappears on hover, but I'm struggling to get the transition effect to work. I've experimented with various webkit transitions without success. Here's the HTML: <a href= ...

What is required to create a basic application that can function offline while featuring an HTML/CSS user interface?

Newbie inquiry: I am interested in creating a small application that can run offline on a desktop computer. The amount of data to be saved is minimal, so I have the option to use a file or some type of database. However, my main question is: What languag ...

Create a visually appealing DataGrid cell by incorporating a vibrant colored oval with text or an icon inside

I'm in need of assistance with the mui/x-data-grid plugin. My goal is to display a cell within the grid containing both text and an icon, based on the value of the text. Unfortunately, I have been unable to achieve this so far. Here is the link to the ...

Incorporating a bottom line or border within the input field with a specified width

I have been struggling with styling an input field. I added a 1px solid #000 border around it, but now I need to include a thicker black line within the input itself. I tried using border-bottom: 5px solid #000, but that just created a border at the bottom ...

Looking for the Xpath to locate the title within the Span class

Testing is a new field for me and I could use some guidance on Xpath with the following code: Element's InnerHTML: <img class="icon" src="custom/icons/Injury.png"> <span class="buttonText"><span class="title">An injury</span> ...

Troubleshooting jQuery click event listeners and AJAX requests: Issue with second listener not functioning properly

There are two click listeners implemented on a page, one for a sub-navigation menu (which dynamically changes the list items in the menu) and another for a main menu (which dynamically changes the content in another section). <nav class="sub-nav"> ...

What steps should I take to design a mobile-friendly navigation bar?

I have shared the code for my navigation bar in a previous post Fixing Nav Bar to top of page. Now, I want to create a mobile version of it, but I am new to designing for mobile devices. Based on feedback and some CSS tweaking, I have managed to make it wo ...

Feature of Thymeleaf: Download functionality

When working with my Thymeleaf template, I have successfully processed Java map content to HTML using the following code: <div th:each="file : ${files}"> <span th:text="${file.key}"></span> <!-- here file.key is retrieved --> ...

Encountering problems with Node Sass versions while trying to import custom scss files into app.js

I've encountered several articles on stack that didn't quite solve my issues. The problem arose when I tried to import a custom SCSS file into my React app.js to override bootstrap theme colors. Here are the style imports in my App.js: import &q ...

Tooltips envelope around themselves

Several paragraphs contain tooltips, but some of them break onto a new line instead of staying within the text. <div class="row"> ... </div> Fiddle: https://jsfiddle.net/LhjmLw8k/29/ The issue is that certain words like "Trasimeno" and ...

Pictures in the portfolio failing to load on Mozilla Firefox

Having some trouble with my WordPress website bmfconstruction.com.au/new/. In the project section, all images are loading correctly in Chrome, Opera, and IE. However, when it comes to Firefox, none of the images seem to be showing up. I've tested this ...

Retrieve the order in which the class names are displayed within the user interface

In the following code snippet, each div element is assigned a common class name. <div id="category_9" class="list_item" data-item_ids="[38]"</div> <div id="category_2" class="list_item" data-ite ...

What is the best way to establish anchors for *ngFor elements in Angular 2 and beyond?

I have a component that displays items using *ngFor. My goal is to scroll down to the element with anchor #3. Here's the code snippet: @Component({ selector: 'my-app', template: ` <button (click)="scroll(3)">scroll 2</butt ...

Utilize the body tag to divide elements in ReactJS

Is there a way to assign different body tags to specific components? For example, I want to apply one body tag to the dashboard component and a different one for the sign up page component. ...