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.
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.
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.
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.
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%/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>