What is the reason this universal selector property cannot be overridden?

Imagine having a table in HTML and adding the following CSS:

* { font-family: Verdana }
table { font-family: Arial }

Despite specifically setting the font-family to Arial for the table, it continues to display as Verdana. However, if another property like background-color: blue is added, then the style takes effect. It appears that there is some complexity with inheritance at play here that I am not grasping fully. While the asterisk selector targets all elements, the table selector should override it for its child elements given its higher specificity.

css

Answer №1

It's important to note that the * rule is not limited to specific elements such as TD, TR, TBODY, THEAD, TFOOT, and TH because you have explicitly overridden the default with inherit.

To avoid complications, I suggest applying font settings directly to either the html or body elements instead of relying on *.

In addition, consider including td in your CSS for the table element.

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 best way to define relative paths for content like CSS files?

Whenever I link to a file, I always find myself having to include the entire absolute path like this <link rel="stylesheet" type="text/css" href="F:/XmppOld/XAMPP2/htdocs/MAIN_SITE_LAYOUT/css/stylemainpage.css" /> I want to simplify it to ...

htmlcss

What causes the empty gap between the accordion title and its content in Bootstrap?

I'm currently working on a Bootstrap accordion and I've encountered a problem where a white line appears underneath the heading whenever I click to expand it. Here's the accordion Here's my current code snippet: HTML - All divs do clo ...

htmlcssbootstrap-5

Maintaining the original layout upon refreshing the page

Incorporating two forms on my website, I added a button that transitions between the login and sign-up forms smoothly. The process is as follows: Initially, the login form is displayed; clicking the button switches to the sign-up form. Proceeding to subm ...

javascriptjqueryhtmlcss

The internal style sheet is being overridden by an earlier declared external CSS in the HTML document

Experimenting with the front end of a website using the latest version of bootstrap, 3.0. I am adjusting things by inspecting elements in Firebug, but something strange keeps catching my attention. Even though my <head> is structured like this: < ...

csstwitter-bootstrapstyles

Interactive Quiz Game Using Vanilla JavaScript

I'm in the process of creating a drag-and-drop quiz using only HTML, CSS, and vanilla JavaScript. The concept involves having a div for answers and another for questions. The questions contain blank divs where draggable answers can be dropped. For in ...

javascripthtmlcssdrag-and-drop

Remove the items from the class dropdown list on the TinyMCE link button and popup

When using TinyMCE and clicking the link button, a popup window will appear asking for link details. One of the fields in this popup is for adding a CSS "Class". Is there a way to clear this list? I noticed that there is a plugin setting within advlink wh ...

csshyperlinktinymce

Guide on how to align the bootstrap popover's arrow tip with a text field using CSS and jQuery

I have tried multiple solutions from various questions on Stack Overflow, but I am still struggling to position the arrow tip of the bootstrap popover correctly. html: <input type = "text" id="account_create"/> js: $('.popov ...

javascriptjquerycsstwitter-bootstrap

Why isn't the main body of CSS extending across the entire page?

I feel like I'm running headfirst into a wall trying to figure out why the code I wrote for this specific website isn't quite working properly. The main content area of my pages (the white space in the link below) is supposed to extend from the ...

htmlcssspacing

Is there a way to set it up so that clicking on a small image will automatically switch to the corresponding larger size image?

For instance, I have 4 small images and 1 main image. When I click on a small image, the main image changes to display that selected picture. I was wondering if there is a specific value to place inside target=""? I prefer to only use HTML/CSS as I am no ...

csshtml

I spy a space, just waiting for my image to take its place

I attempted to position my image within a specific space but encountered difficulties, you can view the jsfiddle here. As seen, the right image and overlay are not aligning correctly as they should. My goal is for them to fit perfectly within the designate ...

htmlcssimagepositionoverlay

Bootstrap 4 experiences issues with modal dialogs

I am experiencing an issue with my code not working on Bootstrap 4. When I click on the 'overview' button, the page darkens but the dialog does not appear. This functionality worked fine with the old version of Bootstrap. Can someone please assis ...

javascriptcssrubybootstrap-modalhaml

Switching out the default squares in pagination for circles

Attempting to incorporate pagination using the bootstrap class .circle { position: absolute; left: 0; width: 20px; height: 20px; border: 2px solid #777; border-radius: 100%; } .pagination>li>a, .pagination>li>span { border-r ...

htmlcsstwitter-bootstrap

The formatting for C++ lnk2019 and lnk2020 is correct

Seeking assistance with my code and the errors I'm encountering - any guidance would be highly valued. Currently facing an issue with getNextAcountNumber. I attempted to assign the account ID value, but encountered a problem as it is a private member ...

c++cssfatal-errorlnk2019

Choose from the dropdown menu and verify with a CAPTCHA

I am currently working on my website. I need help with implementing a dropdown menu that allows for selecting multiple options at once. Can anyone provide guidance on JavaScript validation and also captcha implementation? The current script only allows for ...

phpjavascriptjqueryhtmlcss

Is it possible to optimize javascript & css bundling for a static website using webpack?

I have been working on organizing my javascript files for a static HTML website. Currently, they are scattered across different HTML files using the script tag. To streamline this, I have created a main.js file that requires all the other files. This main ...

javascriptjqueryhtmlcsswebpack

Ensure that text and images are perfectly aligned along a single vertical line

I have the following code snippet using Bootstrap 4:- <div class="container"> <div class="row "> <div class="col-xl-12"> <img src="~/img/img1.png" style="height:60.3px;width:750px" class="mx-auto d-none d-sm-bl ...

csstwitter-bootstrapbootstrap-4responsive-design

Place the file in the designated area for styling purposes

Within the pluploader, a file drop zone exists with the identifier dropFilesHere; var uploader = new plupload.Uploader({ drop_element : "dropFilesHere", /*...*/ }); If a user hovers a file over the drop zone, I want to customize it* ...

javascriptjquerycsshtmlplupload

Achieving a consistent border-radius effect during hover transitions

I designed a div that initially displays an image, but upon hovering over it, a second div with text and a solid colored background appears to mask the original content. To see what I'm talking about, check out my jsfiddle: 'Mask on Hover' ...

htmlcsscss-transitions

Adjust the size of a Div/Element in real-time using a randomly calculated number

Currently, I am working on a script that is designed to change the dimensions of a div element when a button on the page is clicked. The JavaScript function connected to this button should generate a random number between 1 and 1000, setting it as both the ...

javascripthtmlcss

"Customizing the properties of an Angular Material mat-slide-toggle: A step-by-step

<mat-slide-toggle>Slide Me!</mat-slide-toggle> https://i.stack.imgur.com/p1hzD.png https://i.stack.imgur.com/aCzs1.png Is it possible to customize the toggle-thumb-icon to increase its length and position it at the end of the bar? ...

cssangularsassangular-material2angular8