SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    ID's and Classes

    Hi all,

    I have been reviewing CSS code, and I'd like to ask about some ID and class syntaxis.
    I have understood how to use ID's ans Classes individually, my question points when CSS sentences have more:
    Here some CSS sentences I'd like to understand:
    1.-
    p#ID

    2.-
    #ID p

    3.-
    #ID .class

    Thanks a lot!!

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Basic knowledge: ID are UNIQUE, and only be used ONCE in an HTML document. They hold a lot of specificity, and tend so one should take care when using an ID even if you KNOW it's used once ( in other words, you can make a class that you use only in once in the html element, and not have wight of the rules be so heavy, specificity wise. by contrast Classes can be used multiple times.

    As to your Qs

    1)p#ID this targets only a P tag WITH the ID , eg <p id="ID"> but not <div id="ID"> or <ul id="ID">. If you KNOW for certain that #ID will only be applied to a P tag or don't need the extra weight to the rule ( and you shouldn't, when using an ID!) then you could just simply use #ID. However your style sheet may apply sitewise and the ID may be used on a P on one page and a UL in another, which may be the reason why you are seeing this.

    note: you can similarly do: p.class

    2)#ID p targets all Ps that are DESCENDANTS ( inside of) the element with the id of "ID". <div id="ID"><p>

    3) Similar to the previous explanation, #ID .class targets all elements with class "class"that are DESCENDANTS ( inside of) the element with the id of "ID". <div id="ID"><ul class="class">

    hope that helps

  3. #3
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks a lot for your answer!! I will take a look to the theory related to descendants.

    One last question. What dooes this syntaxis mean?
    #ID li.class

    Does it target all descendants li elements within #ID with class "class"?
    <div id="ID"><li class="class">




    Thanks once again!!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Sir_Arcturua View Post
    Hi,

    Thanks a lot for your answer!! I will take a look to the theory related to descendants.

    One last question. What dooes this syntaxis mean?
    #ID li.class

    Does it target all descendants li elements within #ID with class "class"?
    <div id="ID"><li class="class">




    Thanks once again!!
    Yes that's correct

  5. #5
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot!!

    And can I also mix these syntaxis?

    I mean:
    1.- define a class "class"
    .class {...}

    2.- and then define specific features for li
    li.class {...}

    Then, when I use <p class="class">, applies .class definitions, and when I use <li class="class"> applies .class plus li.class definitions?

    What I am looking is to have a base definition and then add specific features for some tags.

    Thanks!!!

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Yup, CSS is about mixing and matching.
    Again, remember to keep track of your specificity. That is: .parent li.class{style1} .parent ul .class{style2;} ... you might figure that style1 will be applied but in reality the later one of the two rules will be applied, because they both have the same specificity. 10+1+10 (where ID=100s, classes=10, and tags=1).
    What I am looking is to have a base definition and then add specific features for some tags.
    yup
    and thats why that works
    since .class is LESS SPECIFIC than p.class. so in another words. All tags with the class of 'class' will have attributes from .class{} but only P with a class of class will ADDITIONALLY get p.class{)

  7. #7
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Great!!

    Let's say I want to have pictures in different pages with some slight changes like position (left or right) and width.
    Today, I have a class definition for each of them, even when most of the features are the same.
    According to what I have understood, I should now:
    1.- create a class with all common features
    2.- create one img.class for each picture including its particular features only, and not repeating all common features

    Having something like:
    <div id="ID">
    <p class="images">
    <img class="image1" src="../images/image1.jpg" width="100%">
    <img class="image2" src="../images/image2.jpg" width="100%">

    And so on.

    Is it correct?

    Thanks a lot!!!

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Yes, you got it. Also, you don't need "width=100% " in the IMG tag, you can put that on your CSS.

  9. #9
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot!!!!


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
  •