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.
Related
I wonder why element[class="name"] seems to used primarily in responsive emails instead of the usual .class?
Also, unless I'm missing something, if an element has multiple classes for eg.
<span class="class1 class2"></span> then neither of these appear to work:
element[class="class1"] { }
element[class="class2"] { }
.. why is that?
element[class="name"]
This is attribute equals selector and it will select the element with exact value. When you have multiple classes the exact match is not there and it does not select. Using attribute contains selector or other wild card selector would get the element. Following contains selector would get elements that have class1 as attribute class's value. It will get element with class name class123 as well.
element[class*="class1"]
I wonder why element[class="name"] seems to used primarily in
responsive emails instead of the usual .class?
This article probably talks about this.
Attribute selectors are being used to avoid an unusual glitch in
Yahoo! Mail, reference
It turns out that Yahoo! Mail ignores any styles that use attribute
selectors, meaning that you can use these in your #media queries to
ensure that Yahoo! Mail doesn’t override existing inline styles with
your #media -defined ones. Read more over here.
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.
Because of a bug in webkit browsers, you can't use attribute and :before/:after classes by default.
The fix doesn't seem to have any effect when using nth-last-of-type selector.
Here's what I'm doing:
.left[class^='col']:nth-last-of-type{
margin-right: 0 !important;
}
Just wanted to check and see if I'm not overlooking something simple.
Your :nth-last-of-type syntax is a bit off — it's either :last-of-type or functional :nth-last-of-type() with a formula an+b as an argument.
The pseudo-classes pertaining to "type" refer to the element type, represented by its tag name. It does not mean "the last element matching the rest of this selector".
If, for example, the last element matching .left[class^='col'] is not the last span element, then :last-of-type will not match. You'll have to modify your HTML to either segregate those span elements from others, or add a class to the last such element, before you can target it with a selector.
WebKit does not have any issues with pseudo-classes and attribute selectors that I'm aware of (or if it did, those issues have long been fixed). It does have issues with pseudo-elements, which I address here, where the fiddle link originates.
I'm applying :last-of-type to an element that should be as such. Check out the final div.info (that's the bottom information for each article) on http://www.elemovements.com. Why is it not working?
The :nth-of-type() family of pseudo-classes only look at an element's type, that is, its tag name. They do not filter by your class selector or any other selector.
Therefore, your statements:
I'm applying :last-of-type to an element that is clearly as such. Check out the final div.info
Are contradictory. There's a div.center after that, making that the last div, not your div.info.
You cannot currently use CSS selectors to find your last div.info; you'll have to resort to adding an extra class and/or using JavaScript.
You're having one of the most common misconceptions about CSS. CSS is not read left-to-right, but right to left!
Meaning, the browser will look for div.info:last-of-type, so browser will filter elements in the following order:
Last element of each type (tag name)
Has class of info
Is a div.
Your element does not satisfy these conditions in that order. It may be the last div with class of info, but no last element has a class of info
This 2 are the same:
div.info:last-of-type
div:last-of-type.info
The :last-of-type is hitting the div, not the .info, and the .info is limiting the found results to 0.
Another example:
.section.section-test:last-of-type
Would actually works like: .section:last-of-type.section-test
in some CSS code I found out this type of selector
div#someid
Is this formally correct?
If the answer to (1) is YES, what's the need for the div selector before the #someid, shouldn't the id be unique in a valid web page?
Thanks!
Yes it's correct.
It might be because it makes the selector more specific. The more specific a selector it is the higher priority it is.
It is fine.
The stylesheet might be reused between pages which have the id on different elements
The explicit type provides information for the maintainer about the element
It makes the selector more specific, e.g. to override #other div.
The answer is they are the same but using the div in front of #id is superfluous and removing it does no harm while leaving it in only takes up space. Some may feel it makes the markup more readable, however, since it identifies the type of element the id is associated with.
I did read, once, that placing the div in front of the id may cause the browser to search through all divs first while just using #id does not but I'd have to look up that reference.
From what I understand, CSS will rank selectors based on how specific the selector is, if two rules apply to the same element,
ie
#someId{
color: black;
}
.someClass{
color: green;
}
And you had this div:
<div id="someId" class="someClass">
Then which wins? (There are rules in place to govern this particular example, I believe the ID would win anyway).
But say you had these rules:
.someClass{
color: black;
}
div.someOtherClass{
color: green;
}
Then I the second rule would trump it, because it's more specific.
However as David pointed out, ID's are generally rated a lot higher, so ID will win a lot of the time.
So there are two reasons I can see for using element#id selector
I) It's to trump some convoluted rule, ie div#canvas>div>div#main>div:last-child>div
II) So you know what element it is referring to, ie if your div had and id of "postcodeContainer" and you were trying to find it in the html file, it might be harder because you have to look at every element (unless you used your IDE's search/find option), where as div#postcodeContainer you know you are looking for a div element.
div#someid - select a div with id someid
#someid - select any type of element with id someid
One reason for having the tag selector is that it assumes some basic CSS, like it's a block tag with zero margins/padding.