I have seen some developers write
HTML:
<div class="test"> some content </div>
CSS:
div.test {
width:100px.
}
What is the purpose of doing div.className
instead of just .className
.
Does this mean this style will be applied only when the class is applied to a div.
So, <span class='test'>content</span>
will have no effect of 'test' with the css above? If that is the case, is that best practice? This is almost like style overriding for different type of elements, mixing styles with rules!
Definition and Usage. The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript. The <div> tag is easily styled by using the class or id attribute.
If you want to use a class, use a full stop (.) followed by the class name in a style block. Next, use a bracket called a declaration block that contains the property to stylize the element, such as text color or text size. CSS Classes will help you stylize HTML elements quickly.
The className property sets or returns an element's class attribute.
Use div in CSS Art In the CSS, select the div with the class attribute, then set an equal height and width for it. You can make a circle with the div tag by coding an empty div in the HTML, setting an equal height and width for it in the CSS, then a border-radius of 50%.
To really answer your question, though, I first have to answer a couple of other questions. Because, as you will see, it's all about context.
div
?I'll give you my opinion on the answers to those question, and then we can have a meaningful discussion on best-practices.
The point of HTML is to add context to your data. Text, all by itself, can be a very powerful thing. Since the invention of the printing press, it has served humanity very well as an extremely powerful communication tool. Take the following document for example:
My shopping list
Bread
Milk
Eggs
Bacon
Even with this simple text document, most people can dechiper the intent of the writer; its a shopping list. There is a heading, and a collection of list items that need to be purchased.
So whats the point of HTML then, if simple text documents are enough?
Fair question. If text is enough to communicate, then why do we need HTML?
The reader of the document attempts to parse the information they get. That process is embedded with a ton of cultural tricks and learned patterns that are used to reconstruct the original intent. It is trivial for most people with a basic understanding of english to determine the meaning of the document. However, as the complexity of the document increases (or the familiarity of the reader with the context decreases), then it becomes more and more difficult to parse correctly. Assumptions are made; context becomes unclear. Eventually, the reader's ability to accurately decode the message falls apart, and the message is indechiperable.
This is the space where HTML exists. It is desinged to wrap around data, providing context and meaning. So even if you (or the computer) are unable to process the actual information, you can understand the context in which it should be. For example, the same document with HTML:
<h1>My shopping list</h1>
<ul>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
<li>Bacon</li>
</ul>
Now, even if we weren't able to understand the actual data, we have a contextual backdrop to interpret the data. We have a heading and an unordered list with a collection of list items.
<h1>Xasdk bop boop</h1>
<ul>
<li>Zorch</li>
<li>Quach</li>
<li>Iach</li>
<li>Xeru</li>
</ul>
I have no idea what that means, but at least I know there is a heading and an unordered list. That is the way the browser sees your HTML document: some data, wrapped in context.
div
? How is it different from other HTML elements?HTML elements define context; they describe the content they wrap around. HTML shouldn't alter or change the meaning of the data, it simply augments it and defines relationships between the data: parent, child, sibling, ancestor... So a li
element describes a list item. An h1
element describes a heading. A table
element describes a table, and so on.
So, what is a div
then? Well, a div
is a block-level HTML element that has no context of its own. By itself, it doesn't mean anything (other than the fact that it is a block).
While most other HTML elements (with the exception of the span
element) have some kind of explicit context, the div
element does not. That is a huge difference. It's a blank box. It's a box that doesn't mean anything. When you put something in a 'div', you are saying that its in a box, but that box doesn't really mean much.
div
then?The div
tag provides a blank slate for you to define your own context. Back to our shopping list example: right now, there is a weak relationship between the unordered list and the heading. They are weakly associated siblings, they just happen to be next to each other, but nothing really binds them together as a unit. What we would really like to say is:
<grocery_list>
<h1>My shopping list</h1>
<ul>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
<li>Bacon</li>
</ul>
</grocery_list>
But we can't do that within the confines of the HTML spec. But what we can do is stick them in a 'box':
<div>
<h1>My shopping list</h1>
<ul>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
<li>Bacon</li>
</ul>
</div>
But, again, that box doesn't mean that much right now. What we really would like to do is give that box some context of our own. We want to invent our own element. Thats where the class
attribute comes into play. While HTML elements augment data, HTML attributes augment elements. We can say:
<div class="shopping_list">
<h1>My shopping list</h1>
<ul>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
<li>Bacon</li>
</ul>
</div>
So we are saying that our div
is really a shopping_list
. That shopping_list
has a heading, and an unordered list of items. HTML is supposed to make your data more clear, not less clear.
When you are writing CSS, you are leveraging your context (elements, classes, ids, and the relationship between elements) to define style.
So back to the shopping list example. I could write a style that said:
<style>
ul {
background-color: red;
}
</style>
But what am I really saying? I'm saying: "All unordered lists should have a background color of red". And the question is: Is that really what I mean? When writing CSS you should keep your structure in mind. Is it right to say all div
elements should look a particular way, or give only div
s a specific class? For example, I would aruge that this might be better:
div.shopping_list h1 { font-weight: bold; font-size: 2em; border-bottom: 1px solid black; }
div.shopping_list ul li {
margin-bottom: 1ex;
}
Here, I am saying that these elements, in this particular context should look this particular way.
So in your example, what does a div
with a class of test
really mean? What is the content? What context are you trying to clarify? That will tell you what your style selectors should look like.
For example:
<div class="shopping_list important">
<h1>My shopping list</h1>
<ul>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
<li>Bacon</li>
</ul>
</div>
<table class="budget">
<tbody>
<tr class="important">
<td>Account Balance</td><td>$0.00</td>
</tr>
</tbody>
</table>
Is a CSS selector of .important
a good idea? Is an "important shopping list" the same thing as an "important table row in a budget table?"
And only you can answer that, depending on what your data is and how you have decided to mark up that data.
There are a bunch of technical topics to get into about CSS specificty, like good practices for maintaining complex style sheets and complex associations between elements, but ultimately it all boils down to answering these questions:
Once you can answer those questions, everything else will start to fall into place.
You are correct. div.className
has a higher specificity than .className
. This means a couple things:
div.className
will override other css rules with less specificity, like just .otherClassName
It's exactly as you said style will be applied only when the class is applied to a div
. It will not be available for any other type of element.
It's best practice to do this when you have a class that is only ever applied to a div
.
Though if another class exists as .test
it will be overrun by any styling done within div.test
when applied to a div with test
class.
you can apply classes to multiple dom elements, so doing div.classname
would allow you to select only div elements with that class instead of all dom elements with that class
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With