CSS class naming convention

Dev Shed Forums Sponsor:

February 13th, 2013, 05:40 PM

dokhebi

Registered User

Join Date: Sep 2011

Posts: 23

Time spent in forums: 6 h 17 m 50 sec
Reputation Power: 0

CSS class naming rules

I'm teaching myself CSS and I started updating a test PHP page to use CSS. I have some style classes called div.div1, div.div2, etc and I want to know if this restricts the classes to the div elements.

My code look like this:

Code:

<style>
div.div1 { border-style: double; border-color: blue; }
</style>

...

<div class="div1"> ... </div>

Would something like this

Code:

<p class="div1">This is a test!</p>

generate an error from the parser or does it not matter?

Last edited by dokhebi : February 13th, 2013 at 05:49 PM. Reason: Correct title

February 13th, 2013, 05:58 PM

rdoyle720

Contributing User

Join Date: Dec 2003

Posts: 671

Time spent in forums: 2 Weeks 6 Days 19 h 5 m 12 sec
Reputation Power: 440

When you write div.div1 you're stating "a div element with a class of div1", so it would not apply to a p tag. If you want it to apply to any element, just write .div1 (or better yet, give it a name that describes what it is).

February 13th, 2013, 06:12 PM

dokhebi

Registered User

Join Date: Sep 2011

Posts: 23

Time spent in forums: 6 h 17 m 50 sec
Reputation Power: 0

Not what I asked. I understand that calling it div.div1 is intended to be for a div with style div1. What I want to know is will there be an error message if I try to use this class in another element. I went ahead and tried it and I did not get a warning/error message from my browser. I also checked the code at the Markup Validation Service and it didn't catch this either. So the question now becomes, is the naming rule just a note to the programmer so he/she won't mix up their classes?

February 13th, 2013, 06:57 PM

E-Oreo

Lost in code

Dev Shed God 7th Plane (8000 - 8499 posts)

Join Date: Dec 2004

Posts: 8,233

Folding Points: 945 Folding Title: Novice Folder

Time spent in forums: 2 Months 2 Days 20 h 11 m 10 sec
Reputation Power: 7170

Quote:

I understand that calling it div.div1 is intended to be for a div with style div1.

Calling it "div.div1" doesn't just mean that it's intended to be used for a div, it means that the browser will only apply the rules to divs. It is not an error to define multiple blocks for the same class. It is also not just a note to the programmer, since having the tag name there changes the functionality.

For example, doing something like this is common:

Code:

.error {
  color: red;
}

div.error {
  border: 1px solid red;
}

p.error {
  font-style: italic;
}

<div class="error"> will display with red text and a red border.
<p class="error"> will display with red italic text and no border.

Using a class in your HTML that has no applicable rules in CSS is also not an error.

__________________
PHP FAQ
How to program a basic, secure login system using PHP

Quote:

Originally Posted by Spad

Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around

February 13th, 2013, 07:10 PM

dokhebi

Registered User

Join Date: Sep 2011

Posts: 23

Time spent in forums: 6 h 17 m 50 sec
Reputation Power: 0

So it won't raise a red flag, it just won't do anything. That's good to know.

I also found out from looking at another thread that if you have this

Code:

<style>
#style1 { border-color: red; border-width: thin; border-style: double; }
</style>

then the div element can look like this

Code:

<div id="style1"> ... </div>

so I tried it to make sure and it works.

Thanks you everyone for the clarification.

CSS class naming convention

Developer Shed Advertisers and Affiliates