This question already has answers here:
Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
(3 answers)
Closed 7 years ago.
Somehow I am curious, why CSS create two ways for accessing attribute, I know for selector most of us use :hover, :visited, etc. But there are selectors that can be access using attribute selector, e.g: :disable, :readonly, etc.
Is there any benefit using selector instead of attr selector?
Thanks before :)
It is a little unclear exactly what you mean, but this Mozilla article might be informative:
Writing Efficient CSS (MDN)
It has a nice overview of the selector types, when they are useful, and general performance of the selector.
Note that this article is way out of date, but in general selectors based on ID are very efficient and ones based on attributes are less efficient (though many would argue that worrying about efficiency of your css selectors is quite a premature optimization).
But in general, there are different types of selectors for different situations, depending on the structure of your page.
Also, :hover and :visited aren't attribute selectors, they are "pseudo-class" selectors.
:hover would apply to most elements, :visited would only apply to hyperlinks, :readonly would only apply to input boxes...
In CSS terms, an "attribute selector" is one that would select elements based on an HTML attribute. For example this attribute selector would match this element:
<input type="text" name="some-data" />
[type="text"] {
...
}
Related
One of CSS lint rules is: "It's better to not use IDs in selectors".
So, what should we use instead of IDs to point to a unique element?
For example, say I have dozens of elements that have a class named my-class, and I want only one of them to have a special CSS property. What can I do?
CSS-lint should be 'fixed' or rather updated to modern standard because its based on more than 10 year old code base where support for IE6 and IE7 where still preferable.
Nowadays everyone should know ID's are the fastest css selectors followed by Classes, Dom tags, adjacent siblings etc. And that CSS reads from right to left. So the shortest selector is the fastest. Since #ID is the fastest selector and #ID (should be) unique its ridicule to not use the #id as selector in CSS.
give them another class for example:
<div class="myClass special"></div>
.myClass.special{
color: red;
}
You could add an additional class to the element and specify it in your css instead of ids. ID selectors have a higher specificity than attribute selectors but using ids in css isn't recommended and can't be reused. CSS classes can do everything IDs can.
This question already has answers here:
What's the difference between html[lang="en"] and html:lang(en) in CSS?
(4 answers)
Closed 6 years ago.
W3C is introducing a new pseudo-class for direction detection in Selectors 4. I am wondering what is the difference between that and a normal attribute selector:
CSS2 - attribute selector
E[dir="rtl"] { ... }
Selectors 4 - dir pseudo-class
E:dir(rtl) { ... }
Is there a specific reason for creating a new pseudo-class for that? Are these selectors identical or do they behave differently? Are there any performance or specificity implications?
Is there a specific reason for creating a new pseudo-class for that?
The same reason the :lang() pseudo-class was introduced alongside attribute selectors in CSS2.1 See What's the difference between html[lang="en"] and html:lang(en) in CSS?
Are these selectors identical or do they behave differently?
See my answer to the linked question. Here's the relevant quotation from Selectors 4 for the sake of completeness:
The difference between :dir(C) and ''[dir=C]'' is that ''[dir=C]'' only performs a comparison against a given attribute on the element, while the :dir(C) pseudo-class uses the UAs knowledge of the document’s semantics to perform the comparison. For example, in HTML, the directionality of an element inherits so that a child without a dir attribute will have the same directionality as its closest ancestor with a valid dir attribute. As another example, in HTML, an element that matches ''[dir=auto]'' will match either :dir(ltr) or :dir(rtl) depending on the resolved directionality of the elements as determined by its contents. [HTML5]
To drive the point home on the similarities between :dir() and :lang(), if you look closely the first sentence is in fact a word-for-word copy of the same paragraph in the section describing :lang().
Much of the rest of the text for :lang() is new, however, because along with :dir(), Selectors 4 also introduces enhanced functionality for :lang().
Are there any performance or specificity implications?
Since the answer to your previous question is that they behave differently, performance is irrelevant.
No specificity implications because pseudo-classes and attribute selectors are equally specific.
1 It's not clear to me why it took almost 15 years for :dir() to be added to Selectors, but there you go.
According to MDN, some subtle differences exist:
The :dir CSS pseudo-class matches elements based on the directionality
of the text contained in it. In HTML, the direction is determined by
the dir attribute. For other document types there may be other
document methods for determining the language.
Note that the usage of the pseudo-class :dir() is not equivalent of
using the [dir=…] attribute selectors. The latter matches a value of
the dir and doesn't match when no attribute is set, even if in that
case the element inherits the value of its parent; similarly [dir=rtl]
or [dir=ltr] won't match the auto value that can be used on the dir
attribute. In the opposite, :dir() will match the value calculated by
the UA, being inherited or the auto value.
Also :dir() considers only the semantic value of the directionality,
the one defined in the document, most of the time in HTML. It won't
consider styling directionality, the one set by CSS properties like
direction which are purely stylistic.
I have some questions on the capabilities of CSS 2 and CSS 3 selectors.
Are CSS 2 selectors powerful enough to select any element in a DOM tree?
Is there anything that CSS 3 selectors could do while CSS 2 selectors could not?
Could any CSS 3 selector be theoretically converted to a CSS 2 selector (although the converted CSS 2 selector may be a bit tedious)?
Is there any tool for converting CSS 3 to CSS 2 selectors?
I ask this question as I find that there is a good CSS 3 selector generator (e.g. superselector) but there are tools that know only CSS 2.
No, otherwise why would there be a level 3? Unless you're asking about something like the * selector, which does match any element in the document, and didn't exist prior to CSS2.
If you're asking whether you can construct selectors to match elements for any sort of condition, again the answer is no. Pseudo-classes, for example, represent abstractions of the document tree that can't be expressed with other simple selectors, but CSS2 comes with a very limited selection of pseudo-classes that may be used, which certainly don't represent all possible conditions you may have in mind. Most of level 3 consists of new pseudo-classes to address precisely this, but again, they don't account for all possible scenarios.
Yes. See above.
Only some of them, but not all, again for obvious reasons.
For example, div:nth-child(4) can be replicated using :first-child and the appropriate number of next-sibling selectors:
:first-child + * + * + div
See my answer to this question for details.
However you cannot replicate any of the substring-matching attribute selectors introduced in Selectors 3 with the ones in CSS2. You also cannot replicate :nth-child() with formulas such as :nth-child(2n+1) using CSS2 selectors, nor can you completely replicate :nth-of-type() without making any assumptions about the DOM. Just to name a few examples.
I cannot answer this, but someone might have tried making a converter and failed for the reason I've given above.
I'm wondering if there is a performance issue using attribute selectors instead of class selectors.
div.test {}
div[test] {}
P.S. : I'm only interested in CSS performance, not JS.
According to this article, class selectors are more efficient than attribute selectors.
Someone has actually created a real life selector test that showcases selector matching performance.
The table outlines that attribute selectors are approximately 3x slower compared to standard classes.
Relying on attribute selectors also requires more characters to target an element. It's better to define short and concise class names to keep your stylesheet small.
Example:
// 17 Characters (attribute)
[title="example"] {
...
}
// 6 Characters (class)
.title {
...
}
http://scope.bitbucket.org/tests/selector-matching-performance/
According to this project there is no real performance issue.
This surprised us, since selector performance hasn't been a real
concern in our day-to-day work for a while. Front-end performance is a
huge deal, of course, but CSS selectors appear to contribute such a
minuscule amount to the total page load time that it didn't occur to
us that it might be a major concern to many people.
They have benchmarks as well.
EDIT: see comment: they have benchmark ideas*, not benchmarks.
https://github.com/amcss/am-benchmarks
There is no performance issue. Both act same. But there is difference in specificity of the css with class versus Elements.
Specificity - Specificity determines, which CSS rule is applied by browsers.
If two selectors apply to the same element, the one with higher specificity wins.
But specificity has hierarchy.
Inline styles (Presence of style in document).
An inline style lives within your XHTML document. It is attached directly to the element to be styled. E.g.
IDs (# of ID selectors)
ID is an identifier for your page elements, such as #div.
Classes, attributes and pseudo-classes (# of class selectors).
This group includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
Elements and pseudo-elements (# of Element (type) selectors).
Including for instance :before and :after.
Source: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Hence div.test {} is more specific.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Complex CSS selector for parent of active child
How would I make a css selector with that applies style to a table cell that has an input child element?
Unfortunately, you can't target parent elements in CSS yet (I believe it will come in CSS3)(see Sam's answer). If you want to do this, you'll either have to a) use javascript or b) add a class name to the td containing the input.
Here is a nice reference of the selectors you can use currently to target children, siblings, types, etc.
According to Wikipedia:
Selectors are unable to ascend
CSS offers no way to select a parent or ancestor of element that satisfies certain criteria. A more advanced selector scheme (such as XPath) would enable more sophisticated stylesheets. However, the major reasons for the CSS Working Group rejecting proposals for parent selectors are related to browser performance and incremental rendering issues.
And for anyone searching SO in future, this might also be referred to as an ancestor selector.
If you're using jQuery:
$("td input").each(function() { $(this).parent("td").css("style", "value"); });