I found a list of ALL bootstrap classes courtesy of a post here. Hooray. Except it is not complete. In the last 2 hours, in Stackoverflow, I have found examples of class="span4; clear:both; content-heading; paragraphs; " (these were not in a list)
What's div class="paragraphs" ? Is content-heading similar to .lead (which I think is a style).
Is there any listing of all the STYLES?
I love w3schools - I live 20 miles W of MIT, and MIT was one the schools that accepted me 50 years ago. I love the mission and execution of w3. But I have poured through their tutorials and references and I cannot find simple rules like:
class elements can be strung together, semi-colons in-between. They
end in a quote mark, but the last entry can be followed by a
semi-colon with or w/o a space. Numbers, like height, can have
leading spaces.
Is there some place that lays out this stuff? I've looked at many other bootstrap sites, but w3 seems the best. I still don't quite grasp Github, but they have lots of info.
I would recommend you to have a look at the official bootstrap documentation
http://getbootstrap.com/ for the latest version
http://getbootstrap.com/2.3.2/ for the older version
In the example you are looking, paragraphs and content-heading classes might be a user defined.
It is also worth noting that bootstrap evolved over time. Bootstrap 2x to 3x was a major change. So note that the examples you are looking at might correspond to an older version of bootstrap.
The release history can be found here on github
https://github.com/twbs/bootstrap/releases
and Bootstrap 2x to 3x migration guide can be found here
http://getbootstrap.com/migration/
Hope it helps
There is no such thing as a "class element". You can attach class names to HTML element nodes by listing them in the node's class attribute.
Multiple class names are separated by white space, the whole list of class names enclosed in quotes, single or double makes no difference. Example: <div class="first-class second-class"/>. A single class name does not require surrounding quotes, however it's advisable to always enclose attribute values in quotes, to avoid mistakingly omitting them when they are required. The order of class names in the attribute value is irrelevant.
A valid class name can consist of upper and lowercase letters, numbers, hyphens (-) and underbars (_). However the name must start with a letter, hyphen or underbar. See this more complete answer for more on this subject.
Styles for class names are defined in style sheets, for the web its CSS (Cascading Style Sheets). The cascade is defined by the order styles are introduced in the style sheet; succinctly and simplified: later values trump earlier values, when the selectors are of equal importance.
In CSS, properties and their value is separated by a colon. The value is followed by a semi-colon. A block of styles is surrounded in curly braces, and are preceded by a selector. The selector can be a tag name, id, class name as well as a combination of the three, combinators and pseudo-elements.
An example:
/* Styles applied to the body tag and all its child nodes */
body {
background-color: white;
color: black;
}
/* This block defines that when the class name "error"
* applies, the text should be red */
.error {
color: red;
}
For a friendly tutorial in HTML and CSS, see e.g. CodeAcademy. For reasons why one should not hold W3Schools in very high regard see W3Fools.com.
Related
I've been using dashes as a separator for css Class and ID names:
.about-us
.car-pricing-guide
I've seen sites use multiple underscores __
.home__content
Also, I've seen 2 dashes
.hero--title
I know it's a matter of preference but can someone point to articles or the though process for these kind of patterns? Is there a move towards a particular convention or is there a popular set of convention people seem to agree/follow?
The double underscore follows the BEM methodology. It is basically a way of naming classes so that later it becomes easy for the user to understand.
The guiding principle behind BEM seems to be "when designing a page, think in terms of reusable widgets". Which is pretty much the standard way you should be writing your semantic HTML.
Learn more about BEM here: BEM methoodology
I'm a huge advocate for using hyphens and it does seem to be more conventional. Long long ago some browsers didn't support underscores in class names and IDs, so hyphens were the preferred/standardized method. Even looking at CSS you see hyphens everywhere for things like border-color, so why not stick to the trend?
Hyphens also allow you to take advantage of things like the |= attribute. It lets you do nifty things like this:
span[class|="uppercase"] { text-transform: uppercase; }
Which results in both
<h1 class="uppercase-header">The Three Little Pigs</h1>
and
<h2 class="uppercase-subheader">Chapter 1</h2>
both getting the style text-transform: uppercase;
Now, I've never actually used this selector... but if I need to, my code is ready!
If you're still not a believer in hyphens, here are some more great examples as to why they're a great standard to stick to: http://jasonbuckboyer.com/playground/use-hyphens-in-css/
Let me add that an underscore does not separate a line into words. So you can (at least in Windows) double-click some_selector, and it will be selected, but to copy some-selector you will have to select it manually. Underscores save time when you have to copy a lot.
Is it safe to give several elements the same ID in one page? For example this often happens, when using some jquery plugins, when you run some slider or gallery twice or more. We know, developers like to give some ID to the html container in order the script works faster.
Let's read w3.org documentation:
What makes attributes of type ID special is that no two such
attributes can have the same value; whatever the document language, an
ID attribute can be used to uniquely identify its element.
But the next example with 2 elements having the same ID works fine in all browsers, though it's not valid:
#red {
color: red;
}
<p id="red">I am a red text.</p>
<p id="red">I am a red text too.</p>
Can anybody explain this strange situation?
Browsers always try to "fail silently". What this means is that even though your HTML is invalid, the browser will try to guess what your intent was, and handle it accordingly.
However, deviating from the spec can cause some very unforeseen side effects.
For example:
document.getElementById('red');
will only get you the first one.
You'll also have to test your page in all the browsers that your users might use, to make sure your code works as intended. You can't just assume that it'll work.
In short: Don't do this! If you need to target several elements with the same CSS, use a class name. That's what they were designed for...
Having said that; if you really need to select multiple elements with the same ID, use an attribute selector:
document.querySelectorAll('p[id="red"]');
Note however, that this doesn't work in IE7 and below...
Is it safe to give several elements the same ID in one page?
As you know, it's against the validation rules to give more than one element the same ID in a single page. However, rules are broken, and in the world of HTML tag soup, browsers have to account for these broken rules without breaking pages, hence the behavior you observe.
Although browsers have been shown to behave the same way even if you do so (fortunately for situations where it can't be helped), I wouldn't call it totally "safe" to do so, as such behavior may not be consistent or reliable.
The best bet is to follow the rules as faithfully as you can, and only break the rules if you have very, very good reasons to (and you almost never will, so don't even consider it). Otherwise, like Joseph Silber said, use classes, designed specifically for classifying or grouping multiple elements.
Can anybody explain this strange situation?
The uniqueness of IDs in an HTML document is not enforced or assumed by CSS; instead, the Selectors spec simply states this:
An ID selector represents an element instance that has an identifier that matches the identifier in the ID selector.
Notice the use of the word "an" throughout this sentence.
Following that statement are some example uses, which use the word "any" instead:
The following ID selector represents any element whose ID-typed attribute has the value "chapter1":
#chapter1
The following selector represents any element whose ID-typed attribute has the value "z98y".
*#z98y
The assumption of a conformant document is clarified by level 3 of the Selectors spec, near the beginning of the section (emphasis mine):
What makes attributes of type ID special is that no two such attributes can have the same value in a conformant document, regardless of the type of the elements that carry them; whatever the document language, an ID typed attribute can be used to uniquely identify its element.
Where "conformant" refers to conformance to HTML, not CSS. Keep in mind that this text wasn't present in the level 2 spec, which is the one you quote in your question.
Bear in mind that the text that is quoted is not normative. While it's a way of helping implementers work out error-handling cases, it's not a compulsory rule to be followed, and indeed, any implementation is free to behave differently without being in violation of the spec. Don't write invalid HTML just to take advantage of what may seem to be expected or consistent behaviors, because you can't guarantee that these behaviors will remain that way. Any CSS implementation is free to match elements sharing the same ID differently, or even stop matching them altogether, if it decides that's how it should handle documents that break this rule.
In other words: just because you can, doesn't mean you should.
This works with simple HTML styling but will not work with queries.
From the jQuery API documentation:
Each id value must be used only once within a document. If more than
one element has been assigned the same ID, queries that use that ID
will only select the first matched element in the DOM. This behavior
should not be relied on, however; a document with more than one
element using the same ID is invalid.
I can very well understand from this Selectutorial what element/tag based descendant selectors are, how and why they work and for what purpose.
But then I came across certain websites which define a class name for an anchor <a> which is made of several names separated by spaces, e.g.
<a class="samename nav_item samename" href="/messages/?refid=7"> Text </a>
I then found out that these are also called "descendant selectors" -- or are they called descendant combinators?
This is where I stopped understanding:
Is the 2nd type of "descendant
selectors" the same as the 1st type?
Does the 2nd type of "descendant
selectors" have a different name,
that can help me differentiate it
from the 1st type when referring to
it?
What is the purpose of this 2nd type
of "descendant selectors"?
Why repeat samename in such
descendant selector?
Any tips or pointers to places where I can learn more about this 2nd type would be much appreciated.
EDIT: The replies below helped put order into things, especially in regard to proper terminology. I will try to summarize my understanding so far -- first by attempting to answer the questions above in a respective manner, then listing some insights, with the hope that it can help future css-laymen like me:
The 2nd type is not "descendant
selectors" at all, so it cannot
possibly be the same as the 1st
type.
The name for the 2nd type, for now,
is multiple class names assigned to the same tag.
One use of attributing multiple classes per element is that one can then chain class selectors, such that only elements with all the classes listed are matched, not those that have one or fewer of the classes.
This is most likely a programming mistake/error/bug (although I found it on a very prominent website).
Insights (please correct if you spot a mistake):
Despite what's written in
w3schools, a class (name) is
not a selector! A selector can only be an HTML element.
However, a CSS rule may refer
to an HTML element (or a group of
HTML elements) by class name, using
the .classname notation. This
notation is referred to by some as
"the class selector" and this
is where my confusion stemmed from. It merely means it can be used to select any HTML element that has a class attribute.
A CSS rule may also refer to an HTML
element (or a group of HTML
elements) by element id, using the
#elementid notation. This is an
entirely different subject but since
this notation is referred to by some
as "the id selector" it's quite
possible this could be a source for
confusion as well, so it's briefly
mentioned here.
In HTML, "class" is an attribute. In
CSS, it is a "selector aggregator",
used to select any HTML element that
has that class attribute.
The best CSS tutorial, by far, is
Selectutorial.
There is only one CSS descendant selector, and that is the space character:
E F /* Selects any F that descends from (or is contained by) an E */
Space-separated class names are just multiple classes that are separated by spaces, in a single HTML class attribute. The class attribute is not a selector, in fact not even part of CSS for that matter.
On a somewhat related note, however, one use of listing multiple classes per element is that you can then chain class selectors, such that only elements with all the classes listed are matched, not those that have one or fewer of the classes. For example:
.samename.nav_item /* Selects only elements that have both classes */
As to why samename is repeated in your given HTML, I have no idea. It's the same as having just one samename class.
In your example, the a tag actually has several different classes (of which one is listed twice, for some reason).
In CSS code, we'd use a space to separate decendant selectors, but in HTML it just lets us put several classes in the same set of parentheses.
Is p.error better or worse than .error?
I have read that element-specific selectors are bad and should be used only if really needed but noone seems to know why. I mean I do understand that .error is better for code reuse, but is there somekinda specific reason why I shouldn't address class with element always?
CSS selectors are read right to left. So p.error has one additional step to .error. This may result in a smaller set or not - depends on your markup.
However, this is a micro micro optimization. There is not going to be a performance hit unless we're talking about a massive amount of selectors.
Here's a great article on CSS selectors that elaborates on how they are evaluated : http://css-tricks.com/efficiently-rendering-css/
.error is more efficient than p.error .
To understand why this is more efficient I recommend you read this article over at css tricks.
no it's not bad, but it may not always be necessary
tools like Google's PageSpeed and YSlow! refer to these type of selectors as being "over qualified" perhaps that's where you're hearing the "it's bad" part from - reading material
take for example p#myid - an ID should always be unique on a page anyway, therefore there is no need at all to qualify it with the p element. an ID already has the highest weight when specificity is being counted so again it's totally redundant to add the extra part to try and add more specificty.
However with class names like your example it can sometimes definitely be desirable to add the qualifier as you may want the class to be re-usable on different type elements but have different properties depending on if it's a div or a p for example, the "qualifier" then makes the selector slightly more specific
.error {background: red; margin: 5px;}
p.error {margin: 2px;}
The code above means you can use the error class on any element and it will have 5px margins however if you set the error class on a p element the second selector is actually doing something, it's over-riding the first's margins but still getting the background color
So they do a job, but too often you see too many people over qualifying all their elements when it is not necessary.. for example if you're only ever applying that .error class to a p element then you wouldn't need the second selector.
The rule of thumb is to make the selector unique as quickly as possible starting from the right side of it.
Having a very specific selector will not amount to bad performance, but if there are a lot of declarations applicable for an element, then the performance will take a hit. The only concern otherwise is that it increases the no. of bytes to be downloaded for loading the stylesheet. Trust me, Every extra character in HTML passed is evil and will amount to lower page load speed.
During CSS cascading is applied by modern-day browsers, the following is the process that occurs for each CSS property for each web page element:
Gather all the declarations for the property from all the sources. This includes default browser styles and custom user style, as well as author style sheets. If there is more than one, proceed to 2.
Sort the declarations by importance and origin in the following order (from lowest to highest priority):
user agent style sheets (default browser styles)
normal declarations in a user style sheet (a user’s custom style sheet)
normal declarations in an author style sheet (web page style sheets; external, embedded, and inline styles)
!important declarations in an author style sheet
!important declarations in a user style sheet
The one with the highest priority wins. If more than one have the same priority then proceed to 3.
Sort by selector specificity. The one with the most specific selector wins. If no clear winner, proceed to 4.
The one that comes last in the source wins!
If the cascade does not set a CSS property on an element, then the browser will fall back to using an inherited property from the element’s parent (this only happens for some properties), otherwise the property is set to the CSS default value.
According to the above process, if you use a lot of more specific selectors, there would be a choice made after atleast 3 levels deep. Hence, the more the no. of declarations which might be applicable to an element, the lower the performance would be.
So, You must as specific as it makes sense to be.
The reason is specificity. For example...
+1 each access by class
+1 each access by tag
+10 each access by ID
etc.
So, if you have a class and a tag access, that style has a specificity of 2 (1+1).
Later, if you're trying to style all .error elements, but you have a conflicting style in the p.error elements, the higher specificity will win. This may cause some headaches down the line. That is why you may not want to always use tag+class.
(That being said, specificity solves many more problems than it creates, and is generally regarded as Pretty Awesome.)
As a general rule of thumb, the less selectors a browser has to evaluate the better.
p.error isn't necessarily "worse" than .error, if .error is used for multiple tags. e.g. div.error (see a foot note at the bottom).
But if it's only used on a paragraph anyway, then having p.error is just making the browser work harder i.e.
First it will have to find all elements with the class attribute error and then filter these by only having tags that are p.
Here is some interesting reading on Optimize browser rendering on Google's Page Speed site.
Foot Note
However if you need to use a class on multiple tags, it's probably best only to put in the css styles which apply to those tags instead of trying to separate it. e.g.
.error
{
color:red;
}
h1
{
font-size:2em;
}
p
{
font-size:0.8em;
}
<h1 class="error">Bad Heading!</h1>
<p class="error">bad!</p>
So that kind of defeats the need to prefix classes with tags anyway.
I hope this helps!
Ive been wondering... in CSS are there any differences between creating a style class and applying it an element, or creating a style with the #elementId notation (apart from being able to assign a class to different elements)?
For example...
#div1
{
background-color: Yellow;
}
<div id="div1">
Hello world!
</div>
Or
.div1
{
background-color: Yellow;
}
<div class="div1">
Hello world!
</div>
Thanks! :)
An ID must be unique in a document. Classes can be used in any number and combination. So you can use one class on multiple elements and multiple classes on one element.
One other difference; id-selectors are more specific than class-selectors, so I believe they will "trump" any other selector that exists. You can use "important" to do the same thing, but and id selector may be easier.
But id-selectors should be used sparingly...
Many classes can include a given "class" while only one element may be identified by a given ID. If you need to locate an unique Element use ID, otherwise if you wish to mark many elements that are basically the same but in different spots in your html use 'class'.
You sort of answered your own question, they are just mechanisms to 'identify' elements.
using #elementID applies only to the element uniquely identified by that id. a class can be used by multiple elements
there is however an order of precedence. selectors using the id have greater weight than selectors using class and when there is a collision the #id selector will take precedence
edit: see http://kiribao.blogspot.com/2008/03/css-selectors-precedence-and-ways-to.html for more detail on selector precedence
edit: also see the w3c specs at http://www.w3.org/TR/CSS21/cascade.html#specificity
Performance or functionality-wise, there is no difference [citation needed].
The only real difference is semantic, if you are working on a single node with a unique ID, or if you need a reusable class marking several nodes.
There are some differences:
Uniqueness
IDs must be unique, classes can be repeated. This is logical if you look at their expected usage.
Usage
IDs should be used to denote large sections of a website (e.g. #header), or unique elements that are accessed via Javascript (e.g. #killSession)
Classes should be used for reusable parts.
Specifity
IDs get assigned a specifity value of 100, while classes are only worth 1.
So this rule:
#id .class
Is worth 101 points.
This rule:
#id #id2
Is worth 200 points and will always trump the #id .class rule (regardless of the source order).
Performance
Performance wise, getting elements by ID is always faster than class, especially when talking Javascript. I'd love to see someone add some cold hard numbers to this.
Discussion
An interesting discussion about the performance of selectors can be found at Shaun Inman's blog.
The usage of classes is debated in Jeff Croft Applying OOP concepts to CSS
Classes are to group together elements which share similar functionality (for scripting) and/or layout (for styling). IDs should always be unique identifiers for elements.
A good example for something which should have an ID is the content area of your document, which is common to use the #content ID for. Classes are good for anything else which may occur twice in your document, such as headers which should have special markup or behavior, or links which should open a lightbox instead of the normal "go to URL" behavior.
HTH.