373 questions
0
votes
0
answers
21
views
Library's global styles overriding scoped CSS layers
I am working on a Vue 3 project using SCSS and it's using Histoire to document its components. I just stumbled upon an irritating problem: the project uses layers on all classes to separate ui ...
0
votes
0
answers
12
views
CSS override issue: .abnormal class not overriding .plan-box div padding [duplicate]
I'm working on a pricing section where each plan is inside a `.plan-box`. All direct `<div>` elements inside `.plan-box` have a general style:
```css
.plan-box div {
padding: 15px;
...
2
votes
1
answer
76
views
Why are non-matching CSS classes contributing to selector specificity calculation? [duplicate]
I have the following HTML & CSS:
<div class="p-12 border both-have">
<div class="p-12 border both-have my-inner">
@import "tailwindcss";
.both-have, ....
- 23
0
votes
0
answers
49
views
Under what circumstances can a CSS rule with specificity 0-0-1 override one with specificity 0-1-0? [duplicate]
In the screenshot below, you can see that a font-family declaration with a rule specificity 0-0-1 is taking precedence over one with specificity 0-1-0.
My understanding is that order of rules only ...
- 1,315
6
votes
1
answer
118
views
Why does CSS grouping seem to affect selector specificity in this example?
From what I understand of CSS specificity and cascades, if an element is targeted twice with selectors of the same specificity then the latter style should be applied. However, this doesn't seem to be ...
- 61
0
votes
1
answer
27
views
Precedence in parent/child classes of same specificity [duplicate]
In the given code snippet why font size of h1 element is 36px?
I have these questions :
If h1 is defined 1st, then the font size of main(i.e. 32px) should be applied on the h1 heading, as it is ...
0
votes
0
answers
44
views
why class selector property is not getting high precedence over type precedence? [duplicate]
I am trying to understand specificity in the css. I have used class selector .grandparent and type selector p for changing the color of all the paragraph inside each.grandparent.
What I understand is ...
- 540
0
votes
1
answer
77
views
Why is the selector with lower specificity being applied? [duplicate]
See the "Show" button underneath and to the right of "Open modal" on https://fresh-rfui-test.deno.dev/islands.
I have:
<button type="button" class="bg-neutral-50 ...
- 19.6k
0
votes
1
answer
38
views
css a element selector overriding bottom element selectors
hello,
I am trying color my paragraph tag but i unavailable to do because top p tag (element selector) is overriding bottom p tag.
it work when i write tag name but i want them to automatically ...
- 139
4
votes
2
answers
65
views
What is the total specificity for this CSS Selector? button:not(#mainBtn, .cta)
On MDN Web Docs website, they have mentioned that the total specificity for the selector button:not(#mainBtn, .cta) is as follows:
| Selector | Identifiers | Classes | Elements | ...
0
votes
1
answer
35
views
Why * CSS selector gets precedence in a simple example [duplicate]
While coding today, I ran into a surprise - element CSS rule with no specificity is being used, even when a rule with higher specificity exists.
In the example below, I would expect:
Text1 is blue
...
- 3,584
4
votes
1
answer
98
views
Why is the font-size, but not the color, property applying to elements?
I'm self-teaching myself Html/Css, kindly explain to me like a dummy(phew!)
Help clear the doubt where I tried to target my list items in an unordered list. I realized that color property couldn't be ...
1
vote
2
answers
71
views
Trying to understand specificity calculation in CSS
I am reading MDN docs here. They are explaining specificity in CSS. For button:not(#mainBtn, .cta), specificity is given as 1-0-1. Since, there is one class involved here, I think the specificity ...
- 970
0
votes
1
answer
924
views
What is the best way to style elements in SCSS based on a class in the parent, such as a theme class
This is an old project. The theme adds a class to body or another root element. I need to style fonts, backgrounds, based on the theme, but this often leads to structures as:
.theme-light {
...
....
- 187
0
votes
0
answers
40
views
element style declared twice in css but css is not appling the stlye declared at last why is it so?
css selector specificity is not behaving the expected way.
this is the HTML Code
<nav>
<p>This is the navigation</p>
<a href="blog.html">Blog</a>
...
