I am trying to understand the difference between ID and Class selectors by making different color boxes.
HTML
.box-a{
height: 200px;
width: 200px;
margin: 10px;
background-color: #ff0000;
}
#box-b{
background-color: #ffe666;
}
<div class="box-a" id="box-b"></div>
<div class="box-a"></div>
Most of the articles on this subject have been read by me. But I remained intrigued. I just so happened to learn about fragment IDs, how the browser only retains them, and how the (#) hash character identifies a document part.
Is this the main justification for ID selectors' higher specificity than class selectors, then?
Related
I'm not sure how to explain this if not with examples.
Let's say I have this class
.padding1 {
padding-top: 100px;
}
applied to this element
<div class="myDiv padding1"></div>
whith its own rules defined later that will override the .padding1 rule. How to tell .myDiv to default to the last useful rule defined in .padding1?
.myDiv {
padding-top: 0;
}
.specialPage .myDiv {
padding-top: /* ignore my override */
}
I know I could do it the opposite way but I was wondering if this can be done in this way instead which can be useful in some complex designs.
UPDATE: I was of course asking to see if there's a rule I'm missing. I don't want to declare it again, nor use initial or inherit.
I just found out about this, there is a possible way to revert css styles using revert-layer.
⚠ Warning ⚠ : As of 2022, this keyword is experimental and not widely compatible. Currently only for Firefox and Firefox Android v97.
The revert-layer CSS keyword rolls back the value of a property in a cascade layer to the value of the property in a CSS rule matching the element in a previous cascade layer.
If there is no other cascade layer to revert to for the matching CSS rule, the property value rolls back to the computed value derived from the current layer. Furthermore, if there is no matching CSS rule in the current layer, the property value for the element rolls back to the style defined in a previous style origin.
Different from the revert keyword which reverts directly to the browser's defaults.
Additional ressources:
Creating layers with #layer
Style origin. Used to determine where to stop rolling back the cascade of styles
The following should work (Again, if your browser is compatible)
Elements with class 'padding1' will have a padding-top of 100px, unless they also have the class 'myDiv' in which case the padding will be set back to 0, but if said element is inside a parent with class 'specialPage', the padding will be reverted back to 100px.
#layer base {
.padding1 {
padding-top: 100px;
}
}
#layer special {
.myDiv {
padding-top: 0;
}
.specialPage .myDiv {
padding-top: revert-layer;
}
}
<div class="specialPage">
<div class="myDiv padding1">Inside specialPage original padding</div>
</div>
<div class="myDiv padding1">Outside specialPage no padding</div>
You can use padding-top: unset; which would completely neutralize all previous properties of the same name for the same class. But in order to "rewind" the property that came before padding-top: 0; you need to declare it again.
As I understand, You want style of .padding1 to be implemented for both div. Am I right?
This can be done like this
<style>
.padding1{
padding-top: 100px !important;
}
.myDiv {
padding-top: 0;
}
<style>
In HTML page
<div class="myDiv padding1"></div>
Now .myDiv will have padding-top:100px;
As .myDiv have own "padding-top:0" but it will show "padding-top:100px".
Hope it will solve you problem.
You could use initial to set it to its default value.
.myDiv {
padding-top: 0;
}
.padding1 {
padding-top: 100px;
}
.specialPage .myDiv {
padding-top: initial;
}
I've read the other questions on here about overriding inline style imported from Javascript and I feel like I'm missing something here.
The iframe and current code can be seen at
https://www.timedoutescape.com/waiver/
(you can put random first / last name and email to get to the signing interface I'm trying to style)
The current code is --
<div id="signingSpace" style="background-color: white; height: 300px; width: 819px;" class="kbw-signature"><canvas width="815" height="296">Your browser doesn't support signing</canvas></div>
And I'm trying to override it with
#signingSpace[style] {
height: 100px !important;
}
Any advice?
I came across this problem while handling a large project and felt that i should seek an opinion from the community here.
I have specified a css class 'header' in style1.css, i.e.
.header { color: red;}
In another file, I inadvertently, named a class 'header' again with this rule :
.header { background-color: yellow; }
When i refreshed the browser i noticed the red font and after examining the style inspector found the problem. I tried to avoid the problem by applying specificity, i.e. #some-div .header, but that didnt stop it from applying the red font. Of course i could simply solve the problem by renaming header to something else, but i'm curious how developers who handle large projects handle this. Thanks for your time.
Well, from your code, you specified values for different properties in the two declarations of the header class. The first declaration specifies a color property and the second specifies a background-color property. From all indications you're not really "overriding" anything since you didn't give conflicting values for one property so, CSS is simply giving the values of the first declaration of the header class to the second one because there's no difference. If you wanted to override it for the second you'd have to probably add a different identifier to the second declaration of the header class to point to a unique element and specify a different value for the color property. Hope this satisfied your curiosity.
Just add a different class to one of the cases. For example:
.header {
color: red;
}
.header.yellow-bg {
color: initial;
background-color: yellow;
}
<h3 class="header">Red header</h3>
<h3 class="header yellow-bg">Black/yellow header</h3>
The second declaration for color applies because it is more specific (2 classes > 1 class).
Don't use !important as another user suggested. Avoid it all costs. It's the easy way out for the moment, but once you start going down that road, you're going to end up with a stylesheet that's terrible to manage.
Set your styles for a specific base and use classes and more specific selectors as overrides. Remember that stylesheets cascade.
For example, say you have a typical header font color that should be your .header. If you have other one-off or unique headers that share same structure provide another class to that which makes sense to you.
So as an example:
Both headers have the .header styles but headers with the special class have blue text color which overrides red.
.header {
color: red;
width: 100%;
display: block;
background-color: #eee;
padding: 10px;
margin: 2px;
}
.header.special {
color: blue;
}
<div class="header">Regular Header</div>
<div class="special header">Special Header</div>
I have a button that is displayed in a lot of pages of my website (With an automated javascript Widget).
I want this CSS :
.app.programEditor .col-2 .actions .widget.bt-flat.programs > .bt-flat-icon {
}
to be applied, and not this one :
.app.programEditor .actions .widget.bt-flat > .bt-flat-icon {
left: 145px !important;
top: 19px !important;
But instead, what happens, is the two css are applied, and as a result I get the second element that overwrites what I want to do with the first CSS ( A blank css with no rules )
Please I really need your help
The root cause of your problem is the poorly written rule that uses !important. This is an excellent example of why not to use !important. If at all possible, try to understand why !important was thought to be needed there, and see if you can remove it.
But if you are left fighting against an important rule, your only choice is to fight fire with fire, and toss back an !important of your own, in a rule designed to take precedence either because it is more specific (in this case, your override rule has seven classes, to the original rules's six, so it is more specific), putting it later in the file if it has the same specificity, or if you have no other choice use the various tricks available to jack up the specificity.
Having said that, overall this CSS seems to be poorly structured, verbose, and inefficient.
.app.programEditor .actions .widget.bt-flat > .bt-flat-icon {
First, if .app is a class applied to your entire application, it is probably not necessary. If .actions only occurs within .app.programEditor, then the latter is not necessary at all. If .bt-flat can only apply to widgets, then instead of widget.bt-flat you can just write .bt-flat. If .bt-flat-icon can only occur within .bt-flat, as seems likely, then .widget.bt-flat may not be necessary. And so on. In general, instead of writing down every single class in the HTML hierarchy in your CSS rules, try to limit selectors to those necessary to unique select the element you want. In this case, for example, it is possible your rule could be written as simply as (just an example):
.programEditor .actions .widget > .bt-flat-icon {
Second, the magic numbers 145 and 19 are a massive code smell. They are probably connected to other magic widths and heights elsewhere in the CSS, and would have to be changed if those change. What do the 145 and 19 mean? Perhaps they are actually a percentage of some underlying dimension. In other words, maybe some element is 160 pixels wide, and we want to place the icon to the upper right. In that case, instead of hard-wiring the 145, you can either use a percentage, or specify a right property, or use the transform property perhaps, so no matter how the width changes--such as with the introduction of .col2--the icon remains in the right place with the original rule.
You can simply change it to position:static this is just a demo. Otherwise, if you understand concept of Specificity very well, then there was no need for this question.
$('#change').click(function() {
$('.one').css("position", "static");
$('.one').text("Position changed to Static")
});
.container {
width: 90%;
margin: 50px auto;
position: relative;
border: 1px solid #000;
display: block;
height: 200px;
overflow: hidden;
}
.one {
width: 150px;
height: 150px;
background: tomato;
position: absolute;
left: 118px!important;
top: 30px!important;
display: block;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div class="one">
Positioned using absolute or relative</div>
</div>
<button id="change">Change CSS</button>
If many rules exist, the first one takes precedence, but if the last one is more specific, it will override the first one. BUT if the first one is less specific AND has !important that one will take precedence. :) To make matters more complicated, if both rules has !important the most specific rule will take precedence.
So the easy solution here, if you cannot change the already existing rule, just add !important to the code you can edit. If that doesn't work, try to get your code processed earlier in the code than the other one.
.app.programEditor .col-2 .actions .widget.bt-flat.programs > .bt-flat-icon {
left: 40px !important;
top: 40px !important;
}
while doing some research i saw the following piece of code in the CSS file:
#element1{
overflow: hidden;
width: 880px;
height: 32px;
padding: 5px 30px;
background: #c82c74;
border-bottom: 1px solid #870843;}
#element1 #element2{
float: left;
width: 400px;
padding-right: 25px;
margin: 0;
padding: 0;}
As you can see the ID of element1 has its own set of properties and values then it is used again alongside element2. In the corresponding HTML file this is how the following styles were implemented:
<div id="element1">
<div id="element2">
</div>
</div>
What does this piece of code mean and what is being achieved here?
#element1 #element2 means it is only styling the element that has an id of element2 that is inside an element that has an id of element1
If you want to style both elements with the same style then you would need to add a comma between the elements: #element1, #element2
People would use #element1 #element2 say if they wanted to override specific styles for element2 but only if it is in element1 - for example, say element2 is on all your web pages and we have the following styles:
#element2 {width:800px;}
now if you had a particular page where you only wanted it to be 400px wide you could qualify the selector to a higher level to override that element on the certain page - so say we gave the body tag an id of element1 for that specific page, adding
#element1 #element2 {width:400px;}
would mean that element2 would be 400px for that page and then 800px on all other pages
That last selection you made, #element1 #element2 will tell CSS to look for a child of #element1 that has an id of #element2 but when using IDs you mostly don't need to do that because IDs are used to uniquely define an object although you may use classes for these type of selection or scoping objects.
See some CSS Tricks for Scoping.
In your example, if you'll write #element2 instead of #element1 #element2 there will be no change, but in my example:
<div class="class_one">
<div class="class_two"></div>
</div>
<div class="class_two"></div>
CSS Example 1 - You will see 3 squares
http://jsfiddle.net/BCq9C/
.class_one {
background: red;
padding: 10px;
width: 30px;
height: 30px;
}
.class_two {
background: blue;
padding: 10px;
width: 30px;
height: 30px;
}
CSS Example 2nd - You will see only 2 squares
http://jsfiddle.net/8aDTB/
.class_one {
background: red;
padding: 10px;
width: 30px;
height: 30px;
}
.class_one .class_two {
background: blue;
padding: 10px;
width: 30px;
height: 30px;
}
These styles for #element2 will only get applied when it occurs within an #element1.
For instance if element1 was an ID used for the homepage & element2 for a search box, the searchbox on the homepage would use these styles, but searchboxes elsewhere wouldn't (e.g. on a page with <body id="contentpage">).
#element1 #element2 will style the unique element #element2 inside the unique element #element1
But since an id is unique, it is completely useless to do it that way.
Using #element2 is enough.