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 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    60
    Thanks
    32
    Thanked 0 Times in 0 Posts

    <div> ids and classes question

    I've got multiple questions relating to using the ids and classes tags, however these incorporate with css and if they differ when using the div tag.

    I understand outside a <div> tag, if I wanted to highlight a paragraph and assign it to a class then in the html I would use say <p class="example1"> and then in the CSS, I can use either .example 1 { or I can use p.example1 {


    However a text reference I have throws that into doubt when using the <div> tag.

    It then says to select differencing referencing this format:-

    div p {

    and

    .example 1 p (which seems background to the example in my first paragraph above).

    So which is right please????????????????
    ---------------------------------------------------------
    On a separate note, can I name elements inside a <div> as well? So say my <div class="example2"> then say I want my <h1 class="h1class"> can I do this???

    If this works, I then assume in the CSS, I would reference the properties for .example2 and then reference properties for .h1class and even though for instance I could of nominated font color etc in .example2, if I nominate font color in .h1class this will take priority as I have named the properties in my CSS file subsequent to .example2 ???

    Thanks a bunch!

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by adamwestrop View Post
    I've got multiple questions relating to using the ids and classes tags, however these incorporate with css and if they differ when using the div tag.

    I understand outside a <div> tag, if I wanted to highlight a paragraph and assign it to a class then in the html I would use say <p class="example1"> and then in the CSS, I can use either .example 1 { or I can use p.example1 {


    However a text reference I have throws that into doubt when using the <div> tag.

    It then says to select differencing referencing this format:-

    div p {

    and

    .example 1 p (which seems background to the example in my first paragraph above).

    So which is right please????????????????
    ---------------------------------------------------------
    On a separate note, can I name elements inside a <div> as well? So say my <div class="example2"> then say I want my <h1 class="h1class"> can I do this???

    If this works, I then assume in the CSS, I would reference the properties for .example2 and then reference properties for .h1class and even though for instance I could of nominated font color etc in .example2, if I nominate font color in .h1class this will take priority as I have named the properties in my CSS file subsequent to .example2 ???

    Thanks a bunch!


    If I am right, are you asking difference between


    div p {

    and

    .example 1 p (which seems background to the example in my first paragraph above).
    ???

  • #3
    Regular Coder
    Join Date
    Oct 2010
    Location
    San Antonio Tx
    Posts
    251
    Thanks
    12
    Thanked 11 Times in 11 Posts
    If its outside a div you dont need p.example1 all you would need is example 1

    so for example you want the paragraph to be red

    Code:
    <p class="red">text that you want red</p>
    your css would be like this

    Code:
    .red{color:red;}
    inside a div you have to tell css you want to target that div so it would be this

    Code:
    <div class="example1"><p>text you want red</p></div>
    and your css would be like this

    PHP Code:
    .example1 p{color:red;} 
    so your telling css to style your paragraph tags in div class example1 to have a font color of red

    on your second part yes you can

  • Users who have thanked NoeG for this post:

    adamwestrop (08-10-2011)

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,897
    Thanks
    46
    Thanked 202 Times in 201 Posts
    so to tackle the first set of questions...

    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>
        <title></title>
    <style type="text/css">
    .example_one p{background:blue;}
    p .example_one{background:orange;}
    .example_two p{background:red;}
    p .example_two{background:yellow;}
    </style>
    
    </head>
    
    <body>
    <div style="width:300px;">
    <p>
    <span class="example_one"> example one (p.example_one) </span> <br/>
    <span class="example_two"> example two (p.example_two) </span>
    <span> inner span, not example_one or _two and hence no effect </span>
    </p>
    
    <div class="example_one">
    <p> example one (.example_one p) </p>
    <span> inner span not effected </span>
    </div>
    <div class="example_two">
    <p> example two (.example_two p) </p>
    <span> inner span not effected </span>
    </div>
    </body>
    </html>
    As you can see reading through...
    p .example_one {} will target anything within a p that has class example_one assigned... in the second section you have .example_one p which will make all p's targeted within example_one class... note the spans within the example_ 's that are not affected by the targeting bc they are <span>'s and not <p>'s...
    does this help at all?
    just different ways of targeting
    Attached Thumbnails Attached Thumbnails &lt;div&gt; ids and classes question-test.png  

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

  • Users who have thanked alykins for this post:

    adamwestrop (08-10-2011)

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    60
    Thanks
    32
    Thanked 0 Times in 0 Posts
    Wow, thanks for all the replies and help guys....

    (1)

    OK, so lets say I have no <div> tags.

    And I have say 4 or 5 paragraphs and I multiple other inline and block elements, lets say I have named <p class="example1"> but also I have a <blockquote class="example1">

    Then in the CSS, I only want to target the paragraph to have the colour as red.

    So I would use p.example1 {color: red; }

    Am I right??

    --------------
    (2)

    However with the inclusion of a <div class="divexample">

    And I wanted to target solely all the paragraphs in divexample (because I have a lot of other elements in it too), then in the CSS I would use:-

    .diveexample p {color: red; }
    --------------
    (3)

    If I wanted to then name further elements in the divexample for instance having a bespoke paragraph in the divexample, I assume I would be best served giving the paragraph a unique class reference to then highlight it in the css?
    ---------------
    (4)

    If I was using a <p id="para1"> in the main copy, could I then in the <div> use another <p id-"para2"> ????? I know that outside the <div> that only one 'id' can be used per element.

    THANKS IN ADVANCE FOR YOUR HELP.

  • #6
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    no matter where you are, your ID's have to all be different.

  • #7
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    (1)

    OK, so lets say I have no <div> tags.

    And I have say 4 or 5 paragraphs and I multiple other inline and block elements, lets say I have named <p class="example1"> but also I have a <blockquote class="example1">

    Then in the CSS, I only want to target the paragraph to have the colour as red.

    So I would use p.example1 {color: red; }

    Am I right??
    You are correct. the style rule basically says "for any paragraph that has a class of example1, make the color red."

    --------------
    (2)

    However with the inclusion of a <div class="divexample">

    And I wanted to target solely all the paragraphs in divexample (because I have a lot of other elements in it too), then in the CSS I would use:-

    .diveexample p {color: red; }
    That is also correct.
    --------------
    (3)

    If I wanted to then name further elements in the divexample for instance having a bespoke paragraph in the divexample, I assume I would be best served giving the paragraph a unique class reference to then highlight it in the css?
    yup. Classes and ID's help you single out certain elements from others in HTML.

  • Users who have thanked resdog for this post:

    adamwestrop (08-10-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
    •