Is it necessary to put div infront of the Class name in the CSS?

HTML & CSS
1

Some codes I see them as div.class, and others are just .class with the .div omitted

.class
div.class

In what circumstance would div need/required to be infront of class?

div.playButtona {
  position: relative;
  width: 606px;
  height: 50px;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box; 
}

div.playButtona.active {
  background: #ffffff;
}

div.playButtona.active::before,
div.playButtona.active::after {
  content: "";
  position: absolute;
  width: 198px;
  height: 100%;
}

div.playButtona.active::before {
  left: 0;
  background-color: #00ffff;
}

div.playButtona.active::after {
  right: 0;
  background-color: #ff00ff;
}

div.linesa::before,
div.linesa::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

div.linesa::after {
  left: 399px;
}

svg.playa,
svg.pausea {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  cursor: pointer;
}

.hidea {
  display: none;
}

Without

div.
svg.

.playButtona {
  position: relative;
  width: 606px;
  height: 50px;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box; 
}

.playButtona.active {
  background: #ffffff;
}

.playButtona.active::before,
.playButtona.active::after {
  content: "";
  position: absolute;
  width: 198px;
  height: 100%;
}

.playButtona.active::before {
  left: 0;
  background-color: #00ffff;
}

.playButtona.active::after {
  right: 0;
  background-color: #ff00ff;
}

.linesa::before,
.linesa::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.linesa::after {
  left: 399px;
}

.playa,
.pausea {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  cursor: pointer;
}

.hidea {
  display: none;
}
2

You don’t need to to this, but there may be exceptions.

If you used the same class on different elements, but only wanted to target a div with that class.

<main>
   <div class="gargoyle">
      <p>Some content.</p>
   </div>
   <figure class="gargoyle">
      <img src="photo.jpg">
   </figure>
</main>

In this example using .gargoyle {...} would targer both the div and the figure.
Using div.gargoyle {...} would only target the div, it would not affect the figure with that class.

4 Likes
3

Use div.class only if you want to target EXCLUSIVELY DIV elements with the class of class.

.class alone will select ANY element with the class of class.

1 Like
4

Can you or someone show me an example using CSS div.element cause I’m still trying to fully understand this.

I still don’t quite understand this.

An example using div.class

5

With CSS you can select by id, class or element tag name. CSS also allows you to use more than one of those selectors in combination to target an element by excluding spaces.
For example:
‘.class1.class2’, ‘ul.class1’
The more of those you use in combination the more specificity it will add to the rule. So it can also be used to override other styles.
.class1.class2 will override the styles in .class1

6

I was asking for a working CSS code example showing the usage of div.class

7

Well you would just add any rule to it like

div.class1 {
background-color:blue;
}
8

What would the difference between doing that and this be?

.class1 {
background-color:blue;
}

What’s the visual difference in whether you put a div in front of it or not?

9

That was my first post :wink:
There is no visual difference just more specificity. The styles in .class1 will be overridden by the styles in div.class1
Edit:
There is documentation about it here https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

10

Suppose you want certain sections of your page to stand out, so you decide to add a background colour to those sections. You add a class and apply your style(s).

<div>
	<div class="special">
		<img src="images/pretty-picture.jpg" width="400" height="300" alt="A pretty picture">
	</div>
	
	<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. 
	</p>
	
	<p class="special">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. 
	</p>
	
	<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard. 
	</p>

</div>

.special {background-color: #ddeeff;}

So far, so good.

But now you want to add a border to the div containing the image. You can’t add the rule to the .special class, because then it would be applied to the paragraph with that class, too. You can’t simply style the div tag, because that would also add a border to the outer (container) div. So you need to write a rule which targets only a div with the class “special”.

div.special {border: 2px solid #0000FF;}

If you wanted to target the paragraph instead, the rule would be

p.special {border: 2px solid #0000FF;}
3 Likes
11

What’s the difference visually?

.special {
  border: 2px solid #0000FF;
}

.special {
  background-color: #ddeeff;
}

.special {
  border: 2px solid #0000FF;
}

.special {
  background-color: #ddeeff;
}

div.special {
  border: 2px solid #0000FF;
}

p.special {
  border: 2px solid #0000FF;
}
12

That’s already been answered.

13

So then essentially, div.element serves no purpose.

14

???

That makes no sense.

If you mean div.class, then yes, it serves a very specific purpose, as explained and demonstrated in post 10.

2 Likes
15

That’s a bad demo as you only have the special class on a div? Add the special class to a p tag also and perhaps another element and then see what the difference is.

At the risk of flogging the proverbial dead horse here’s another demo that may be simpler to explain the difference.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
div.special {
	background:red;
}
</style>
</head>

<body>
<div class="special">I have a red background</div>
<p class="special">I don't have a red background</p>
</body>
</html>

So when you say div.special then the special class only applies to elements that are divs. If you say .special then the rule will apply to any element with the special class.

In the end though it’s a confusing practice and its better to stick with just .special only. If you want a div to have a different styling then use a different class and create some better logic with semantic class names.

In the end the less specificity you have the easier it is to maintain so avoid prefixing tag names to your classes. If you have a class called .special but you apply a different style by prefixing div, p, or whatever tag then you are just making the css more complex to maintain.

4 Likes
16

For your own code it’s easy enough to add another class value to an element. eg.
<div class="special extraordinary supercalifragilisticexpialidocious">

The times I most often use selectors like div.special are when I’m writing JavaScript code that works with HTML that is not my own (i.e. user scripts, browser extensions) and it’s easy to be more specific that it is to have JavaScript add a class value. Because I write more JavaScript than I design pages I do tend to be over specific in my own code if I don’t catch myself doing it.

Overall, like much in web dev, I don’t think it makes much difference for small single use code. The problems of not following best practice become more obvious when the code gets larger and more complex / you want to reuse it.

17

To make it really simple and concise:-

No!*

<small>* In 99% of cases.</small>
1 Like
18

It is one way to enhance specificity.

Please take a formal basic course in HTML and CSS.

4 Likes
19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.