Is it possible to alter X amount of elements (h1, p, span...) only if they have a specific class? I'm looking for something like this:
(elem1, elem2, elem3, elem4).class {
/* do things here */
}
Previously I tried with parentheses, curly and square brackets, and curly seemed to work but a quick glance to Firefox's console inspector seemed to tell me it ignored eveything between the start and end of the brackets, and of course worked, but would also apply to a, say, div instead of p, span, hX.
I know that doing...
elem1.class, elem2.class, elem3.class, elem4.class {
/* do things here */
}
would work, but I was looking for a less verbose syntax, because I'm a lazy ass.
Sorry, but it's not possible with pure css.
There's just no syntax for it.
e1.class, e2.class, e3.class is as short as it gets.
Of course, there are workarounds.
There's an extension called sass
With sass you could write
e1, e2, e3 {
&:hover {
/* Some stuff */
}
}
There's also any which works like
:any(e1, e2, e3).class
But it's only supported in some very recent browsers like firefox and chrome beta (I think, but I could be wrong)
Some new browser supports :any (-webkit-/-moz-), e.g.
:any(elem1, elem2, elem3 ...).yourclass {
color: green;
}
A demo (tested on firefox only): http://jsbin.com/IZozOdo/1/
Futhetr information on MDN
Otherwise consider the opportunity to use a CSS preprocessor like someone else suggested before
I must be misinterpreting the question, because why wouldn't you just use a class selector without a tagname like:
.myclass {
...
}
That selector matches:
p.myclass, span.myclass, a.myclass, etc
Just leave the tag name off of the selector.
EDIT
As pointed out to me in the comment on this answer - if you don't want to include certain tagnames, then you either a) use the verbose syntax that you don't like or b) use another class name on the elements you do want to target (http://jsfiddle.net/Mm9HX/) - it's what CSS classes are for.
Related
I want to style code elements that are not inside a tags.
What is the best approach to accomplish this?
code:not(a code) doesn't seem to work at all, at least on Chrome, even though it seems like it should
I can't get it to work from the console either.
Are there any other css-only approaches I could use for this?
:not does not support combinator selectors.
If we're talking about its direct parent:
:not(a) > code
Otherwise there's no way to do this in CSS. You'll have to override it:
code {
/* some styles */
}
a code {
/* override previous styles */
}
Actually, you should be able to use your code 🤔, or you could use the wildcard character to select all elements to not be selected
code:not(a *) {
font-weight: bold;
}
Codepen
I want to have something like the following (like a || ):
[.pw-each-placecomment or .pw-each-usercomment] h2 { }
Is this possible?
Not with plain CSS right now. Firefox has introduced the non-standard :any(), but it's experimental and only in Firefox, Chrome and Safari. It may make it in as :matches(), so keep an eye on it.
If you don't use a CSS preprocessor, such as SASS, Stylus, LESS, etc, you're tough out of luck.
You'll have to list 'em both out.
.pw-each-placecomment h2,
.pw-each-usercomment h2 {
}
You could use the attribute selector.
The ^ (carat) symbol indicates the beginning of a string (here- the beginning of the class name):
div[class^="pw-each-"] h2 {
color: red;
}
FIDDLE
This would select any h2 element with an ancestor div with a class name that starts with "pw-each-"
So for example: pw-each-placecomment and pw-each-usercomment - would match... but
pw-other-other or other-pw-each-placecomment- wouldn't.
For more info about this selector (and selectors in general) - I recommend this article
I want to style code elements that are not inside a tags.
What is the best approach to accomplish this?
code:not(a code) doesn't seem to work at all, at least on Chrome, even though it seems like it should
I can't get it to work from the console either.
Are there any other css-only approaches I could use for this?
:not does not support combinator selectors.
If we're talking about its direct parent:
:not(a) > code
Otherwise there's no way to do this in CSS. You'll have to override it:
code {
/* some styles */
}
a code {
/* override previous styles */
}
Actually, you should be able to use your code 🤔, or you could use the wildcard character to select all elements to not be selected
code:not(a *) {
font-weight: bold;
}
Codepen
This question is similar to the one I asked here. I am cleaning up some files and I came across this in this css:
.something
{
height: 33px;
-height: 34px; /* does this do anything?? /
}
and
.something
{
_width: 150px; / does this do anything?? */
}
EDIT: Okay, so the _ (underscore) is a css hack for IE, which is fine, I'll just leave it, but what about the minus sign, does it do anything at all?
Also, we are not supporting anything below IE 7 anymore, so if anything is a hack for IE6 I can take it out.
Straight from the W3C CSS 2.1 Spec -
4.1.2.1 Vendor-specific extensions
In CSS, identifiers may begin with '-' (dash) or '_' (underscore). Keywords
and property names beginning with '-' or '_' are reserved for vendor-specific extensions.
However that said, using an underscore to prefix a CSS property is a well known CSS hack to apply that rule for rendering in IE 6.
Since a CSS identifier can start with a '-' (dash) and be valid, this can be used to quickly comment out parts of CSS during development. For example in the CSS below, none of the properties will be set for h1 and only margin will be set for h2.
-h1 { color:blue; margin:2em; }
h2 { -color:pink; margin:2em; } /* property "-color" not valid */
I'm not sure about the minus sign, but the underscore is a hack to have a rule ignored in IE < 6.
http://wellstyled.com/css-underscore-hack.html
This is a CSS hack, to trick some browsers to use them (or not use them).
This one is the Underscore Hack
Versions 6 and below of Internet
Explorer recognize properties with
this prefix (after discarding the
prefix). All other browsers ignore
such properties as invalid. Therefore,
a property that is preceded by an
underscore or a hyphen is applied
exclusively in Internet Explorer 6 and
below.
#elem {
width: [W3C Model Width];
_width: [BorderBox Model];
}
This hack uses invalid CSS[3] and
there are valid CSS directives to
accomplish a similar result. Thus some
people do not recommend using it. On
the other hand this hack does not
change the specificity of a selector
making maintenance and extension of a
CSS file easier.
CSS Hacks is one (not so elegant) technique of achieving same look and feel and across browsers.
It means the CSS property will be applied in IE 6 and below. It is a CSS hack.
A cleaner method of applying styles to different IEs is using conditional comments.
I was looking at a css file today and found the following rule set:
div.with-some-class {
display:block;
margin:0;
padding:2px 0 0 0;
*padding:1px 0 0 0;
font-size:11px;
font-weight:normal;
*line-height:13px;
color:#3D9AD0;
}
What does the star mean in *padding and *line-height?
Thanks.
This is the "star property hack" along the same lines as the "underscore hack." It includes junk before the property that IE ignores (the * works up to IE 7, the _ up to IE 6).
In CSS? Nothing; it is an error.
Due to bugs in some versions of Internet Explorer, they won't correctly ignore the invalid property name, so this is one way of providing CSS that is specific to those browsers.
Using conditional comments is clearer and safer though.
The asteriks character is a valid wildcard in CSS. Use of it alone means the following CSS properties will be used against all element nodes in the DOM. Example:
*{color:#000;}
The above property will be applied to all DOM elements, thereby defeating the natural cascading in CSS. It can only be overridden by specifically tageting DOM elements where that targeting begins a unique identifier reference. Example:
#uniqueValue div strong{color:#f00;}
The above property will override the wildcard and make the text of all strong elements that occur in a div inside an element with an id attribute value of "uniqueValue".
Using a universally applied wildcard, such as the first example, can be a quick and dirty method for writing a reset stylesheet. It is quick and dirty because granular definition of presentation after the wildcard will likely create an extremely bloated stylesheet. If you are going to use the wildcard I would suggest using it more specifically, such as:
* strong{color:#f00;}
The above example will make the text of all strong elements color red regardless of other CSS properties not specified with a unique identifier. This is considered much safer than using the "!important" declaration as that declaration is known to cause interference with natural functionality of the intended behaviors and is a maintanence nightmare.
The asteriks in your example are in the wrong place as they seem to occur inside the property declarations, the code that goes inside curly braces, and that will likely cause an error.
This is a hack for IE7.
If you write this:
.test {
z-index: 1;
*z-index: 2;
}
on all navigator which respect the W3C Standard <div class="test"></div> HTMLElement have a z-index: 1 but for IE7, this element have a z-index: 2.
This is not standard.
To achieve same thing with W3C Standard, follow this steps:
Add some Internet Explorer Conditional Comment (this is a simple HTML Comment for all other navigateur so, it's a standard way).
<!--[if IE 7]><html lang="fr" class="ie7"><![endif]-->
<!--[if gt IE 7]><!--><html lang="fr"><!--<![endif]-->
And use the previous rules like this:
.test {
z-index: 1;
}
.ie7 .test {
z-index: 2;
}