The class attribute - can it work this way?

Question

2.00/5 (1 vote)

See more:

Hi! I have a question about class attribute in HTML. Let's say I have two different div elements. One is classed to "Example 1".

Now, I make another, but this time I don't give it a class. Then if I go to my linked CSS stylesheet and make a declaration for div elements without specifying the class, will it apply to my classed example1 element as well, or just the non-classed one?

What I have tried:

Nothing - Hypothetical question

Posted 12-Jun-20 9:44am

Member 14848624

Updated 12-Jun-20 9:59am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Afzaal Ahmad Zeeshan · Accepted Answer · 2020-06-12T10:00:00

No, the style application and precedence works and that takes over which styles are applied. The class-based styles are applied to your class-based element and any div styles that are not being overridden by the class styles. On the div that does not contain a class, only div styles are applied.

Also, in CSS, styles are applied from top to bottom. So, that is also where the styles can be overridden if they are valid in the precedence.

Please see this: Specificity - CSS: Cascading Style Sheets | MDN[^] and html - What is the order of precedence for CSS? - Stack Overflow[^]

Try this example fiddle that I created and play with it to learn how the styles are applied: Edit fiddle - JSFiddle - Code Playground[^]. Code is also shared here for other purposes.

HTML

<div class="styled">
Stylized with class content.
</div>
<div> <!--Non styled-->
Non-stylized content.
</div>

The CSS for this document is:

CSS

div {
  background: #cecece;
  font-weight: 600; /* BOLD */
}

.styled {
  background: #fff; /* Note this change! */
	color: red;
}

You can see, how different properties are applied from parent type and how they are overridden by specialized class or ID (not shown here) specifiers.