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

    CSS Specificy - Rookie question

    Hi there,

    I am new to this forum and I just starded to learn CSS. I am struggling with the following and would appreciate every help very much. I learned that the id selector is more specific than the tag selector. Therefore, the style applied to an id selector should overwrite the style of a tag selector. I tried that in the following code but it does not work. In the div bottom tag, only the p tag is overwritten by the div style. The h1 and body style is not affected. Why?? Thanks a lot!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    
    body {
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 100%;
    	color: #666;
    }
    h1 {
    	font-family: Tahoma, Geneva, sans-serif;
    	font-size: 1.2em;
    	color: #600;
    }
    p {
    	font-size: 0.9em;
    	font-family: "Courier New", Courier, monospace;
    }
    
    #bottom {
    	font-family: Tahoma, Geneva, sans-serif;
    	color: #FFF;
    	background-color: #999;
    }
    -->
    </style>
    </head>
    <body>
    
    <h1>This is an H1 outside of the div bottom tag. Therefore, the h1 style should apply.</h1>
    
    This is just text without a paragraph and outside of the div tag. Therefore, the body style should apply.
    <p>This is a paragraph outside of the div bottom tag. Therefore the p style should apply.</p>
    
    <div id="bottom"> 
      <h1>This is an H1 inside the div bottom tag. Therefore the div bottom style should apply.
      </h1>
      
      This is just text without a paragraph but in the div tag. Therefore, the div bottom style should apply.
      
      <p>This is a paragraph inside the div bottom tag. Therefore, the div bottom style should apply. Apparently, only the p tag inside the div tag is overwritten by the div tag. I thought the div tag is always more specific than a p h1 or body tag. </p>
      </div>
    
    </body>
    </html>

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Does this help at all.

    I am not too sure myself about specificity. I've have not used code with much complexity.
    I don't often nest.

    Frank

    This is a useful source of info.

    Use the search facility. (Single words work best.)
    Last edited by effpeetee; 06-25-2010 at 08:50 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    speakerman (06-26-2010)

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Therefore, the style applied to an id selector should overwrite the style of a tag selector.
    That should be correct if the id attribute is applied on the same tag. Here, in your case the tag selector is more specific than the id selector of its parent. Now, if you need to alter the h1 within that div, you may use a more specific selector like #bottom h1{color:#FFF;}
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Major Payne (06-26-2010)

  • #4
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks a lot for the answers but I still didn't get it completely. I know now how to change it but I don't understand why.

    In my understanding, the id attributes are applied to the h1 tag because the h1 tag is inside the div container with the id bottom.

    And why is here the tag selector more specific than the id selector? The h1 style applies to every h1 tag on every page but the id selector style only to that div tag with the id bottom. So the latter is more specific in my opinion ...

    Sorry I'm maybe a bit slow today ...

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    And why is here the tag selector more specific than the id selector? The h1 style applies to every h1 tag on every page but the id selector style only to that div tag with the id bottom. So the latter is more specific in my opinion ...
    It's like, if there's an id selector and a tag selector, "targeting the same element", then the id selector will get high priority. Check the following example.
    Code:
    h1{
    color:blue;
    }
    #header{
    color:red;
    }
    span{
    color:green;
    }
    Code:
    <h1>Heading 1</h1>
    <h1 id="header">Heading 1 <span>Span</span></h1>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • The Following 2 Users Say Thank You to abduraooft For This Useful Post:

    Major Payne (06-26-2010), speakerman (06-26-2010)

  • #6
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks! I got it now.


  •  

    Posting Permissions

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