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

Learn the steps to initiate a Vimeo video by simply clicking on an image

I have successfully implemented some code that works well with YouTube videos, but now I am looking to achieve the same effect with Vimeo videos. Does anyone have suggestions on how to do this? I need to replace the YouTube description with Vimeo, but I&ap ...

javascriptjqueryhtmlajax

Sticky position applied and overlapping with the following container

I'm struggling with the CSS property position: sticky. In my layout, I have three boxes stacked one after another. Each box is styled with the class container from Bootstrap. The middle box, labeled as box-2, needs to be fixed in its position. To ach ...

htmlcssbootstrap-4

Creating a responsive container in Bootstrap that adjusts height dynamically, featuring a text input box positioned at the bottom

I am currently using Bootstrap 4 to design a desktop chatbot inspired by Google's Bard. My goal is to have a container that spans the height of the screen, with the text input located at the bottom of the container. Additionally, I want the container ...

htmlcssbootstrap-4

The concept of transparency and visual representation

Is there a way to prevent the opacity of the parent div from affecting the opacity of the img? <div class="parent_div" style="opacity:0.2"> <p>Some text</p> <img class="gif" style="opacity: 1;" src="ht ...

css

I am uncertain as to why `Justify-Between` insists on aligning everything at the start of the container

While utilizing tailwind css, I am encountering a problem where my justify-between behaves like justify-start. However, when I switch to using justify-end, it aligns everything to the end of the container. I would appreciate it if someone could point out ...

cssreactjsnext.jstailwind-css

What key element is not included in this code?

I've been trying to create an interactive green circle that switches between red and green when clicked. Despite checking and rechecking my code, it's still not functioning correctly. I must be making a beginner mistake somewhere. Can anyone poin ...

jquerycssfunctionanimationonclick

Is it possible to run a Vue file autonomously, similar to an HTML file

When it comes to running html, we can rely on mainstream browsers such as Chrome. But is there a similar tool for vue files, like the browsers designed for html? ...

javascripthtmlvue.js

What is the best way to insert a tagline above a form?

I'm struggling to figure out where to place a tagline above my form. I want it to be neat and clean, but haven't been successful in finding the right spot. I attempted to insert an <h2> inside the form, but it doesn't look good at al ...

jqueryhtmlcss

Strong tags are not functioning properly within paragraph tags in Firefox

It has come to my attention that when I insert <strong> into a <p>, the text does not appear bold. This issue seems to only occur in Firefox, as Chrome and Safari display it correctly. However, when I place <strong> inside a <li>, e ...

htmlcss

Having trouble finding two p-col-6 elements side by side in the PrimeNG FlexGrid with Angular?

I have integrated Flex Grid into my Angular7 project. In the initial state, I am able to display two p-col-6 elements side by side without any issues. However, when I try to rearrange them in p-col-12, they no longer align properly. Here is a detailed expl ...

htmlcssangulartwitter-bootstrapprimeng

Issues with CSS rendering in the Chrome browser are causing display problems

After successfully creating an iFrames page tab on Facebook that looks great in Firefox and Internet Explorer, I encountered an issue with the div positioning in Chrome. You can view the page here: Oddly enough, this is the only page experiencing problems ...

cssgoogle-chrome

Can you explain the purpose of CSS classes such as my-2, my-lg-0, and mr-sm-2 in Bootstrap 4?

I have searched through various questions and the Bootstrap documentation but haven't been able to determine the purpose of these classes on elements. Any assistance would be greatly appreciated! My goal is to adjust my search bar's size to 1/4th ...

htmlcsstwitter-bootstrapbootstrap-4navbar

Conceal the scroll bar while still allowing for scrolling functionality

In this code snippet, I am trying to maintain the scroll position of two blocks by syncing them together. Specifically, I want to hide the scrollbar of the left block while scrolling the right one. If anyone has any suggestions or solutions for achieving ...

javascriptjquerycss

Guide: Using jQueryUI's explode effect to animate an HTML element explosion

I'm having trouble getting the jQueryUI explode effect to work properly. I've tested it out on this jsfiddle, but the explosion effect doesn't seem to happen as expected - the element just disappears with no explosion animation. $('h1, ...

javascriptjquerycssjquery-uijquery-effects

The parallax background features a sleek design with crisp white borders framing the edges

We are currently facing an issue while attempting to incorporate a parallax background on our website. The problem lies in an unwanted white border surrounding the image that can be seen at this link: https://i.stack.imgur.com/pt0Pf.jpg. Despite trying va ...

htmlcssbackgroundbackground-imageparallax

Removing an item from a table row cannot be completed due to the inability to retrieve the list_body ID necessary for deletion

I have been working on enhancing the delete button function in my table. The id linked to the list_body must be incorporated into the delete function code. I utilized some jquery methods to render the list onto the webpage. //retrieve user list information ...

javascripthtmljqueryhandlebars.js

CSS only accordion divs that are all opened by default with no need for jquery

My current setup involves: jsfiddle.net/wromLbq5 I would like to enable the functionality of having multiple accordion sections open simultaneously upon page load. This means that when one section is opened, the others should not close. Is there a way to ...

htmlcssaccordion

Issue with Angular custom tag displaying and running a function

I have created a custom HTML tag. In my next.component.ts file, I defined the following: @Component({ selector: 'nextbutton', template: ` <button (click) = "nextfunc()">Next</button> ` }) export class NextComponent{ nextfunc( ...

htmlangulartypescriptangular-componentscustom-tag

Increment the text counter following the uploading of an image file with html format

I have a form in which I am checking the character limit that a user can input into a text field using the 'onkeyup' attribute to update it in real time. Now, I want to achieve a similar function for image uploading. When a user selects an image ...

javascriptphpjqueryhtml

Forming a space between borders

I'm attempting to create a space within a div's border that can accommodate an image, much like so: Is there a method to achieve this using only CSS? The only solution I have found is: .box { background: url(img.png) bottom left; border ...

cssimageborder