The Power of the CSS Universal Selector and Specificity

Currently exploring the puzzling scenario where .x seems to have higher specificity than *.x, despite expectations.

Shouldn't *.x technically have a specificity of 0-0-1-1 (1 class, 1 tag) while .x is just one class with specificity 0-0-1-0?

Let's take a look at this simple code snippet:

*.x { color: blue; }

.x { color: red }
<p class="x">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, nam.</p>

The expected outcome should be blue. To illustrate an anticipated behavior, I swapped out * for another element (p):

p.x { color: blue; }

.x { color: red }
<p class="x">This time it works.</p>

csscss-specificity

Answer №1

The universal selector (*), as explained in detail on Mozilla's documentation, does not impact specificity. This means that the styles applied by the latter selector will take precedence.

When using an asterisk (*) as the universal selector in CSS, it matches any single element regardless of type. It is essentially a shorthand for targeting all elements. If you omit the asterisk and use just simple selectors like .warning or *.warning, they are considered equivalent in terms of styling.

Answer №2

It's completely normal to see this outcome. According to the specifications set by W3C:

" Specificity of a selector is determined for a particular element as follows:

  • calculate the number of ID selectors in the selector (= A)
  • calculate the number of class selectors, attribute selectors, and pseudo-classes in the selector (= B)
  • calculate the number of type selectors and pseudo-elements in the selector (= C)
  • exclude the universal selector

"

Pay attention to the final point.

Source: https://www.w3.org/TR/selectors/#specificity

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

Implementing position sticky on a div depending on its content text - step by step guide

If the text inside the .newsDate matches the previous or next .newsDate, I want to make its position sticky when scrolling, until it reaches the next .newsMiddleCont div. What I'm trying to achieve: The same date on multiple news items should s ...

javascripthtmljquerycss

Do you need to align images side by side and have clickable images positioned beneath each one?

After searching high and low, I couldn't find a similar question. My goal is to transform this from a vertical layout to a horizontal one: https://i.stack.imgur.com/4kZNM.png Check out the code snippet below: ghost<br class="newline"> <img ...

htmlcss

Steps for including a solid bottom border in a toggled navigation bar that is responsive

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l ...

htmlcssbootstrap-5

Using jQuery, you can easily modify the color of a TD cell by applying the css properties assigned to the div element

I am attempting to implement a jQuery script that will execute upon the loading of the document. The objective is for the script to retrieve the background color of a div located within a td cell and apply it as the background color for the respective td c ...

javascriptjqueryhtmlcss

Create a CSS popup alert that appears when a button is clicked, rather than using

Is there a way to customize CSS so that the popup alert focuses on a button instead of just appearing like this? https://i.sstatic.net/r25fd.jpg I have implemented this type of validation for a text box: <div class="form-group"> <label class="co ...

javascriptjqueryhtmlcss

What is the proper way to ensure a flex item takes up 50% of the space when a gap is included in

It appears that I have misunderstood something about flexbox and am struggling to resolve the issue correctly. In my current setup, I have a flexbox container with four columns as its direct children. I want each .flexbox-item to take up 50% of the contai ...

htmlcssflexbox

Adjust the dimensions of the canvas without disrupting the existing artwork

I am currently working on a pixel art application where I am facing an issue with saving images from the canvas. The saved image appears small and pixelated when I try to resize it. I would like to resize the image to larger dimensions, but I am unsure of ...

javascripthtmlcsscanvas

What class is utilized when multiple classes are specified?

When an element has two classes assigned to it and the CSS for the two classes conflict with each other, which one takes precedence? Is there a method to determine which one will be used? For instance: <p class='red small'>Some Text Here& ...

htmlcss

Is it possible to include a class in a 'label' element?

Forgive me if this is a simple question, but I'm curious - is it possible to add a class directly to a 'label' tag without needing to enclose it in a 'span' tag for styling? As I delve into "CSS: The Missing Manual," the book instr ...

cssclasslabelformsstyling

Is there a way to customize the default settings for a blueprint’s menu item?

https://i.sstatic.net/aNeJY.jpg In my react project, I implemented the Menu using MenuItem from '@blueprintjs/core'. The issue I encountered is that when hovering over a Menu item with children, they open from the right side. Is there a way to m ...

htmlcssreactjsstyled-componentsblueprint

Tips for properly positioning the ko validation message in case it is lengthy

I have implemented ko validation messages in order to validate input fields. Can anyone provide guidance on how to align the validation message correctly within the specified location? <input id="personName" class="form-control placeholder has-error" t ...

jqueryhtmlcssvalidationknockout.js

Creating a div overlay triggered by the addition of a child tag

Using the Paypal zoid feature, I have a button that opens an iframe in the parent div when clicked. However, the iframe causes the other contents of the website to shift around, making it look messy. I'm wondering if there is a way to make the parent ...

javascriptcsspaypaldom-events

Why is Chrome ignoring the flexbox CSS in the footer section of my website?

My footer flexbox CSS is working on various browsers and devices, but for some reason, Chrome on my iMac is not responding correctly. The website is www.batistaelectric.com. It works on my iPhone Chrome browser, Safari iPhone browser, iMac Safari browser, ...

htmlcssflexbox

Move your cursor over a div element while utilizing NgClass

I'm currently working on implementing a hover effect on a div using an Angular ngClass directive. Within the template file, I have a div element with the class "list-item-container" that includes another div with the class "list-item." This "list-item ...

htmlcssangularng-class

A guide on triggering a new chart to appear beside the adjacent <div> when a bar is clicked in a highchart

I'm a beginner with Highcharts and I have a requirement for two charts (let's call them Chart A and Chart B). Creating one chart is straightforward. What I need is, upon clicking on a bar in Chart A, a new chart (Chart B) should open next to the ...

javascriptjquerycsshighcharts

Ensure the content spans the full width of the container without displaying an overflow scrollbar by using the "position: absolute

I'm looking to create a small red div that spans the full width at a fixed top position within another div that has an overflow scroll property. I've provided a jsFiddle link for reference: http://jsfiddle.net/mCYLm/2/. The problem arises when t ...

cssgoogle-chromeoverflowcss-position

Is there a way to center a div vertically without specifying the screen height?

Trying to create a slider that aligns both horizontally and vertically can be a tricky task. To achieve this alignment, I have implemented the use of display: flex; within the following code: body { display: flex; flex-direction: column; justify-c ...

htmlcssflexboxpositioning

Struggling with Responsive Design Challenges with Grid Material UI?

Encountering an issue while using the Grid Component in my React JS Project. Let's delve into some code and then I'll explain what I aim to achieve with images: Assuming this is the rendered code: <div style="margin:100px 20%; width:80%" &g ...

cssreactjsresponsive-designmaterial-ui

The color of the navbar-toggler-icon in Bootstrap cannot be altered

While working on customizing my Bootstrap 5 navbar, I encountered an issue with changing the color of the navbar-toggler-icon. The preset colors, navbar-light and navbar-dark, didn't align with my theme, so I attempted to change the color to pure whit ...

htmlcsstwitter-bootstrapbootstrap-5

Android Font Icon Spacing Issue with IconFont (Fontastic)

After using Fontastic.me to create an iconfont, I encountered an issue specifically with the native browser of Android 4.2.2 and 4.3 (such as modern Samsung tablets). In these browsers, the characters in the entire font appear to have no width. This proble ...

androidcssicon-fonts