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

    CSS - When to use .class p or class.p

    I know that in most cases, I could simply name every single tag I want to use or use span class to highlight changes, but I would like to get my head around this.

    I understand that if I am using a <div class="example1"> for example and only wanted to highlight the paragraphs in that div then I would use:-

    .example 1 p {.............} PLEASE CORRECT ME IF I AM WRONG

    However from references I have read, outside a <div> e.g. Say I have named a <p class="example2"> and wanted to target the <q> inside it, then I would use:-

    example2.q {..........} PLEASE CORRECT ME IF I AM WRONG

    If I am correct, what are the rules around this? Why is the div example different to the example outside the div?

    Thanks

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Code:
    .example1 p
    is correct.

    But in second scenario, it should be

    Code:
    p q { /*your code*/}
    if you want to target all <q> in <p> tags or

    Code:
    .example2 q { /*your code*/}
    If you want to target all <q> tags in tags having class .example2

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    60
    Thanks
    32
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vikram1vicky View Post
    Code:
    .example1 p
    is correct.

    But in second scenario, it should be

    Code:
    p q { /*your code*/}
    if you want to target all <q> in <p> tags or

    Code:
    .example2 q { /*your code*/}
    If you want to target all <q> tags in tags having class .example2

    So no matter if inside a <div> or outside, you use the input method of:-

    .classname element..... Sp

    .example p { ............ } for example????????

    If using <span> tag is this exactly the same?

    Thanks

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,623
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Quote Originally Posted by adamwestrop View Post
    However from references I have read, outside a <div> e.g. Say I have named a <p class="example2"> and wanted to target the <q> inside it, then I would use:-

    example2.q {..........}
    No, if you want to address a q element inside a paragraph with class “example2” then it must read .example2 q {…}. It’s the same for everything:
    Code:
    <ul class="list">
      <li>this will be styled</li>
    </ul>
    ----------
    .list li {…} /* will style list items inside any element with class “list”
    ==========
    <p class="text"><span>this text will be red</span></p>
    <div class="text">
      <span>this will also be red</span>
      <p>this text will be green</p>
    </div>
    ----------
    .text span {color: red;} /* will style spans inside elements with class “text” */
    .text p {color: green;} /* will style paragraphs inside elements with class “text” */
    ==========
    <h1 id="heading1"><strong></strong></h1>
    ----------
    #heading1 strong {…} /* will style all strong elements inside elements with ID “heading1”

  • Users who have thanked VIPStephan for this post:

    adamwestrop (08-13-2011)

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    60
    Thanks
    32
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    No, if you want to address a q element inside a paragraph with class “example2” then it must read .example2 q {…}. It’s the same for everything:
    Code:
    <ul class="list">
      <li>this will be styled</li>
    </ul>
    ----------
    .list li {…} /* will style list items inside any element with class “list”
    ==========
    <p class="text"><span>this text will be red</span></p>
    <div class="text">
      <span>this will also be red</span>
      <p>this text will be green</p>
    </div>
    ----------
    .text span {color: red;} /* will style spans inside elements with class “text” */
    .text p {color: green;} /* will style paragraphs inside elements with class “text” */
    ==========
    <h1 id="heading1"><strong></strong></h1>
    ----------
    #heading1 strong {…} /* will style all strong elements inside elements with ID “heading1”

    Such a simple answer, but you can't understand how that has helped me, ive read numerous texts saying in some places you put the tag before the . and the class name etc.

    Thanks man

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,623
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Quote Originally Posted by adamwestrop View Post
    ive read numerous texts saying in some places you put the tag before the . and the class name etc.
    Well, actually yes, you can do that (to add to the confusion). What I wrote above counts for any element with that specific class, so .example {…} could address paragraphs with that class or divs with that class or spans with that class since I didn’t specify the element type. Now, when I want to be more specific I’d write div.example {…} to say that only divisions that have this class will be styled:

    Code:
    div.example {…}
    ----------
    <h1 class="example">this text won’t be styled</h1>
    <div class="example">this text will be styled</div>
    <p class="example">this text won’t be styled</p>
    and likewise:

    Code:
    div.example span {…}
    ----------
    <h1 class="example"><span>this text won’t be styled</span></h1>
    <div class="example"><span>this text will be styled</span> and this won’t</div>
    <p class="example">any text in here <span>won’t be styled</span></p>
    So in a nutshell: With div.example {…} and p.example {…} or img.example {…} you can apply different styles to different element with the same class. Theoretically .example {…} is the same as writing *.example {…}, the asterisk meaning “all elements”.
    I hope you’re not too confused 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
    •