February 13th, 2013, 04:40 PM
-
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 04:49 PM.
Reason: Correct title
February 13th, 2013, 04:58 PM
-
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, 05:12 PM
-
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, 05:57 PM
-
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
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, 06:10 PM
-
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.