SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Hybrid View

  1. #1
    SitePoint Evangelist anjanesh's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Classes for specific elements

    Hi

    Is it not possible to define different classes for different elements ?

    Code:
        <style type="text/css">
        pre .code1
         {
            border:1px solid red;
            color:red;
         }
        span .code1 
         {
            border:1px solid blue;        
            color:blue;
         }
        </style>
    
    <pre class="code1">
    code snippet
    </pre>
    <span class="code1">code line</span>
    Anjanesh

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Yes, get rid of the space between the (pre .) and the (span .) in your css:
    Code CSS:
    pre.code1
         {
            border:1px solid red;
            color:red;
         }
        span.code1 
         {
            border:1px solid blue;        
            color:blue;
         }
    Hope it helps.

  3. #3
    SitePoint Evangelist anjanesh's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Damn ! Cant believe that that one extra space was so crucial. How does it get interpreted with the extra space anyway ?

    Thanks Johnny.
    Anjanesh

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by anjanesh View Post
    Damn ! Cant believe that that one extra space was so crucial. How does it get interpreted with the extra space anyway ?

    Thanks Johnny.
    I do not think it was interpreting it at all. Glad I was able to assist.

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by anjanesh View Post
    Damn ! Cant believe that that one extra space was so crucial. How does it get interpreted with the extra space anyway ?
    With the space there, it is interpreted as an undefined element with a class of "code1" inside a pre or span.

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by anjanesh View Post
    Damn ! Cant believe that that one extra space was so crucial. How does it get interpreted with the extra space anyway ?
    The space is a 'descendant combinator' in CSS, so pre .code1 means: any element with the class code1 which is a descendant of a pre element.

    It is actually pre *.code1, with an implicit universal selector.
    Birnam wood is come to Dunsinane

  7. #7
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Although it's working now, and an interesting use of the same class name, are you sure it's useful ? class + more code , contradicts the class re-use/or less code

    direct Tag use , often not practical
    pre{}

    span{}

    simple targeting from a container with a class code1, no additional mark-up in the HTML (or make use of existing ID's or classes )
    .code1 pre{}

    .code1 span{}

    simple class use, re-use, ads mark-up to the HTML
    <pre class="code1">

    <span class="code2">
    Last edited by all4nerds; Sep 2, 2007 at 03:24.

  8. #8
    SitePoint Evangelist anjanesh's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But the same doesnt seem to hold for classes for classes ?

    Code CSS:
    .clsA
     {
     }
     
    .clsB
     {
     }
     
    .clsA.cls1 /* cls1 class specically for elements in the .clsA container */
     {
     }
     
    .clsB.cls1 /* cls1 class specically for elements in the .clsB container */
     {
     }
    Anjanesh

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by anjanesh View Post
    But the same doesnt seem to hold for classes for classes ?

    Code CSS:
    .clsA.cls1 /* cls1 class specically for elements in the .clsA container */
    No, this selects elements that have both clsA and cls1 in their class attributes. It's really
    Code CSS:
    *.clsA.cls1 {}
    /* or */
    *[class~="clsA"][class~="cls1"] {}

    If you want to target elements with the cls1 class nested inside an element with the clsA class, you have to include a descendant combinator (white space) between the class selectors:
    Code CSS:
    .clsA .cls1 {}
    /* which means */
    *.clsA *.cls1 {}
    /* or */
    *[class~="clsA"] *[class~="cls1"] {}
    Birnam wood is come to Dunsinane

  10. #10
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Read the answers, this is how it works

    <pre class="code1">

    <pre class="code1 x">

    <span class="code1 y">

  11. #11
    SitePoint Evangelist anjanesh's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was referring to nested elements.
    Code HTML4Strict:
    <div class="clsA">
    A Inner Content
        <div class="cls1">
        A1 Inner Content
        </div>
    </div>
     
    <div class="clsB">
    B Inner Content
        <div class="cls1">
        B1 Inner Content
        </div>
    </div>
    Anjanesh

  12. #12
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    simple, if nested no more no less, next time show your full code PLease, because a few full blasting idiots will sent you off in the wrong direction

    class="cls1"

    class="cls1"

    or
    .clsA div

    .clsB div

    gets
    .clsA div,.clsB div
    are you still with me ?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •