#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2011
    Posts
    23
    Rep 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 04:49 PM. Reason: Correct title
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    677
    Rep Power
    441
    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).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2011
    Posts
    23
    Rep 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?
  6. #4
  7. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,301
    Rep Power
    7170
    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
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2011
    Posts
    23
    Rep 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.

IMN logo majestic logo threadwatch logo seochat tools logo