The markup below aligns SAMPLE TEXT to the left.
To me, it seems like it should be aligned to the right. The class that aligns to the right is declared after the one that aligns left. And the class that aligns to the right is even referenced last. So why does the class that aligns to the left win?
CSS
.table {
width: 100%;
}
.table td {
text-align: left;
}
.cell {
text-align: right;
}
HTML
<table class="table">
<tr>
<td class="cell">
SAMPLE TEXT
</td>
</tr>
</table>
Please see my jsFiddle Example.
The .table td selector has a higher specificity. CSS specificity rules are kind of weird... IDs weigh more than class names, which weigh more than tag names.
The specificity rules, in a nutshell:
For each tag name, add 1.
For each class name, add 10.
For each ID, add 100.
The higher values will always override the lower ones. In the case of a tie, the last rule loaded wins.
I highly recommend reading the actual CSS specification on specificty.
There are four levels:
inline-styles, !important (a)
IDs (b)
classes, pseudo-classes, attribute selectors (c)
element, pseudo-elements (d)
For every selector, add one to it's respective letter category:
#foo.bar baz -> a=0, b=1, c=1, d=1
#fizz#buzz -> a=0, b=2, c=0, d=0
a trumps b trumps c trumps d.
If there's a tie the second one wins:
#foo #bar baz
#fizz #buzz baz <-- same specificity, this one wins
styles of text-align by .table td will win over the text-align applied by cell
.table td specificity is (1-1) :
(10 x 1 class selector) + (1 x 1 element selector)
.cell specificity is (1-0) :
(10 x 1 class selector)
for .cell to win, it has to have a specificity higher than the others. It can also be equal to others but it has to be declared after the others of the same level.
read more about inheritance and specificity
If you do
.table {
width: 100%;
}
.table td {
text-align: left;
color: Yellow;
background-color: Red;
}
td.cell {
text-align: right;
}
it will right align http://jsfiddle.net/VTrEE/4/
Related
I have an app done with ASP .net core 2.1.
I modified it is scuffolded crud details page.
However I am stuck at dl,dt and dd elements.
The text in dt elements, which holds name of the fields are adjacent to the right side. and no matter what i did I couldn`t change it except I added and inline style code.
I put the code below at the style section of the file :
<style>
dd {
min-width: 120px;
background: #dd0
}
dt {
float: left;
background: #cc0;
text-align: left;
}
</style>
This code makes no changes in terms of float and text align, yet it does take effect for background as shown in picture below.
But When I put those display settings inline like below, it works just fine for those lines like in picture above.
<dt style="text-align: left; max-width: 70px;">
#Html.DisplayNameFor(model => model.PatientName)
</dt>
<dd>
#Html.DisplayFor(model => model.PatientName)
</dd>
<dt style="text-align: left;min-width: 70px;">
#Html.DisplayNameFor(model => model.PatientAddress)
</dt>
That made me think maybe it is a hierarchy of setting but I tried even the bootstrap and no luck again.
And I don`t want to put the settings inline as it is a bad practice.
CSS Specificity determines the order in which CSS rules get applied, so try adding selectors of increasing specificity until you get the desired result.
From the linked website:
The following list of selector types increases by specificity:
Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
ID selectors (e.g., #example).
Other rules:
Universal selector (*), combinators (+, >, ~, ' ', ||) and negation pseudo-class (:not()) have no effect on specificity.
(The selectors declared inside :not() do, however.)
Inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus
can be thought of as having the highest specificity.
The !important rule: When an !important rule is used on a style declaration, this declaration overrides any other declarations.
Here are examples of selectors based on the types listed above that you should try:
/* Type selectors (your current method): */
dd
dt
/* Class selectors (either directly on elements, or on parent <table class="my-table"> */
dd.my-class
dt.my-class
/* or */
table.my-table dd
table.my-table dt
/* ID selectors (either directly on elements, or on parent <table id="my-table"> */
dd.my-dd
dt.my-dt
/* or */
table#my-table dd
table#my-table dt
Like you mentioned, if all else fails you can resort to using bad practice methods that completely override all CSS selectors: inline styles or the !important rule:
<style>
dd {
min-width: 120px !important;
background: #dd0 !important;
}
dt {
float: left;
background: #cc0 !important;
text-align: left !important;
}
</style>
Suppose I have an element with 2 classes that both apply padding-left to it:
<section class="pad1 pad2">
...
</section>
then in my .css file
.pad1 {
padding-left: 60px;
}
.pad2 {
padding-left: 30px;
}
How will padding-left be applied?
What rules should I know in this kind of situations?
I hope you understand.
.pad1{
padding-left:60px;
}
.pad2{
padding-left:30px;
}
.pad3{
padding-left:30px;
}
.pad4{
padding-left:60px;
}
<section class="pad1 pad2">
Hi, This is css padding solution.
</section>
<section class="pad3 pad4">
Hi, This is css padding solution.
</section>
Your question is all about CSS selection precedence rules. At first you should understand what is CSS precedence value for each selector.
We usually use as a CSS selector class, ID, tag name, inline etc. Each selector have own priority value, priority table like below:
For each tag (a, div, p etc.) selector = 1,
For each class and pseudo-class (.class1, .class1:active etc) selector = 10,
For each ID (#id) selector = 100,
For each inline style (<div style="color:red"></div>) selector = 1000,
For each !important (.class { color: red !important;}) selector = Infinity.
Suppose right now you have a selector like following:
#nav ul a { color: gray; } = 100 (#nav) + 1 (ul) + 1 (a) = 102
Now come on your point, you have 2 class selector .pad1 and .pad2 which each selector value is 10 means equal so which one will work? If selection priority if equal then most last one will work so .pad2 will be work, because CSS parser read document top to bottom. But if selection priority is different then higher one will work in this case order dose not matter.
For better understand see here with more clear explanation: https://css-tricks.com/specifics-on-css-specificity/
In this situation always last one CSS class will be on priority:
If .pad2 will be last one then it will be overwrite on previous class .pad1 like below:-
.pad1 {
padding-left: 60px;
}
.pad2 {
padding-left: 30px;
}
<section class="pad1 pad2">
This is class section
</section>
If .pad1 will be last one then it will be overwrite on previous class .pad2 like below:-
.pad2 {
padding-left: 30px;
}
.pad1 {
padding-left: 60px;
}
<section class="pad1 pad2">
This is class section
</section>
CSS rules are applied to objects in the page that match their selectors in the order they are encountered in the style sheet. However With !important, the property will now give priority to the latest important value.
I have the following HTML ...
#searchResults td {
padding: 1px;
word-break: break-word;
}
.noBreaks {
word-break: normal;
}
<td class="noBreaks" align="center">MYWORD</td>
HOwever it seems like my "noBreaks" class is getting canceled out by the "#searchResults td" class. I would like the "noBreaks" class to take precendence (that is, have its rules respected instead of the other class). How can I make that class be used instead of the "searchResults td"?
use #searchResults .noBreaks. An ID with a tag name in CSS is creating higher specificity than a class name alone. Here is some documentation on CSS specificity https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
When you refer to an element in CSS, the more parent elements you name, the greater the specificity. It's not necessarily that you have an id overriding a class; although that would be true if we were talking about the same element.
Given:
<div id="searchResults">
<table>
<tr>
<td class="noBreaks" align="center">MYWORD</td>
</tr>
</table>
</div>
This CSS will yield blue text:
#searchResults {
color: red;
}
.noBreaks {
color: blue;
}
This CSS will yield red text:
#searchResults td {
color: red;
}
.noBreaks {
color: blue;
}
So you can see here that the level of specificity is defined by how many parent selectors you use in your CSS rule, not necessarily their type (class vs. id).
I write a html element as below ::
<div class="box"> Foo box </div>
and write css like
.box {
width: 400px;
height: 40px;
color: red;
text-align: center;
}
or
div.box {
width: 400px;
height: 40px;
color: red;
text-align: center;
}
I want to ask that how the both css for box class is different than each other.
The difference is that in the first class you tell that all element (div, p, span ...) with class box have that attribute.
Like this:
<span class="box">test</span>
<div class="box">test</div>
<p class="box">test</p>
The second class means that only div with class box has that attribute
Only this elements get second class:
<div class="box">test</div>
The selector before the class specify which type of elements can take this class
One very important difference between div.box and simply .box is in something called selector specificity. It is a set of rules which defines which selector gets more weight once the browser starts going through all the selectors that potentially have influence on a particular element.
What this means is easily demonstrated in the following example (DEMO)
We have a simple div containing some text.
<div class="box">
Zarro boogs found!
</div>
Now we add some CSS selectors to the example.
div.box {
padding:0.8em;
background: #bd0000;
color: #fff;
}
.box {
color: #bd0000;
}
One of the most basic rules of CSS is that selectors can be redefined in a way that whatever definition comes last and has influence on a particular element its the one that is going to be used (the sole exception being when using !important which always takes precedence).
Now in the above example redefining the .box class selector should actually hide the text but instead its still visible. How is that possible if we said that latter rules always take precedence? Its because the div.box rule has a higher specificity that .box since it actually gets points for containing both an element (div) and a class selector (.box) in its selector declaration (div.box).
Of course the div.box rule will be applied only on a div element but since class selectors are often reusable pieces of code there is plenty of situations when they are used on divs.
Although the rules in the official W3 specification are not that hard to understand they are sometimes pretty hard to remember. That's why I would like to recommend an excellent article on CSS selector specificity which can be found here.
In my opinion selector specificity is by far the most important thing to master when it comes to tracing inheritance problems with CSS stylesheets.
.box means any element having class box.
Example:
<div class="box">...</div>
<section class="box">...</section>
<span class="box">...</span>
div.box means only div element having class box.
Example:
<div class="box">...</div>
I have set up the following example: http://jsfiddle.net/SXEty/
<style>
table td, th { padding: 8px; text-align: left; }
table td:nth-child(1) { color: red; }
table td { color: blue }
</style>
...
<table>
<tr><th>Name</th><th>Age</th><th>City</th></tr>
<tr><td>Bob</td><td>27</td><td>Los Angeles</td></tr>
<tr><td>Charlie</td><td>34</td><td>San Diego</td></tr>
<tr><td>Daniel</td><td>41</td><td>San Francisco</td></tr>
</table>
I'm curious why the first column is colored as red instead of blue.
In my CSS, I set every first child to color "red". But then my next line of CSS sets every element to color "blue". Wouldn't the second line of CSS (color: blue) override the previous line (color: red)? Or is it that the nth-child property has precedence? If it does have precedence, is this true for all browsers?
Because td:nth-child(1) is more specific than just td.
There's a great overview of CSS specificity with a Star Wars theme that I suggest
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Because table td:nth-child(1) is a more specific selector, it will have precedence over table td even if the latter is declared later.
What's interesting is if you target a parent ID with table td, everything will turn blue - even if table td:nth-child(1) is declared later in the CSS sheet.
http://jsfiddle.net/mLrAf/2/