In css examples, I've seen rules defined starting with a . and some starting with # - sometimes these are mixed in the same file. What is the difference between these rules:
h1 { font-size:18pt;}
.new-alerts { font-size:11pt; font-weight:bold;}
#old-alerts { position:relative; font-size:10pt; }
Are they referenced differently on the html page? Is it how the properties are inherited?
. refers to a class. <span class="one" /> could be selected with .one.
# refers to an ID. <span id="one" /> could be selected with #one.
You should be using classes when there could be more than one of a given element, and IDs when you know there will only be one. #navigation-bar would be using an ID because you will only have one navigation bar in your layout, but .navigation-link would be using a class name because you will have multiple navigation links. (It'd be better practice to use #navigation-bar a:link to get the navigation links, but you get my point.)
The dot . is a class selector, the hash/pound/octothorpe # selects by an ID:
<style>
.foo { ... }
#bar { ... }
</style>
...
<p class='foo'>Foo</p>
<p id='bar' class='baz'>Bar</p>
IDs have to be unique throughout a document, classes don't have to be. That's basically the primary difference. There are some things to note with regard to scripting but those are usually not of particular interest when styling.
Furthermore, an element may belong to multiple classes:
<p class="foo bar baz">
and as seen above, classes and IDs are not mutually exclusive.
. is a class and can be reused many times and for different elements
# is an ID and must be used only once on each page.
See Class vs ID
Related
Is there a selector method that allows policing whether, eg. the HTML tag is a clean "<html>" with no attributes whatsoever?
I'm trying to create a Stylish override sheet for browser-generated image pages in Firefox, but I essentially have to apply it to all URIs since such pages are always still ostensibly from the images' own domains.
The easiest way seems to be testing whether the HTML and Body tags have zero attributes (plus only-child and class selection on the image tag) because the structure of most documents which haven't been generated by the browser won't start as simply as <html><body><img class="...
But all I can find is how to exclude a specific attribute, not all of them.
I've tried the following with no success:
[] {
color: blue;
}
[*] {
color: red;
}
<p>Clean element with no attributes</p>
<p class="has-class">Has class attribute</p>
<p id="has-id">Has ID attribute</p>
<p data-has-data-attribute="">Has data attribute</p>
The only remaining option I can come up with is just policing the standard attributes one would see ("class", "style", "name", "lang", etc.), but that's a lengthy and ever-changing list, notwithstanding the numerous non-standard ones.
A selector that matches a tag without attributes doesn't currently exist.
I read through the latest CSS selector reference and couldn't find a selector that does what you wish.
You can't use an asterisk in the attribute selector to select everything unfortunately. These two railroad diagrams represent what is allowed:
So your first two attempts are invalid, and the valid empty string seems to have no effect:
[] {
color: blue;
}
[*] {
color: red;
}
[""] { /* Seems to select nothing, rather than 'no attribute' */
color: magenta;
}
<p>Clean element with no attributes</p>
<p class="has-class">Has class attribute</p>
<p id="has-id">Has ID attribute</p>
<p data-has-data-attribute="">Has data attribute</p>
I can't come up with any possible hack that doesn't involve JavaScript. I will edit this answer if I figure out a solution.
I know CSS selector with the highest specificity takes precedence (i.e. .classname < #idname).
I also know that if things are the same specificity, then the last statement called takes precedence:
.classname1 { color: red; }
.classname1 { color: blue; } // classname1 color will be blue
Does the ordering of HTML classes on a DOM element affect the statement priority?
I have to disagree slightly with Jon and Watson's answers, as...
Yes, it Can (depending on the statement)
Your question is:
Does the ordering of CSS classes on a DOM element affect the statement priority?
Which does depend on the statement in question.
HTML Ordering Does Not Typically Matter
The following are equivalent when it comes to a straight call to a class (i.e. .class1 or .class2) or to a combined call (i.e. .class1.class2 or .class2.class1):
<div class="class1 class2"></div>
<div class="class2 class1"></div>
Cases Where Statement Priority for above HTML Can be Affected Based on HTML Order
The main place where ordering in HTML matters is with the use of attribute selectors in your CSS.
Example 1 Fiddle using the following code seeking to match attribute value will NOT have any change in font color, and each div will have different properties because of the ordering of the classes:
[class="class1"] {
color: red;
}
[class="class1 class2"] {
background-color: yellow;
}
[class="class2 class1"] {
border: 1px solid blue;
}
Example 2 Fiddle using the following code seeking to match beginning of attribute value will NOT have any change in font color for the second div, and each div will have different properties because of the ordering of the classes:
[class^="class1"] {
color: red;
}
[class^="class1 class2"] {
background-color: yellow;
}
[class^="class2 class1"] {
border: 1px solid blue;
}
Example 3 Fiddle using the following code seeking to match end of attribute value will NOT have any change in font color for the first div, and each div will have different properties because of the ordering of the classes:
[class$="class1"] {
color: red;
}
[class$="class1 class2"] {
background-color: yellow;
}
[class$="class2 class1"] {
border: 1px solid blue;
}
A Clarifying Statement about "Priority"
To be clear, in the cases above, what is affected as far as "statement priority" is concerned is really a matter of whether the statement actually applies or not to the element. But since the application or not is in a sense, the basic priority, and since the above are cases where such application is actually based on the ordering of the classes on the HTML Dom element (rather than the presence or absence of the class), I thought it worth adding this as an answer.
Possible Valid Use of Class Ordering?
This is a thought occurring to me, based on BoltClock's comment. Consider just two classes being used to style elements based on whatever factors are deemed critical to different styling. These two classes theoretically can replace the use of eleven different individual classes using the combination of attribute selectors (actually, as will be noted later, the possibilities are almost limitless with but a single class, but I'll discuss that in a moment since this post is about ordering of multiple classes). For these two classes we can style elements differently as follows:
Assuming these HTML Combinations
<div class="class1">Element 1</div>
<div class="class2">Element 2</div>
<div class="class1 class2">Element 3</div>
<div class="class2 class1">Element 4</div>
CSS Possibilities
/* simply has the class */
.class1 {} /* affects elements 1, 3, 4 */
.class2 {} /* affects elements 2-4 */
/* has only a single class */
[class="class1"] {} /* affects element 1 only */
[class="class2"] {} /* affects element 2 only */
/* simply has both classes */
.class1.class2 {} /* affects elements 3-4 */
/* has both classes, but in a particular order */
[class="class1 class2"] {} /* affects element 3 only */
[class="class2 class1"] {} /* affects element 4 only */
/* begins with a class */
[class^="class1"] {} /* affects elements 1 & 3 only */
[class^="class2"] {} /* affects elements 2 & 4 only */
/* ends with a class
NOTE: that with only two classes, this is the reverse of the above and is somewhat
superfluous; however, if a third class is introduced, then the beginning and ending
class combinations become more relevant.
*/
[class$="class1"] {} /* affects elements 2 & 4 only */
[class$="class2"] {} /* affects elements 1 & 3 only */
If I calculate right, 3 classes could give at least 40 combinations of selector options.
To clarify my note about "limitless" possibilities, given the right logic, a single class can potentially have imbedded in it code combinations that are looked for via the [attr*=value] syntax.
Is all this too complex to manage? Possibly. That may depend on the logic of exactly how it is implemented. The point I am trying to bring out is that it is possible with CSS3 to have ordering of classes be significant if one desired it and planned for it, and it might not be horribly wrong to be utilizing the power of CSS in that way.
No, it does not. The relevant part of the W3C standard makes no mention of the order of appearance for classes.
No, it does not, like you said, if two rules have the same specificity, the one that comes later in your CSS will be applied.
No. But if you want to make one of your declaration blocks to has more precedence (w/o many !importants) make its selector more specific.
For example, for a div:
div.classname1 { color: red; } /* classname1 color will be red (for `div`s) */
.classname1 { color: blue; }
What's missing or a little hard to find in other answers is this:
What matters is the order in which the browser reads/parses the class names
The class defined last will win
.a {
color: red;
}
.b {
color: blue;
}
<div class="a b">This text will be blue</div>
<div class="b a">This text will ALSO be blue</div>
Example comes from this source
May be affected by the order of your imports
Because if this you may need to pay attention to how you import CSS in your files.
For example in my JavaScript based project I have a component that I can pass extra classes to. In order for my own classes to overwrite styles of the classes of the component itself I need to first import the component I wish to style (which will import its own styles) and only then import my own styles:
//import the component first, which will import css
import {SomeComponent} from 'some-library/SomeComponent';
//And THEN our own styles
import './styles.css';
return <SomeComponent className={myClassName} />
Like this my buildprocess (Webpack) will put my own classes later in the CSS bundle than the components ones.
My question is different than this one, but it's regarding the same principle, so this quote is relevant here too:
from https://github.com/stubbornella/oocss/wiki
Essentially, this means “rarely use location-dependent styles”. An object should look the same no matter where you put it. So instead of styling a specific h2 with .myObject h2 {...}, create and apply a class that describes the h2 in question, like h2 class="category".
But what if the design dictates that an object's style changes when it's inside certain containers? Here's a simplified example of my problem. Let's say there's an object called foo, and a container object called bar. foo and bar have their own location-independent styles:
.foo {
...
}
.bar {
...
}
But when foo is inside container bar like so, its color needs to change when the user hovers over bar:
<div class="bar">
...
<div class="foo">
...
</div>
...
</div>
It seems in this case, you can't avoid writing a location-dependent selector that looks like this:
.bar:hover .foo {
// color style
}
One solution I thought of is to introduce a class that's explicitly dependent on bar (named using BEM naming convention to be explicit about parent-child relationship), and add it to the foo object:
<div class="bar">
...
<div class="foo bar__foo">
...
</div>
...
</div>
.bar:hover .bar__foo {
// color style
}
I want to confirm, is this a good way to handle the issue? Are there other ways in OOCSS as well?
The big concern here isn't that your chaining classes together, it's that your classes are location independent. Nesting is going to happen. Approaches like OOCSS are great because they help to you know when things like nesting and class-naming is going awry.
Mark Otto released a Code Guide last week and here are some relevant points:
Keep selectors short and strive to limit the number of elements in each selector to three.
Scope classes to the closest parent only when necessary (e.g., when not using prefixed classes).
He also provides these examples:
/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }
/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }
In short: Aim to scope a class to it's parent. Don't go further than 3 selectors.
You're fine going with:
.bar:hover .foo { ... }
Further Reading
Stop The Cascade
Scope CSS Classes with Prefixes
I know CSS selector with the highest specificity takes precedence (i.e. .classname < #idname).
I also know that if things are the same specificity, then the last statement called takes precedence:
.classname1 { color: red; }
.classname1 { color: blue; } // classname1 color will be blue
Does the ordering of HTML classes on a DOM element affect the statement priority?
I have to disagree slightly with Jon and Watson's answers, as...
Yes, it Can (depending on the statement)
Your question is:
Does the ordering of CSS classes on a DOM element affect the statement priority?
Which does depend on the statement in question.
HTML Ordering Does Not Typically Matter
The following are equivalent when it comes to a straight call to a class (i.e. .class1 or .class2) or to a combined call (i.e. .class1.class2 or .class2.class1):
<div class="class1 class2"></div>
<div class="class2 class1"></div>
Cases Where Statement Priority for above HTML Can be Affected Based on HTML Order
The main place where ordering in HTML matters is with the use of attribute selectors in your CSS.
Example 1 Fiddle using the following code seeking to match attribute value will NOT have any change in font color, and each div will have different properties because of the ordering of the classes:
[class="class1"] {
color: red;
}
[class="class1 class2"] {
background-color: yellow;
}
[class="class2 class1"] {
border: 1px solid blue;
}
Example 2 Fiddle using the following code seeking to match beginning of attribute value will NOT have any change in font color for the second div, and each div will have different properties because of the ordering of the classes:
[class^="class1"] {
color: red;
}
[class^="class1 class2"] {
background-color: yellow;
}
[class^="class2 class1"] {
border: 1px solid blue;
}
Example 3 Fiddle using the following code seeking to match end of attribute value will NOT have any change in font color for the first div, and each div will have different properties because of the ordering of the classes:
[class$="class1"] {
color: red;
}
[class$="class1 class2"] {
background-color: yellow;
}
[class$="class2 class1"] {
border: 1px solid blue;
}
A Clarifying Statement about "Priority"
To be clear, in the cases above, what is affected as far as "statement priority" is concerned is really a matter of whether the statement actually applies or not to the element. But since the application or not is in a sense, the basic priority, and since the above are cases where such application is actually based on the ordering of the classes on the HTML Dom element (rather than the presence or absence of the class), I thought it worth adding this as an answer.
Possible Valid Use of Class Ordering?
This is a thought occurring to me, based on BoltClock's comment. Consider just two classes being used to style elements based on whatever factors are deemed critical to different styling. These two classes theoretically can replace the use of eleven different individual classes using the combination of attribute selectors (actually, as will be noted later, the possibilities are almost limitless with but a single class, but I'll discuss that in a moment since this post is about ordering of multiple classes). For these two classes we can style elements differently as follows:
Assuming these HTML Combinations
<div class="class1">Element 1</div>
<div class="class2">Element 2</div>
<div class="class1 class2">Element 3</div>
<div class="class2 class1">Element 4</div>
CSS Possibilities
/* simply has the class */
.class1 {} /* affects elements 1, 3, 4 */
.class2 {} /* affects elements 2-4 */
/* has only a single class */
[class="class1"] {} /* affects element 1 only */
[class="class2"] {} /* affects element 2 only */
/* simply has both classes */
.class1.class2 {} /* affects elements 3-4 */
/* has both classes, but in a particular order */
[class="class1 class2"] {} /* affects element 3 only */
[class="class2 class1"] {} /* affects element 4 only */
/* begins with a class */
[class^="class1"] {} /* affects elements 1 & 3 only */
[class^="class2"] {} /* affects elements 2 & 4 only */
/* ends with a class
NOTE: that with only two classes, this is the reverse of the above and is somewhat
superfluous; however, if a third class is introduced, then the beginning and ending
class combinations become more relevant.
*/
[class$="class1"] {} /* affects elements 2 & 4 only */
[class$="class2"] {} /* affects elements 1 & 3 only */
If I calculate right, 3 classes could give at least 40 combinations of selector options.
To clarify my note about "limitless" possibilities, given the right logic, a single class can potentially have imbedded in it code combinations that are looked for via the [attr*=value] syntax.
Is all this too complex to manage? Possibly. That may depend on the logic of exactly how it is implemented. The point I am trying to bring out is that it is possible with CSS3 to have ordering of classes be significant if one desired it and planned for it, and it might not be horribly wrong to be utilizing the power of CSS in that way.
No, it does not. The relevant part of the W3C standard makes no mention of the order of appearance for classes.
No, it does not, like you said, if two rules have the same specificity, the one that comes later in your CSS will be applied.
No. But if you want to make one of your declaration blocks to has more precedence (w/o many !importants) make its selector more specific.
For example, for a div:
div.classname1 { color: red; } /* classname1 color will be red (for `div`s) */
.classname1 { color: blue; }
What's missing or a little hard to find in other answers is this:
What matters is the order in which the browser reads/parses the class names
The class defined last will win
.a {
color: red;
}
.b {
color: blue;
}
<div class="a b">This text will be blue</div>
<div class="b a">This text will ALSO be blue</div>
Example comes from this source
May be affected by the order of your imports
Because if this you may need to pay attention to how you import CSS in your files.
For example in my JavaScript based project I have a component that I can pass extra classes to. In order for my own classes to overwrite styles of the classes of the component itself I need to first import the component I wish to style (which will import its own styles) and only then import my own styles:
//import the component first, which will import css
import {SomeComponent} from 'some-library/SomeComponent';
//And THEN our own styles
import './styles.css';
return <SomeComponent className={myClassName} />
Like this my buildprocess (Webpack) will put my own classes later in the CSS bundle than the components ones.
I need to do:
<p id="un_but" class="blue_but" class="radius_right">SignUp</p>
but this does not work.
Obviously I could just combine the class properties but I was wondering if there is another way perhaps
<p id="un_but" class="blue_but radius_right" >SignUp</p>
dom element(p) can have only ONE attribute(class), but with multiple values separated by space
One of the lesser known tricks with CSS is the fact that you don't have to limit your elements to just one class. If you need to set multiple classes on an element, you add them simply by separating them with a space in your attribute. For example:
<p class="pullquote btmmargin left">...</p>
This sets the following three classes on that paragraph tag:
pullquote
btmmargin
left
You would assign these as generic classes in your CSS:
.pullquote { ... }
.btmmargin { ... }
p.left { ... }
If you set the class to a specific element, you can still use it as part of a list of classes, but be aware that it will only affect those elements that are specified in the CSS.
You can use the important keyword to set precedence over different classes.
For example:
.pullquote { width :15 px !important }
.btmmargin { width:20px }
p.left { ... }
In the example above 20px width attribute will have more precedence.