Grow your CSS skills. Land your dream job.

IDS and Class

  • # June 16, 2013 at 12:45 am

    how much tags and classes a tAG can absorb ????

    # June 16, 2013 at 1:11 am

    Html elements can take on as many id and class attribute values as you’d like, so long as they’re enclosed in quotes and are separated by spaces. Below are two examples of an element with five id’s assigned to it and an element with five classes assigned to it. But again, an element can have as many id or class attribute values as you’d like.

    Some text.
    Some more text
    # June 16, 2013 at 1:13 am

    Here’s the bit of code to which I was referring.

    `

    Some text.

    `

    `

    Some more text

    `

    EDIT: Apparently, I’m not able to wrap my text using the code function on this site…

    # June 16, 2013 at 4:32 am

    i got what i want which is

    we can add differnt classes as the method above as you told thanx alot

    # June 16, 2013 at 5:10 am

    @posterity576, this is what you want to achieve.

    Text

    Text

    In order to get your code as you want it, hit your keyboard spacebar 4 times to give some indent, then write your codes.

    # June 16, 2013 at 5:11 am

    That’s actually one of the main principles of CSS. Using multiple classes to style elements.

    # June 16, 2013 at 5:54 am

    @CodeGraphics It seems like it fixed itself (see two comments above yours). Thanks, though, and that’s what I was trying to achieve.

    # June 16, 2013 at 6:31 am
    <div id="id1 id2 id3 id4">

    Hmph.. Is this valid?

    # June 16, 2013 at 6:42 am

    Html doesnt allow for multiple Id’s on the same element but can be achieved using xml

    Quoted from http://www.w3.org/TR/CSS2/selector.html#id-selectors

    > If an element has multiple ID attributes, all of them must be treated as IDs for that element for the purposes of the ID selector. Such a situation could be reached using mixtures of xml:id [XMLID], DOM3 Core [DOM-LEVEL-3-CORE], XML DTDs [XML10] and namespace-specific knowledge.

    # June 16, 2013 at 8:03 am

    Yes, it’s perfectly ok. Each id is unique. However, I wonder a situation that will require using more than one or two ids for a tag.

    # June 16, 2013 at 8:09 am

    > Yes, it’s perfectly ok.

    Actually, it’s not as @pixelgrid already mentioned.

    > The value must not contain any space characters. – [spec](http://www.w3.org/TR/html5/dom.html#the-id-attribute)

    You can compare this definition to that of the [class attribute](http://www.w3.org/TR/html5/dom.html#classes), where it’s explicitly states it can contain a set of space separated classes.

    # June 16, 2013 at 9:07 am

    @CodeGraphics: Even if it’s valid or whatnot, any element on a page should only have ONE id, and every id should only appear ONCE on a page.

    # June 16, 2013 at 3:52 pm

    @CrocoDillon, @Senff,

    Firstly, @CrocoDillon would be right that an id cannot have space-separated values. That was a mistake on my end when I was typing up a response to @Junni. Secondly, the faux-id attribute values I gave to the div with the class attribute are actually quite valid and are an excellent candidate for allowing an element with a class attribute assigned to it to take on the naming conventions of an id. In CSS, it would be styled like so:

    .#id1{}

    .#id2{}

    .#id3{}

    .#id4{}

    .#id5{}

    Of course, I didn’t actually use the octothorpe as a styling hook when I assigned the five id’s to the div with a class attribute, and so the above is really tangential. Nevertheless, assigning id’s as class attribute values is an excellent way of avoiding the use of id’s entirely, unless you’re using them as hooks for JavaScript or as fragment identifiers.

    Cheers!

    # June 16, 2013 at 5:16 pm

    Hashed classes: troll topic enabled. See http://csswizardry.com/2013/05/hashed-classes-in-css/.

    # June 16, 2013 at 6:49 pm

    Nice read Hugo :) (especially the conclusion)

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".