Whats the difference between .some_class{} and *.some_class{}.
Does it mean that the class is applied only on tags which are inside another tag or is there no difference at all?
There is no difference- see here
The universal selector, written "*", matches the name of any element type. It matches any single element in the document tree.
If the universal selector is not the only component of a simple selector, the "*" may be omitted. For example:
*[lang=fr] and [lang=fr] are equivalent.
*.warning and .warning are equivalent.
*#myid and #myid are equivalent.
There is no difference between them at all. If you don't specify an element type, like div or p, then whether you have * or not doesn't matter. Even if you leave it out, it's implied that you want to match any element so long as it has the class some_class. From the spec:
If a universal selector represented by * (i.e. without a namespace prefix) is not the only component of a sequence of simple selectors selectors or is immediately followed by a pseudo-element, then the * may be omitted and the universal selector's presence implied.
Examples:
*[hreflang|=en] and [hreflang|=en] are equivalent,
*.warning and .warning are equivalent,
*#myid and #myid are equivalent.
What you're describing in terms of elements being inside other elements only applies when * is separated from the class by a space, e.g. * .some_class. That would match an element with the class some_class only if it's inside another element (basically this means it will never match the root element).
And taking the above explanation about * being implied, this would make the selector with the space also equivalent to * *.some_class. Here you can see that two universal selectors are in use, separated by a combinator. The second one just happens to be optional because it's already qualified by the class selector (the first one is not optional because it exists on its own).
Assuming that before the class goes the id (#id.class):
there is not any difference between putting astherisc or not, because the asterisc means that the CSS will be applied to any id with this class, that is the same that putting the class withouth astherisc:
// This style will be applied to anybody that has the attribute class="my_class"
.my_class{
}
// This class will be applied to anybody to any id that also has the attribute class="my_class"
*.my_class{
}
Hope it helps!
Related
The universal selector asterisk (*) is unique in that it matches a single element of any type.
So if I have different elements within a div and I want to select them all with one selector, I can either add a class to all the inner elements (something like .parent .class {}) or I can use the universal selector (.parent * {})
Then I saw the spec for the :lang pseudo element (particularly the end):
Note the difference between [lang|=xx] and :lang(xx). In this HTML
example, only the BODY matches [lang|=fr] (because it has a LANG
attribute) but both the BODY and the P match :lang(fr) (because both
are in French).
<body lang=fr>
<p>Je suis Français.</p>
</body>
Which means that all elements within an element targeted by :lang selector are also targeted. (Wow!)
So let's say I wanted to add a border to all the elements within a div - instead of the selector div * {} I could theoretically use :lang
Here's a demo
As far as I can tell, the only difference is that the :lang selector selects the parent as well as all the children (and of course there's the technical difference the :lang has greater specificity)....however
if the :lang selector was applied in a semantic way that it included the whole document - with the lang attribute on the html element - I don't think that the above difference would matter.
So basically my question is:
Assuming that my html element has the attribute lang="en":
Can I replace code which uses the universal selector such like:
* { box-sizing: border-box; }
with:
:lang(en) {
box-sizing: border-box;
}
The code seems to work (DEMO), and it seems to be semantic as well, but I'm wondering if there are certain reasons/cons to the above technique.
Can the Universal selector * be replaced by :lang?
No, because you cannot write a selector using :lang() that is guaranteed to match all elements unless you assume all elements in the document will always be in the same language.1
If you're going to assume that all elements are in the same language, then using the :lang() pseudo is pretty pointless, since the whole point of that pseudo-class is to be able to distinguish parts of the document that differ in their content language.
Also note that the compound selector :lang(en) (consisting of just that one simple selector) is equivalent to *:lang(en). It is essentially the * selector with an additional qualification of a pseudo-class. You are not avoiding the use * by replacing it with :lang().
1 Selectors 4 allows a selector like :lang('*') to be written that matches elements in any language (which, again, is pointless if you don't care what language an element is in!), but this assumes the document even has content language semantics built into it. It is not clear if :lang() will work at all in a document lacking such semantics.
What CSS selector is the first part in square brackets?
[ui-view].ng-enter-active {}
It is not an attribute selector that would be this right?
ui-view[content] {}
It is indeed an attribute selector. An attribute selector and a class selector are both simple selectors, and simple selectors in a sequence may be arranged in any order, with the exception that a type or universal selector, if present, must come first.
This means [ui-view].ng-enter-active and .ng-enter-active[ui-view] are both valid and equivalent, matching an element that has a class "ng-enter-active" as well as an attribute named "ui-view". The former seems strange at first only because you rarely see attribute selectors appearing first in a simple selector sequence.
Your second example, ui-view[content], contains a type selector, ui-view. Because of this, unlike your first example, it cannot be rewritten as [content]ui-view, since, as mentioned, type selectors must come first.
That is an attribute selector. It would select an element that has both a ui-view attribute as well as the class ng-enter-active. That attribute selector doesn't care about the actual value of the attribute. So for example, it would correctly select the following:
<div ui-view class="ng-enter-active"></div>
as well as:
<div ui-view="valueDoesntMatter" class="ng-enter-active"></div>
It's attribute selector, so:
The first one
[ui-view].ng-enter-active
means element with class ng-enter-active and attribute ui-view, eg.
<div class="ng-enter-active" ui-view="abc">
<div class="ng-enter-active" ui-view> <!-- or with attribute without value -->
The second one,
ui-view[content]
means element ui-view (you probably forgot dot, class="ui-view") with attribute content
<ui-view content="abc">
OR probably, if you forgot . in selector
<div class="ui-view" content="whatever">
See more about attribute selector: http://quirksmode.org/css/selectors/selector_attribute.html
I read corresponding part of http://www.w3.org/TR/CSS21/selector.html#class-html but can't find clear note that space between dot-class and tag change meaning. According to spec tag.clazz is equivalent to tag[class~="clazz"], and I expect that tag .clazz is equivalent to tag *.clazz. Is that true?
I expect that tag .class is equivalent to tag *.clazz. Is that true?
No. This is because class and clazz is not the same.
However, if you meant tag .clazz and tag *.clazz, then yes.
Explanation:
tag .clazz means any element with the class clazz somewhere
inside a tag tag.
tag *.clazz means any element of any tag name (*) with the class clazz somewhere inside a tag tag.
…which is effectively identical. The space essentially means “somewhere inside”.
5.2 - Selector syntax
A simple selector is either a type selector or universal
selector followed immediately by zero or more attribute
selectors, ID selectors, or pseudo-classes, in any
order. The simple selector matches if all of its components match.
Note: the terminology used here in CSS 2.1 is different from what
is used in CSS3.
A selector is a chain of one or more simple selectors separated by
combinators. Combinators are: white space, ">", and "+". White space
may appear between a combinator and the simple selectors around it.
So a space between a type selector and a class selector is a descendant combinator.
I am looking into doing some emails with html and css and been looking at the source code of some emails and i came across this decloration of the css in the head of a few emails.
*[class].tdwrap{display: inline-block !important;}
*[class].vspacer{ margin-left: 50px; }
I know that * usually means "all" but i have never seen the [class] part before and cant find a articles about it by doing several google searches.
Any ideas on what that means?
This was taken from the the source of an AppleMail email, maybe it is and AppleMail thing only?
[class] is an attribute selector and when it's preceeded by the universal selector (*) it selects any element that has a class attribute set on it, irregardless of what the attribute value may be.
Learn a bit more about selectors from the spec: http://www.w3.org/TR/CSS2/selector.html
This is the attribute selector. It selects any element that has this attribute (regardless of its value).
The [class] selector matches any element with the class attribute set (to any value). It's a standard CSS attribute selector, as defined in CSS2.1. I don't think it does anything here, since the .tdwrap and .vspacer require class attributes already.
The selectors could be replaced with just their class selectors.
I want to apply a CSS rule to any element whose one of the classes matches specified prefix.
E.g. I want a rule that will apply to div that has class that starts with status- (A and C, but not B in following snippet):
<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>
Some sort of combination of:
div[class|=status] and div[class~=status-]
Is it doable under CSS 2.1? Is it doable under any CSS spec?
Note: I do know I can use jQuery to emulate that.
It's not doable with CSS2.1, but it is possible with CSS3 attribute substring-matching selectors (which are supported in IE7+):
div[class^="status-"], div[class*=" status-"]
Notice the space character in the second attribute selector. This picks up div elements whose class attribute meets either of these conditions:
[class^="status-"] — starts with "status-"
[class*=" status-"] — contains the substring "status-" occurring directly after a space character. Class names are separated by whitespace per the HTML spec, hence the significant space character. This checks any other classes after the first if multiple classes are specified, and adds a bonus of checking the first class in case the attribute value is space-padded (which can happen with some applications that output class attributes dynamically).
Naturally, this also works in jQuery, as demonstrated here.
The reason you need to combine two attribute selectors as described above is because an attribute selector such as [class*="status-"] will match the following element, which may be undesirable:
<div id='D' class='foo-class foo-status-bar bar-class'></div>
If you can ensure that such a scenario will never happen, then you are free to use such a selector for the sake of simplicity. However, the combination above is much more robust.
If you have control over the HTML source or the application generating the markup, it may be simpler to just make the status- prefix its own status class instead as Gumbo suggests.
CSS Attribute selectors will allow you to check attributes for a string. (in this case - a class-name)
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
(looks like it's actually at 'recommendation' status for 2.1 and 3)
Here's an outline of how I *think it works:
[ ] : is the container for complex selectors if you will...
class : 'class' is the attribute you are looking at in this case.
* : modifier(if any): in this case - "wildcard" indicates you're looking for ANY match.
test- : the value (assuming there is one) of the attribute - that contains the string "test-" (which could be anything)
So, for example:
[class*='test-'] {
color: red;
}
You could be more specific if you have good reason, with the element too
ul[class*='test-'] > li { ... }
I've tried to find edge cases, but I see no need to use a combination of ^ and * - as * gets everything...
example: http://codepen.io/sheriffderek/pen/MaaBwp
http://caniuse.com/#feat=css-sel2
Everything above IE6 will happily obey. : )
note that:
[class] { ... }
Will select anything with a class...
This is not possible with CSS selectors. But you could use two classes instead of one, e.g. status and important instead of status-important.
You can't do this no. There is one attribute selector that matches exactly or partial until a - sign, but it wouldn't work here because you have multiple attributes. If the class name you are looking for would always be first, you could do this:
<html>
<head>
<title>Test Page</title>
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
<div id='A' class='status-important bar-class'>A</div>
<div id='B' class='bar-class'>B</div>
<div id='C' class='status-low-priority bar-class'>C</div>
</body>
</html>
Note that this is just to point out which CSS attribute selector is the closest, it is not recommended to assume class names will always be in front since javascript could manipulate the attribute.