Class and ID in one CSS statement?

[AmenKa]

Can one specify styles to apply to an ID, but only if that ID is also a given class?

Ex:

.class & #id {
myproperty:value;
myproperty:value;
}

thanks for any help!

[rangana]

ID should be unique in every page. So, why not just use that ID instead? It's confusing. Could you show your markup.

Anyway:


<style type="text/css">
.test#content{
border:1px solid red;
}
</style>
<div id="content" class="test">
Dummy
</div>

[boogyman]

<div class="testClass">
<p id="testId">something</p>
</div>




.testClass > #testId {
property:value;
}


what will force the styles to only apply to the #id if, this id is contained within some class.



ID should be unique in every page. So, why not just use that ID instead? It's confusing. Could you show your markup.


You are correct about one id per unique page, however, consider this. If I have two pages, both of which I have uniquely identified tag id. They both contain the same data, however in one of the instances, you wish to adjust the style to appropriately fit that page. This would be a circumstance, where you do not want to adjust every single id, but for this particular instance you want to have a "one-off" and you do not deem it fit to create a new unique id.

Now on that note, I am going to assume that this is probably not the case in this situation.

[jscheuer1]

Can one specify styles to apply to an ID, but only if that ID is also a given class?

Ex:

.class & #id {
myproperty:value;
myproperty:value;
}

thanks for any help!

To be certain of helping with this we would need to see an example of the markup you wish to apply this to, one example where the rules should apply, and one example where they should not.

However, it would generally be (as hinted at already) better to have style applied only to an id. Or if you really want this kind of dual styling and want to use it in more than one spot on a page, to use two classes rather than a class and an id.

Also @boogyman:

BTW this type of syntax:



.testClass > #testId {
property:value;
}

though valid, may not work in some browsers. For the markup that you suggested be used with it, this would work just as well and would not be a problem in any browser that has css support:


.testClass #testId {
property:value;
}

[AmenKa]

I doubt that I will use this at all, I was mainly curious...

If I do decide to use it, it would probably be because an element's ID is gathered from a table (So two IDs can be the same if you are assigning IDs from more than one table), and I would like there to make it unique compared to another element from the same table even though they share the class...

More likely if I were to use it, it would be to allow someone else to do that with my code... I like things to be consistent.

<style>
.class #id {
margin:10px;
}
</style>
<div class="class">
<a href="target" id="id">Link</a>
</div>

Would that apply the margin to the link? Or would it need to be...

<style>
.class #id {
margin:10px;
}
</style>
<div>
<a href="target" class="class" id="id">Link</a>
</div>

The way I read it, I think both ways would work?

[jscheuer1]

The first one would work. The second would not, unless you did it like so with no space:


<style type="text/css">
.class#id {
margin:10px;
}
</style>
<div>
<a href="target" class="class" id="id">Link</a>
</div>

The space between selectors indicates it applies to the second item when contained by the first. With no space it means that they are both the same item.

Note: I added the required type attribute out of habit.