Is this possible?

HTML & CSS
1

I’m wondering if you can reference a class inside of a set of styles for a particular ID. I’m not sure what the syntax would look like, but it would be something like this.

.my-class {
     font-weight:bold;
}

#my-element {
     [some code to reference .my-class]
}
2

Mixins are great, though I prefer Sass to Less.

3

HEY…

if we think of what your are trying to accomplish rather than HOW you think it should be accomplished… this would get the same results:

.my-class, #my-element { rules that apply to both}
.my-class{font-weight:bold;}// this must come AFTER in the code

.my-class will then be essentially “based” on #my-element, with the following rules mixing in/ overriding any rules previously defined.

4

yes, something like the mixins is what I was thinking about.

5

What you are talking about is known as “Nested Rules”.

It is from the Less Css framework, but that is not CSS3 nor standard CSS.

It is a css extension that runs with ruby. Never used it though so I don’t know anything about it.

6

Thanks guys. I didn’t think that what I was hoping for was possible, but I thought there was a possibility CSS 3 supported it. I’m pretty decently versed in CSS and have used it as my only styling source in many sites. Thanks anyway.

7

You can’t do it quite in that way.

But before I give you the answer, I just want to clarify the question:

Do you want <div id=“my-element”>…</div> to have the same styling as <div class=“my-class”>…</div>?

If so, the easiest way is to jointly define the selectors, eg

.my-class, #my-element { ... }

where the comma means that the declaration applies to both the class and the ID separately. You can then have additional declarations for styles that are specific to either the class or the ID.

8

Hi,
If you are saying you want the styles for .my-class to change whenever that class is found in #my-element then yes it can be done with a simple descendant selector.

Something like this -


#element .class {
    width:500px;
    background:#FFF;
    font-weight:normal;
    color:red;
}

If this code below was an actual page I would be using a main wrapping div and declare the width and auto margins there.
But for the sake of an example I did not do that.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo Layout</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100&#37;/1.4 arial,helvetica,sans-serif;
}
.class {
    width:900px;
    margin:0 auto;
    padding:1px 0;
    background:yellow;
    font-weight:bold;
    color:black;
}
#element {
    width:900px;
    margin:0 auto;
    padding:1px 0;
    background:#CDF;
} 
#element .class {
    width:500px;
    background:#FFF;
    font-weight:normal;
    color:red;
}
</style>

</head>
<body>

<div class="class">
    <p>Lorem ipsum dolor sit amet consectetuer ipsum hac suscipit amet id. Phasellus ut nibh mauris non sagittis vel Sed In Nam nibh. Justo ut sapien habitasse id lobortis id a id elit Vivamus. Nibh metus justo consequat at Lorem pretium tempus morbi dui nulla. Nisl tortor egestas sapien euismod felis molestie ac a felis morbi. Urna pretium ipsum ut orci neque id at Vestibulum Curabitur Donec. Curabitur.</p>
</div>

<div id="element">
    <p>Lorem ipsum dolor sit amet consectetuer ipsum hac suscipit amet id. Phasellus ut nibh mauris non sagittis vel Sed In Nam nibh. Justo ut sapien habitasse id lobortis id a id elit Vivamus. Nibh metus justo consequat at Lorem pretium tempus morbi dui nulla. Nisl tortor egestas sapien euismod felis molestie ac a felis morbi. Urna pretium ipsum ut orci neque id at Vestibulum Curabitur Donec. Curabitur.</p>
    <div class="class">
        <p>Lorem ipsum dolor sit amet consectetuer ipsum hac suscipit amet id. Phasellus ut nibh mauris non sagittis vel Sed In Nam nibh. Justo ut sapien habitasse id lobortis id a id elit Vivamus. Nibh metus justo consequat at Lorem pretium tempus morbi dui nulla. Nisl tortor egestas sapien euismod felis molestie ac a felis morbi. Urna pretium ipsum ut orci neque id at Vestibulum Curabitur Donec. Curabitur.</p>
    </div>
</div>

</body>
</html>