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 14 of 14

Thread: CSS Selectors

  1. #1
    Regular Coder trib4lmaniac's Avatar
    Join Date
    Feb 2004
    Location
    Cornwall, UK
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Selectors

    Is ok to use .class#id to select an element of type "class" with an id of "id"? If not, what is the right way?

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    .class element#id

    element refers to the element in which the id is applied.

    Code:
    .class div#id {
    text-transform: uppercase;
    }
    Is this what you wanted? I think it would be what you wanted since id's should only be applied once per page (no clue what happens if they are applied multiple times in a single page). If you wish to use it more than once in a given page, make it a class.

    Quote Originally Posted by trib4lmaniac
    .class#id
    CSS isn't that advanced yet.
    This is like using IC or XM to write numbers using Roman Numerals because that system of shorthand was never fully-developed.

  • #3
    Regular Coder trib4lmaniac's Avatar
    Join Date
    Feb 2004
    Location
    Cornwall, UK
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    .class div#id would surely select a div element with the id, "id" contained within a element of class, "class".

  • #4
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah..., so? Just change div to whatever element you are using.

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by gohankid77
    Yeah..., so? Just change div to whatever element you are using.
    I think he wants the opposite; i.e., selecting a class contained within an id.

    I don't see why "#id .class" wouldn't work... a question, though: since you're calling the class anyway, why would it matter what id it was in? I mean, I can see the concept, but I am imagining that if the classes were named appropriately it would be a moot issue...

  • #6
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Remember specificity. I think simply declaring your rules in this order:

    Code:
    .fooClass { ...}
    #fooID { ...}
    And having this markup:

    Code:
    <foo id="fooID" class="fooClass" />
    will give you what you want. I've thought of this as well, but I think CSS is in fact already advanced enough to handle it, just not that specific way of declaring it.

  • #7
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Naw, it's doable:

    div#id.class {
    // style for a div whose id is "id" and is part of the "class" class.
    }

  • #8
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm with Seth. (holy crap dude - twice in one day... you should put me on the payroll )
    If you're using classes correctly you shouldn't need to use that selector anyway...
    Let's have a look at the situation...
    -You have a class, which indicates that you wish to use this style on multiple elements.

    .class {declarations}

    -You also have a single element which belongs to that class which you want to style differently; so you've applied an id. Any changes you wish to make from the defined class could be made from the id selector.
    eg
    Code:
    .class {standard rules}
    element#id {variations on that rule}
    By putting the element's name before the #id selector you are ensuring that it has a higher specifity - ie; the rules contained within it will always over-ride the rules of the class, regardless of order.

    If you feel this isn't indicative of your situation, can you please post the (x)html
    Last edited by mindlessLemming; 09-26-2004 at 12:02 AM.

    I take no responsibility for the above nonsense.


    Left Justified

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    IDs are unique so generally any other selectors in a rule that ends with an ID are redundant.

    Having said that i usuall put them in anyway to make the code more readable, plus you have to consider specificity.

    Basically you should be ok to just use the ID and not the class in this instance.
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #10
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So what if you had a list of products, any of which could be on sale, and one of which is dubbed the most popular product? Surely you'd want to style it differently if it's both the most popular product AND on sale? Maybe you don't want your most popular product looking like any other on-sale item?

    How else would this be done without making a new id or class? I just think it'd have its uses somewhere...

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well yeah - if you have a bunch of elements with a dynamic class, and at some point you want to identify an element by ID, which must be [but may or not be] part of that class at the time - this would be way to do it.

    My instinct would be "element#id.class" but I can't see why either wouldn't work ... does it?
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #12
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    div.foo#bar doesn't work.

  • #13
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    AaronW is correct
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>CSS Selectors</title>
    		<style type="text/css">
    			#txt_id.txt_class	{
    				color:#f00;
    			}
    		</style>
    	</head>
    	<body>
    		<p id="txt_id" class="txt_class">
    			This text will recieve styling
    		</p>
    		<p class="txt_class">
    			This text will recieve no styling
    		</p>
    	</body>
    </html>

  • #14
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It doesn't work because IDREFs (ID references) takes precedence over CDATA (character data). Therefore, IDs must come before classes.

    *I almost sounded like I knew what I was talking about!*

    Feel free to expand on or reprimand this post.


  •  

    Posting Permissions

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