Class Selector Not Working in CSS, But Id Works for Add Some Styles

class selector not working in css, but id works for add some styles

What that screenshot is saying is that other styles are overriding this style due to specificity.

The best way to solve specificity issues is to decrease the specificity of the selectors overriding it. That isn't always possible though, so as a last resort you can increase your specificity by chaining classes to themselves.

.activeOption.activeOption {
     [styles]
}

You can chain as many times as needed, the more chains the more specificity it overrides. Note that if trying to override an ID this method doesn't work as it requires 255 chains. Refactor the ID is my advice here.

You can see how specificity is calculated here.

CSS Class Selector won't work, but it works when I make it an ID?

It's probably because some other css rule takes priority. This could be due to css specifity or the other rule being defined later in the css (then it takes priority also). If you add !important then it should override the other styles.

.song-selection {
background-color: gray !important;
}

Styling with CSS ID selector not working

You are using the selector incorrectly

You don't have element with the ID myprogress and the class step-progressbar-steplabel in the same element.

It looks like you are missing a space, it should be like this #myprogress .step-progressbar-steplabel not like this: #myprogress.step-progressbar-steplabel

https://css-tricks.com/child-and-sibling-selectors/

Also please use the correct case to avoid mismatch:

Are class names in CSS selectors case sensitive?

CSS works for id, but not for class because of bootstrap

Chaining multiple class selectors raises the importance of the rules.

What should help:

.form-control.search {
...
}

You can also add input to the mix:

input.form-control.search {
...
}

If that doesn't help, you can keep on chaining .search (which you shouldn't generally do but Bootstrap sometimes requires that):

input.form-control.search.search.search {
...
}

CSS uses something called "specifity" to determine the importance of your rules. In simpler terms: style= is worth 1000, ID is worth 100, attributes/classes/pseudoselectors are worth 10 and tag selectors are worth 1. (It's much more complex than this, but this is generally a good rule of thumb for CSS specifity.)

CSS id's not working

Your CSS selector has an extra space between price and panel-default so it's basically looking for a child with class="panel-default" inside a div with id="price". To get the selector to look for a div with id="price" and class="panel-default" remove the space between #price and .panel-default. Try:

#price.panel-default {

    width: 150px;
    font-size: 18px;
}

#size.panel-default {

    width: 100px;
    font-size: 188px;
}

Classes and Ids do not work in Style Tags

Class names must begin with a letter.

CSS id selector not working with bootstrap despite CSS being loaded?

Per answer request:

This appears to be a caching issue. You can circumvent the cache in a few ways:

Hard Refresh

Do a hard refresh on your browser. Full instructions can be found here: https://support.piktochart.com/article/243-clear-browser-cache

But here are the main points:

Windows/Linux: CHROME

1. Hold down Ctrl and click the Reload button.
2. Or, Hold down Ctrl and press F5.
3. Open the Chrome Dev Tools by pressing F12. Once the chrome dev tools are open, just right click on the refresh button and a menu will drop down. This menu gives you the option of doing a hard refresh, or even clearing the cache and do a hard refresh automatically.

Mac:

1. Hold Shift and click the Reload button.
2. Or, hold down ⌘ (Cmd) and ⇧ (Shift) key and then press R.

Windows/Linux (Mozilla Firefox and Related Browsers):

1. Hold the Ctrl key and press the F5 key.
2. Or, hold down Ctrl and ⇧ (Shift) and then press R.

Mac:

1. Hold down the ⇧ (Shift) and click the Reload button.
2. Or, hold down ⌘ (Cmd) and ⇧ (Shift) and then press R.

Internet Explorer:

1. Hold the Ctrl key and press the F5 key.
2. Or, hold the Ctrl key and click the Refresh button.

Disable the cache in your browser

As in Daniel Vitek's answer above (https://stackoverflow.com/a/61218568/1172189), you can disable the cache using the Developer Tools in whatever browser you are using.

Version your CSS file

Using this option, you can usually bypass cache by telling the browser to reload your CSS because there has been changes.

Manually

Add a query string to your CSS each time you update, e.g. main.css?v=2 This will work, but requires you to update the version.

Programmatically
If you are using a server side language, a template system or even JS (the caveat is JS probably should load before your CSS file and not deferred), you can add the query string based on the modified date of the CSS. This will ensure the the CSS will only get reloaded when there was actually a change.

A PHP example would be using filemtime(). This gets the modified time of the file.

main.css?v=<?php echo filemtime('main.css'); ?>

That would print out the UNIX timestamp of when the file was last modified.

---

Related Topics