Forum Moderators: not2easy
I have a quick general question. Lets say you have the following:
<div class="foo">
<span class="bar1">Example text 1</span>
<span>Example text 2</span>
</div>
And your css already has set styles for the many bar classes:
.bar1 {Some Style;}
.bar2 {Some Other Style;}
.bar3 {Some Other Style;}
etc...
But you want to ONLY address that non-classed span with contents "Example text 1" and do not want to have to style the span in general and then go manually reset the inherited value you just created.
Maybe a way to write span{style} that doesn't automatically propagate its style downward, or a way to write span.none or span.null ?
Thanks.
[w3.org...]
span {
/* set it here */
}
span[class] {
/* undo the damage */
}
.bar1 {
/* no need to undo */
}
.bar2 {
/* no need to undo */
}
Anyway, I've not tried it, so test it well with all browsers you can get your hands on.
span:not([class]) {
/* style it here */
}
Anybody got older versions of the standards compliant browsers for testing ?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
.important {
color:red;
}
span:not([class]) { /* CSS3 selector */
font-weight: bold;
}
</style>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js"
type="text/javascript"></script>
<![endif]-->
</head>
<body>
<p>
<span class="important">Am I red, but not bold</span>
<span>Am I bold</span>
</p>
</body>
</html>
The CSS validator will stumble over it though.
I do, however, really appreciate all of the research! I'll most definitely need to use that one day. :P
