CSS Specificity Problem

Is there a way to determine specificity in CSS? Although that's not my main question, I encountered an issue where I defined a class for a Div element but the styles are not being applied even though I declared the class last.

Here is a snippet of my code:

 <link rel="stylesheet" href="App.css" />
    ...........
   <link rel="stylesheet" href="apply.css" />
   <div class="class1 class2 class3 classDesired"> ..........</div>

Assuming that apply.css contains the classDesired class, I noticed that the div style is influenced by App.css instead of apply.css, despite declaring it last. Upon further investigation, I suspected a specificity issue. How can I calculate specificity in CSS?

htmlcssstylesheet

Answer №1

Understanding specificity does not involve the order of a after b or vice versa.

It actually focuses on:

a with an id of A vs. a with a class of A...... (just an example)

Learn more about how to calculate specificity here:

Answer №2

Consider implementing a hierarchical structure for the class you're working with.

<div class="wrapper">
    <div class="desiredClass">
        insert content here
    </div>
</div>

Add your CSS styles below

.wrapper div.desiredClass {
   /* add your CSS styles here */
}

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

Revolutionizing the small screen design with a dynamic Bootstrap Responsive Layout that seamlessly adjusts to different screen sizes

In the beginning, I constructed a footer using HTML, CSS, and JS. Eventually, I stumbled upon Bootstrap and decided to recreate the footer using Bootstrap, following a mobile-first design approach for screens smaller than 576px. I had previously designed ...

htmlcssresponsive-designbootstrap-5

Access an HTML webpage using a PHP function

Recently, I delved into learning PHP and a question popped up in my mind: I have this PHP file that consists of a function named `sqlConnect();` This function checks if the user is already logged into the MySQL DB. If not, it redirects the user to an HT ...

phphtmlmysql

Load External HTML content into webpage along with executing JavaScript code and triggering JS functions upon loading

I'm in search of a super lightweight solution that can effectively load an external HTML file into a page using only vanilla JavaScript. The external file contains HTML, CSS, and JS. Essentially, I want to create a concise JS snippet that loads a butt ...

javascripthtmlajaxxmlhttprequest

Tips for preventing the headers of a table from scrolling

I am currently working on a solution to keep the header of my table fixed in place without scrolling. Despite my limited experience with Bootstrap and React, I have tried exploring older threads on Stack Overflow to find a suitable fix for making the head ...

cssreactjsbootstrap-4fixed-header-tables

The button on the Cookie Policy navigation window is no longer operational on the ASP.NET Core MVC website utilizing Bootstrap version 4.3.1

After integrating Bootstrap 4 into my ASP MVC Core web project and converting some HTML code to a Cookie Policy window, I noticed that the accept button is no longer functioning. Although the button is visible and clickable, it does not respond. In additi ...

htmlasp.net-corebootstrap-4razor-pages

Adjust the increment of the CSS class property

Just a quick query! I'm attempting to adjust the css width property through JavaScript in this manner: document.getElementById("progressvalue").style.width = "80%"; .progress { width: 100%; max-width: 500px; border: 3px solid black; height: ...

javascripthtmlcss

Verifying CSS updates with Capybara detection

I'm in the process of developing a web application that dynamically changes its CSS styles based on user input. Everything is working smoothly, but I'm facing an issue with my automated tests not confirming whether the CSS updates are actually ta ...

cssrubyseleniumcapybara

Scroll bar for multiple selection select tag without using div element (not supported in firefox)

.selector select[multiple="multiple"] { border-radius: 0; height: 200px; margin: 0 0 0 -1px; max-width: 368px !important; padding-left: 3px; width: 368px !important; } <select id="id_included_packages_from" class="filtered" multiple="multipl ...

htmlcss

Display or conceal content, revealing only the current information

Apologies for the confusing title, I struggled to find the right words to describe this situation! Essentially, I have a webpage that displays content on the same page using jQuery. When the page initially loads, a brief section opens up. However, when yo ...

jqueryhtmlcss

Is it possible to verify the presence of an ID with jQuery?

Is it possible to check for the existence of the id 'input-name' before assigning a value to the variable name using a line of code similar to this: var name = $('#input-name').attr("value"); In case the id 'input-name' does ...

javascriptjqueryhtml

Property registered in CSS dynamically

Is it possible to pass dynamic values when using the css registered property? For instance, in the code snippet below, how can I pass on the value ---numValue=35 to to{--num:}? @property --num { syntax: "<integer>"; initial-value: 0; ...

htmlcss

Article that fills the entire screen

I am currently in the process of developing a mobile application. The issue I am facing is that the text is not aligning properly and the images are not displaying fullscreen. Additionally, I want the images to adjust automatically based on whether you are ...

htmlcss

What is the best way to eliminate the extra spacing on the right side of my navigation bar?

Hello everyone! I am diving into the world of HTML and CSS, but I've hit a roadblock. Despite searching through various resources and forums, I can't seem to find a solution to my problem. The issue at hand involves an irritating space in my nav ...

htmlcssnav

Color in the diamond shape only to a designated height

I am in search of a unique diamond shape that allows me to fill the color up to a specific height based on an attribute or variable provided. https://i.stack.imgur.com/62U6h.png. I attempted creating the diamond shape and initially considered placing it ...

javascripthtmlcss

Generate a fresh line within the source code

Currently, I am facing a challenge with dynamically loading CSS, JS, and other components as it appears messy when viewed from the source. Although this issue does not impact functionality, I am not satisfied with how it looks in the source code. When exam ...

phpcss

When positioning 2 divs on top of each other, rotating one by 180 degrees causes it to be considered secondary in the visibility hierarchy. What is the reason behind this?

While delving into the realm of HTML, I stumbled upon a concept that has left me perplexed. Upon stacking two divs on top of each other, I observed an interesting phenomenon where rotating the second div by 180deg (i.e transform:rotateY(180deg)), causes t ...

htmlcss

Utilizing Angular Typescript for seamless HTML 5 drag and drop functionality

I am currently experimenting with HTML5 drag and drop functionality on an Angular application. I'm facing an issue and seeking some guidance. Below is the code snippet from my app.component.html file: <div> <p draggable="true" ondragstart= ...

htmlangulartypescript

Displaying a large image within a small div using Bootstrap 4

I have a specific image with dimensions of 244px by 751px, and I am trying to place it inside a div container that is 132px by 132px. I want the image to maintain its aspect ratio without being stretched. Despite using the img-fluid class, the image does n ...

cssbootstrap-4

Is there a way to deactivate the <script> tag using CSS specifically for media queries?

When designing a website exclusively for desktop usage, I encountered the issue of it not being viewable on mobile devices. I attempted to address this problem by utilizing the code below: script { display: none; pointer-events: none; } Unfortunat ...

javascripthtmlcss

Activate the display by utilizing the getElementsByClassName method

In my design, I'd like to have the "Don't have an account?" line trigger the display of the .registrybox class when clicked. However, the script I've written doesn't seem to be working as intended. The script is meant to hide the .login ...

javascripthtmlcss