This question already has answers here:
What does a dot before a variable indicate in html?
(4 answers)
Closed 8 years ago.
I am not sure if I understood it correctly. When styling in CSS like this:
body {
}
I'm referring to an element that belongs to HTML. When I write something like this:
.body {
}
I'm referring to a class name given by me. Is this correct?
You may want to have a look at the article on CSS Selectors from MDN, this is also a pretty healthy introductory article on selectors of the type you list, as well as some other important ones.
A non symbol prefixed 'word' denotes an element (body), a 'word' prefixed with a period (.) denotes a 'class' (.body)
Element selectors (called 'type' selectors) only refer to a specific type of element (e.g. body), class selectors can be applied to elements of any type, whereas something like id selectors (a hash preceding a 'word') are unique and can only be applied to a single element (i.e. one id per element, which must not be used elsewhere)
There are many types and combinations of selectors, to get an idea you may also want to read up on CSS specificity
Specificity is the means by which a browser decides which property
values are the most relevant to an element and gets to be applied.
Specificity is only based on the matching rules which are composed of
selectors of different sorts.
Yes.
.body{
}
Would be something like this:
<p class='body'>This is text with a class of body</p>
But can also affect other elements with the class .body.
body{
}
Will affect the body element eg:
<body></body>
You can also use ID's. For example:
#body{
}
And you use this similar to a class. However only 1 ID of the same name per page.
<p id='body'>This is a body tag, but there should only ever be 1 ID per page.</p>
Take a look here for more information.
Related
This question already has answers here:
How are the points in CSS specificity calculated
(7 answers)
Closed 3 years ago.
When defining a CSS class for table cells, I would expect to say td.classname. However, I have seen sample code saying table td.classname and a couple of the answers to How to apply style classes to td classes? say table tr td.classname. All variants seem to produce the same results in Chrome.
What's the difference, and which is preferable?
What's the difference?
Specificity. The browser will apply ALL the styles that match. They are generally applied in order of specificity (from least to most). The higher the specificity of a CSS selector, the greater the likelihood its declarations are used over another CSS rule's declarations.
When calculating specificity the rules are essentially:
Inline styling wins (1,0,0,0 points)
For each ID apply 0,1,0,0 points
For each class, pseudo-class or attribute selector apply 0,0,1,0 points
For each element reference, apply 0,0,0,1 point
Total them up for your selector as if they were a number. 1020 trumps 0123.
In this demo you can see how the final applied style is taken from several declarations. The most specific rules override any less specific ones that came before it:
td {color:#ccc; font-size:20px;}
.me {color:red; background:cyan;}
td.me {color:blue; font-weight:bold;}
tr td.me {color:pink; border:1px solid #7799aa;}
table tr td.me {color:orange;}
<table>
<tr><td>1</td><td class="me">2</td></tr>
</table>
Which is preferable?
It depends on how targeted your styles are meant to be. Are you trying to style all <p>s or just one? Is it a global font style or just for certain element? etc. For global styling use element references and pseudo selectors. When you have specific multiple instances use classnames. Where you have a one-off case use an ID (or a class). For example: You could style all your buttons with low specificity... button {background:grey;} ...and override it with additional specificity: button.warning {background:red;}. Be no more specific than you must be! (You might need to override a style later.)
Further reading:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://css-tricks.com/specifics-on-css-specificity/
https://www.codecaptain.io/tools/css-specificity-calculator
The CSS syntax table td.classname means any <td class="classname"> tag inside a <table>, and table tr td.classname means any <td class="classname"> tag within a <tr> within a <table>.
Since every table cell is normally inside a table row inside a table, they are nearly synonyms. If there’s any esoteric exception to that, it must not be relevant to that particular HTML document. This would, however, exclude a <th>—if you only use that classname for this one purpose, you might just as easily write .classname.
This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
Closed 5 years ago.
If I declare in my css file(or inside <style> </style> tags) firstly the id of element and then the classname of the same element, then the id styling will be applied, regardless the fact that classname is the latest one in order.
I want to know why this is happening and if it has some naming, please do tell.
Just to make it more clear, take a look at this example, please:
div {
height:100px;
width:150px;
border:1px solid #000;
margin:0 auto;
}
#theID {
background:#090;
}
.theCLASS {
background:#00F;
}
<div id="theID" class="theCLASS"></div>
This is to do with the complicated world of "Specificity"...
ID's are more specific than classes and take precedence over them. This is because ID's have to be UNIQUE on every page...so they are by nature very specific. Classes can appear multiple times.
Learning how this works is fundamental to coding CSS. Some people say you should try to avoid using ID's altogether as they are so specific they tend to cut down reuse.
A rule of thumb might be to use ID's to identify large sections of your page, or important items and classes to attach styles to the other things.
These days with html5 we have <section>, <header> and <footer> whereas we used to use div's for those (with ID's normally) so these days the ID is used less than ever since we can target those things directly.
However consider ID-ing sections: <section id="mainContent"> for example is a fairly standard thing to do.
There are no RULES about how to specifically (excuse the pun) use ID's and classes. Just conventions that have built up over time.
see: https://developer.mozilla.org/en/docs/Web/CSS/Specificity ... here is a section:
The concept
Specificity is the means by which browsers decide which CSS property
values are the most relevant to an element and, therefore, will be
applied. Specificity is based on the matching rules which are composed
of different sorts of CSS selectors.
How is it calculated?
Specificity is a weight that is applied to a given CSS declaration,
determined by the number of each selector type in the matching
selector. When specificity is equal to any of the multiple
declarations, the last declaration found in the CSS is applied to the
element. Specificity only applies when the same element is targeted by
multiple declarations. As per CSS rules, directly targeted element
will always take precedence over rules which an element inherits from
its ancestor.
It carries more specificity
CSS applies vastly different specificity weights to classes and IDs.
In fact, an ID has infinitely more specificity value! That is, no
amount of classes alone can outweigh an ID.
CSS Tricks - Specifics on CSS Specificity
Further Reading:
CSS Tricks - The Difference Between ID and Class
MDN - Specificity
Selector Types
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).
This question already has answers here:
What's the difference between an id and a class?
(17 answers)
Closed 5 years ago.
#main {
background: #000;
border: 1px solid #AAAAAA;
padding: 10px;
color: #fff;
width: 100px;
}
<div id="main">
Welcome
</div>
Here I gave an id to the div element and it's applying the relevant CSS for it.
OR
.main {
background: #000;
border: 1px solid #AAAAAA;
padding: 10px;
color: #fff;
width: 100px;
}
<div class="main">
Welcome
</div>
Now here I gave a class to the div and it's also doing the same job for me.
Then what is the exact difference between Id and class and when should I use id and when should I use class.? I am a newbie in CSS and Web-design and a little bit confused while dealing with this.
Use a class when you want to consistently style multiple elements throughout the page/site. Classes are useful when you have, or possibly will have in the future, more than one element that shares the same style. An example may be a div of "comments" or a certain list style to use for related links.
Additionally, a given element can have more than one class associated with it, while an element can only have one id. For example, you can give a div two classes whose styles will both take effect.
Furthermore, note that classes are often used to define behavioral styles in addition to visual ones. For example, the jQuery form validator plugin heavily uses classes to define the validation behavior of elements (e.g. required or not, or defining the type of input format)
Examples of class names are: tag, comment, toolbar-button, warning-message, or email.
Use the ID when you have a single element on the page that will take the style. Remember that IDs must be unique. In your case this may be the correct option, as there presumably will only be one "main" div on the page.
Examples of ids are: main-content, header, footer, or left-sidebar.
A good way to remember this is a class is a type of item and the id is the unique name of an item on the page.
ids are unique
Each element can have only one id
Each page can have only one element with that id
classes are NOT unique
You can use the same class on multiple elements.
You can use multiple classes on the same element.
Javascript cares
JavaScript people are already probably more in tune with the differences between classes and ids. JavaScript depends on there being only one page element with any particular id, or else the commonly used getElementById function couldn't be depended on.
For more info on this click here.
Example
<div id="header_id" class="header_class">Text</div>
#header_id {font-color:#fff}
.header_class {font-color:#000}
(Note that CSS uses the prefix # for IDs and . for Classes.)
However color was an HTML 4.01 <font> tag attribute deprecated in HTML 5.
In CSS there is no "font-color", the style is color so the above should read:
Example
<div id="header_id" class="header_class">Text</div>
#header_id {color:#fff}
.header_class {color:#000}
The text would be white.
IDs must be unique--you can't have more than one element with the same ID in an html document. Classes can be used for multiple elements. In this case, you would want to use an ID for "main" because it's (presumably) unique--it's the "main" div that serves as a container for your other content and there will only be one.
If you have a bunch of menu buttons or some other element for which you want the styling repeated, you would assign them all to the same class and then style that class.
As pretty much everyone else has said use ID for one-off elements and class for multiple use elements.
Here is a quick, over simplified example, take HTML and HEAD tags as read
<body>
<div id="leftCol">
You will only have one left column
</div>
<div id="mainContent">
Only one main content container, but.....
<p class="prettyPara">You might want more than one pretty paragraph</p>
<p>This one is boring and unstyled</p>
<p class="prettyPara">See I told you, you might need another!</p>
</div>
<div id="footer">
Not very HTML5 but you'll likely only have one of these too.
</div>
</body>
Also, as mentioned in other answers ID are well exposed to javascript, classes less so. However modern javascript frameworks like jQuery leverage class for javascript too
ID's have the functionality to work as links to particular sections within a webpage.
a keyword after # tag will take you to a particular section of the webpage.
e.g "http://exampleurl.com#chapter5" in the address bar will take you there when you have a "section5" id wrapped around the chapter 5 section of the page.
The class attribute can be used with multiple HTML elements/tags and all will take the effect. Where as the id is meant for a single element/tag and is considered unique.
Moreoever the id has a higher specificity value than the class.
id:
It will identify the unique element of your entire page. No other element should be declared with the same id.
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a "#".
class:
The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.
This allows you to set a particular style for many HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."
If there is something to add to the previous good answers, it is to explain why ids must be unique per page. This is important to understand for a beginner because applying the same id to multiple elements within the same page will not trigger any error and rather has the same effects as a class.
So from an HTML/CSS perspective, the uniqueness of id per page does not make a sens. But from the JavaScript perspective, it is important to have one id per element per page because getElementById() identifies, as its name suggests, elements by their ids.
So even if you are a pure HTML/CSS developer, you must respect the uniqueness aspect of ids per page for two good reasons:
Clarity: whenever you see an id you are sure it does not exist elsewhere within the same page
Scalability: Even if you are developing only in HTML/CSS, you need to take in consideration the day where you or an other developer will move on to maintain and add functionality to your website in JavaScript.
You can assign a class to many elements. You can also assign more than one class to an element, eg.
<button class="btn span4" ..>
in Bootstrap. You can assign the id only to one.
So if you want to make many elements look the same, eg. list items, you choose class. If you want to trigger certain actions on an element using JavaScript you will probably use id.
A class can be used several times, while an ID can only be used once, so you should use classes for items that you know you're going to use a lot. An example would be if you wanted to give all the paragraphs on your webpage the same styling, you would use classes.
Standards specify that any given ID name can only be referenced once within a page or document. Use IDs when there is only one occurence per page. Use classes when there are one or more occurences per page.
This is very simple to understand :-
id is used when we have to apply CSS property to one attribute only.
class is used when we have to use CSS property in many locations within the same page or different.
General :- for unique structure like staring div and buttons layout we use id .
for same CSS throughout the page or project we use class
id is light and class is little heavy
A simple way to look at it is that an id is unique to only one element.
A class is not unique and applied to multiple elements.
For example:
<p class = "content">This is some random <strong id="veryImportant"> stuff!</strong></p>
Content is a class since it'll probably apply to some other tags aswell where as "veryImportant" is only being used once and never again.
Unlike the id selector, the class selector is most often used on several elements.
This allows you to set a particular style for many HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."
A simple way to look at it is that an id is unique to only one element. class is better to use as it will help you to execute what ever you want.
id selector can be used to more elements. here is the example:
css:
#t_color{
color: red;
}
#f_style{
font-family: arial;
font-size: 20px;
}
html:
<p id="t_color"> test only </p>
<div id="t_color">the box text</div>
I tested on internet explorer (ver. 11.0) and Chrome (ver.47.0). it works on both of them.
The "unique" only means one element can not have more than one id attributes like class selector. Neither
<p id="t_color f_style">...</p>
nor
<p id="t_color" id="f_style">...</p>
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.
This question already has answers here:
What's the difference between an id and a class?
(17 answers)
Closed 9 years ago.
Where can I use ids and classes? What is the difference between them? Is there any need that we should compulsorily use ids in our CSS?
IDs are meant to be unique, while classes are better for a "type" of element.
So you might have something like:
<ul id="menu">
....
</ul>
Because you will probably only have 1 main menu on your site.
For classes, however, you might have something like:
<span class='author'>Paolo Bergantino</span>
Or perhaps to style the div that contains an answer on this site:
<div class='answer'>....</div>
Because there will be multiple of these per page, they are a class of elements. Think of an ID as the social security number of an element. Whenever an element is important enough and is unique, you give it an ID. This also helps with dynamic websites as selecting elements by ID is by far the fastest way, and if you have multiple elements with the same ID (thus violating this practice) Javascript won't work as intended.
An ID identifies exactly one DOM element, uniquely. A class identifies a group of related DOM elements.
For example, you might have a single, unique nav menu, identified by an ID:
<div id="nav">...</div>
and within it have a number of menu sets, each of which is also uniquely identified and which belongs to a common class:
<div id="nav">
<ul id="content_menu" class="menu">...</ul>
<ul id="contact_menu" class="menu">...</ul>
<ul id="personal_menu" class="menu">...</ul>
</div>
Short and simple:
Classes may be used as many times as needed (and are defined by a period).
Ids can only be used on ONE element (and are defined by a pound).
<style>
.class {
font-size: 3em;
}
#id {
font-size: 3em;
}
</style>
<body>
<span class="class">I am a class</span>
<span class="class">Look at me, also a class</span>
<span id="id">I am special, you can only have one of me or I do not meet XHTML standards</span>
From the w3schools:
The id attribute specifies a unique id
for an HTML element.
The id must be unique within the HTML
document.
The id attribute can be used by a
JavaScript (via the HTML DOM) or by
CSS to make changes or style the
element with the specified id.
and
The class attribute specifies a
classname for an element.
The class attribute is mostly used to
point to a class in a style sheet.
However, it can also be used by a
JavaScript (via the HTML DOM) to make
changes to HTML elements with a
specified class.
The class attribute cannot be used in
the following HTML elements: base,
head, html, meta, param, script,
style, and title.
It is possible to assign multiple
classes to one HTML element, e.g.
.
This allows you to combine several CSS
classes for one HTML element.
While you could use classes for everything, the separation between "classes that only occur once" (i.e. IDs) and "regular classes" is quite useful for keeping your CSS meaningful for yourself.
.menu { ... } /* Err, how many of those did I have? */
#menu { ... } /* Ahh, THE menu. */
An ID refers to a specific element (every ID should never used more than once); a class refers to multiple elements.