The dominance of CSS specificity in favor of the flex property compared to flex-basis

Is there a specificity among CSS properties that affects how styles are applied?

I've been experimenting with flexbox and encountered an interesting scenario:

The second selector .flex-basis-5 is added dynamically via JavaScript based on certain conditions. I expected the value of flex-basis to be overridden by the new selector, but it only takes effect if I use !important.

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.flex-item-7 {
  flex: 0 0 58.33%;
}

.flex-basis-5 {
  flex-basis: 41.66%;
}

<div class="flex-container">    
   <div class="flex-item-7 flex-basis-5">Some content</div>
</div>

Any insights or explanations would be appreciated!

htmlcssflexboxcss-specificity

Answer №1

It is essential to understand that specificity in CSS is determined by the selector, not the property itself. The properties applied to a selector will take effect in the order they are written, meaning that properties lower down in the set will override those higher up.

Based on your description, it seems like your code is functioning correctly. Here is a demonstration:

const btn = document.getElementById("toggle")
btn.addEventListener("click", () => {
  document.querySelector(".flex-item-7").classList.toggle("flex-basis-5")
})
.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.flex-item-7 {
  flex: 0 0 58.33%;
  background: #ccc;
}

.flex-basis-5 {
  flex-basis: 41.66%;
}

button {
  margin-top: 2em;
}
<div class="flex-container">    
   <div class="flex-item-7 flex-basis-5">Some content</div>
</div>

<button id="toggle">Toggle .flex-basis-5</button>

If you are observing different behavior in your application, it is possible that you have defined .flex-basis-5 before .flex-item-7, leading to lower precedence and thus being overridden by the later-defined styles.

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

Cannot find property in type, and the parameter is implicitly of an unspecified type

I've been encountering this issue where I keep getting an error message. I attempted to resolve it by setting "noImplicitAny": false in tsconfig.json, but unfortunately that did not work. As for the 'Property does not exist on type' error, I ...

javascripthtmlangulartypescriptfirebase

What is the reason behind hyperlinks breaking the continuity of the text on a line? Is there a

When I have a line of code containing several hyperlinks, my desired output is a single line. However, despite using CSS to set white-space to nowrap, the result is not as expected. The line of code in question is: <a href="profile.php?v=<?php echo ...

phphtmlcss

Select the send all text option when making a request

Using ajax, I can dynamically fill a drop-down select menu. My next step is to include all the text from the selected options in my request. <select name=".." > <option value="0"> ... </option> <option value="1"> xxx </option ...

javascriptjqueryhtmlajaxspring-mvc

Efficiently loading Angular views with lazy loading techniques

I am currently working on a calculator website powered by Angular. This single-page site is fully responsive and divided into 7 sections, each featuring different calculators based on user preferences. To improve loading time, I am interested in implementi ...

htmlangularjs

Persistent footer overlaps lower body content

Issue with Sticky Footer in Safari I recently added a sticky footer to my website, but I'm facing problems with it covering the body content on Safari. It works fine on Chrome and Firefox after adding a bottom margin to the body to adjust for the hei ...

htmlcssfooteroverlapsticky

Timer for searching webpages using Javascript

I am looking for a way to continuously search a specific webpage for a certain set of characters, even as the text on the page changes. I would like the program to refresh and search every minute without having to keep the webpage open. In addition, once ...

javascripthtml

Efficiently transferring input to a Typescript file

Is there a better way to capture user input in Angular and pass it to TypeScript? <form > <input #input type="text" [(ngModel)]="inputColor" (input)="sendInput(input.value)" /> </form> The current method involves creating a ...

htmlangulartypescript

Go back to the top by clicking on the image

Can you help me with a quick query? Is it feasible to automatically scroll back to the top after clicking on an image that serves as a reference to jQuery content? For instance, if I select an image in the "Portfolio" section of , I would like to be tak ...

javascriptjqueryhtmlreturnanchor

The importance of formatting in coding and how to effectively apply it

Why is proper code formatting so important for programmers? What are the benefits of following consistent formatting rules, and what exactly are these rules? Many programmers prefer to write their code like this: <html> <head> < ...

phphtmlcssformatting

Ways to adjust the width of the Dialog box in Jquery UI to 60% of the window size

Currently, I am utilizing Jquery UI for a pop-up feature that displays a table populated through an Ajax call. The script implementation is as follows: <script> $(function() { $( "#dialog" ).dialog({ autoOpen: false, show: { ...

javascriptjqueryhtmlcss

exchange the class using only JavaScript

I need help with a code snippet that allows for swapping classes using a loop. The objective is to click on the brown square causing it to move to the position of the blue square, while the blue square moves to the previous position of the brown square. T ...

javascripthtmlcss

Is there a way to adjust the dimensions of the <audio> tag using CSS?

//I am trying to adjust the size of the audio player based on the 'height' and 'width' properties, but it doesn't seem to be working as expected. <audio autoplay controls height="100px" width="100px"> ...

html

Dependencies in Scala.js for CSS styling

I am currently having an issue implementing Scala.js with the bootstrap library. Including the js file was a simple and straightforward process: jsDependencies +="org.webjars" % "bootstrap" % "3.3.7-1" / "bootstrap.js" minified "bootstrap.min.js" However ...

javascriptcsstwitter-bootstrapscala.js

Display or conceal nested divs within ng-repeat loop

I set up a div with sub divs to establish a nested grid system. There are three levels altogether: MainDiv - Always Visible SecondDiv - Display or conceal when MainDiv is clicked on ThirdDiv - Display or conceal when SecondDiv is clicked on <div c ...

javascriptcssangularjsionic-framework

The bug in Polymer 1.0 where a custom element is causing issues when clicking under the toolbar

Issues have arisen with a custom element I created, named <little-game></little-game>. Here is the template code for <little-game></little-game>: <template> <a href="{{link}}"> <paper-material elevation=& ...

htmlcsspolymerpolymer-1.0

I am having trouble viewing elements located below a div that I created using CSS

Currently, I am working on creating a portfolio page where the initial page opens with a height of '100vh' and width of '100%', which seems to be functioning correctly. However, I am facing an issue where I am unable to scroll down to v ...

htmlcssreactjs

Ways to disable the caching feature in Google Chrome

When I am working on CSS and JS around a page, I need to disable the cache mechanism in Google Chrome browser. A trick is to open Chrome DevTools, which automatically disables the cache mechanism (you can configure this in the settings section). Are ther ...

javascripthtmlcssgoogle-chromegoogle-chrome-extension

Activate a button with jQuery when a key is pressed

Currently, I have two buttons set up with jQuery: $('#prev').click(function() { // code for previous button }); $('#next').click(function() { // code for next button }); My goal now is to implement a .keypress() handler on the ...

javascriptjqueryhtml

Unveiling the method to fetch the emitted value from a child component and incorporate it into the parent component's return data in Vue

How can I retrieve the title value passed by the Topbar component and incorporate it into the data() return section? I attempted to create a method to pass the value, but was unsuccessful despite being able to successfully log the value in the parent file. ...

javascripthtmlvue.jsvue-componentvuejs3

Is there a way to customize the appearance of an unordered list by setting it to display as an image instead of default bullets? I want to

I have been attempting to achieve this desired outcome. However, my efforts to reproduce it resulted in the check marks being rendered at a smaller size than intended due to using an SVG file. An example of this issue can be seen in the following image: I ...

javascripthtmlcsscss-selectorshtml5-canvas