[dokhebi]

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:

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

...

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

Would something like this

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

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

[rdoyle720]

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).

[dokhebi]

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?

[E-Oreo]

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:

.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.

[dokhebi]

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

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

then the div element can look like this

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

so I tried it to make sure and it works.

Thanks you everyone for the clarification.