CODEWITHSUNDEEP
css
Tim S
Tim S

Reputation: 91

what is the correct way to select an element that has a specific id, and is part of a class

In my case I have a class="fusion-module rt-center" and a #modlgn-remember. How do I specify this to create a rule when #modlgn-remember is also class fusion-module rt-center?

I would think something like this, but it isn't working:

.fusion-module rt-center #modlgn-remember {
xxx:xx;
xxx:xx;
}

Upvotes: 0

Views: 81

Answers (3)

SDwarfs
SDwarfs

Reputation: 3239

Try this:

#modlbn-remember.fusion-module.rt-center {
   ...
}

Selects element with that id and both classes must be assigned.

If you like to select it, if at least one of them is assigned use:

#modlbn-remember.fusion-module,
#modlbn-remember.rt-center {
   ...
}

Upvotes: 0

Mattias Buelens
Mattias Buelens

Reputation: 20179

#modlgn-remember.fusion-module.rt-center { ... }

Spaces are for descendant selectors, so your original selector would select a #modlgn-remember element inside a rt-center element (missing dot here) which is inside a .fusion-module.

Also, consider rethinking your style rules. There can only be one element with ID modlgn-remember on the page, so it seems redundant to add class qualifiers to the rule.

Upvotes: 3

David Thomas
David Thomas

Reputation: 253496

You need to chain the various selectors together:

#modlgn-remember.fusion-module.rt-center

This searches for an element of id="modlgn-remember with a class of fusion-module and rt-center.

Spaces within a CSS selector implies a descendant element, so your original selector (.fusion-module rt-center #modlgn-remember) looks for an element of id="modlgn-remember" that's within a rt-centerelement, that's within an element of class="modlgn-remember".

Obviously, then, your original selector was unlikely to return the element you were looking for.

Remember, of course, that an id is unique within the document; therefore if you only want to get the element of that particular id you need only use the id. The only reason it makes sense to couple an id selector with a class-selector is to select that id only if it also has those classes. This is often useful in JavaScript, especially.

Upvotes: 2

Related Questions