Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Thanked 0 Times in 0 Posts

    Unhappy What does this CSS code mean

    Hi i am being confused with this css code which i came across

    ul.errorlist { background-color: blue;............;}
    .errorlist li {background-color: red;...;}

    I get the first line which means that errorlist is the classname and ul is the tag
    so in order to use those properties i would so something like this
    <ul class="errorlist">This will have a background blue colour </ul>

    What i dont understand is the second statement
    .errorlist li {background-color: red;...;}

    What does that mean it doesnt have a tag in front of it and its just a .classname ? how would you go about using its properties ??? Any explaination would be appreciated...

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Thanked 206 Times in 205 Posts
    it means that any li that is a child of class="errorlist" will have a red bg applied to it... not only ul's , but ol's as well

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Halle (Saale), Germany
    Thanked 1,052 Times in 1,025 Posts
    A class (or ID) selector without element name/selector in front is basically just saying “look for any element with that class/ID and style it accordingly”. Writing .errorlist {…} is actually the same as writing *.errorlist {…}; the asterisk is a generic selector that adresses all elements.

    Consider this code:
    .errorlist {color: blue;}
    ul.errorlist {color: red;}
    The first line would mean any and all elements that have a class named “errorlist” would get blue text, e. g. <div class="errorlist">, <h1 class="errorlist">, <kbd class="errorlist">, <ul class="errorlist">, etc.

    Now, the second line will override the first one and apply a red color to all unordered lists that have that class but not to the other element types.

    And .errorlist li {…} would apply to any and all list items (<li>) that are (direct or indirect) children of any element that has this class. This could, for example, apply to:
    <div class="errorlist">
        <li>this text will be styled</li>
        <li>this text will also be styled</li>
      <p>this text won’t be styled</p>
    … but also to:
    <ul class="errorlist">
      <li>this text will be styled</li>
      <li>this text will also be styled</li>
    … and theoretically even to:
    <p class="errorlist">
      <li>this text will be styled</li>
      <li>this text will also be styled</li>
    … although that is invalid code, of course.

  • Users who have thanked VIPStephan for this post:

    zedan85 (08-11-2011)


    Posting Permissions

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