I think we can all agree that this selector would be very helpful, as indicated by many questions asked here on SO, which would be easily resolved by using it (see for example Can I combine :nth-child() or :nth-of-type() with an arbitrary selector? and linked questions). Usually we have to end up changing structure, adding classes or messing around with jQuery.
Why is this selector not in the standard? Why do we have :nth-of-type, but not :nth-of-class? Is there some reasoning behind it or is it just missing for no particular reason?
It seems it is a feature planned for CSS4: https://drafts.csswg.org/selectors-4/#the-nth-child-pseudo
I guess this could let us deduce it was omitted in CSS3 for no specific reason.
This answer doesn't satisfy me though. Parent selector :has is also in this draft, and there are plenty of very good reasons why was it not there before.
Related
In CSS, we have been introduced the new property text-align-last property to align the last line, but to me, this is going out of the regular flow of CSS. We already have pseudo-element selectors like ::first-line, so instead of implementing text-align-last property, a pseudo-element selector i.e. ::last-line could have been introduced where we could do more than just aligning the text.
Agreed! Your suggestion would make sense. It's consistent and it would also match the other pseudo elements like :first-child and :last-child.
Maybe you could suggest it to W3C?
They have an archived mailing list www-style#w3.org. You could subscribe yourself and take part in discussions:
https://lists.w3.org/Archives/Public/www-style/
More info for if you want to help/participate can be found here:
https://www.w3.org/Style/CSS/current-work
Your question is similar to: why did we invent big calculators and big PC when we could have invented the powerful small laptops we have now?
text-align-last was created for a purpose and a need that has emerged: to only align the last line.
What you are asking for is a different thing: A selector to select the last line to apply CSS. Maybe it will come in future and maybe not. It depends if we really need it and if the communit ask for it. It make look trivial for you but it's not. A lot a feature were never implemented until now due to a lot of limiation. the :has() selector was introduced since more than 5 years now and we still have no support for it due to many implementations limitation.
This is how CSS worked since the beginning.
Why having :first-child\ :last-child if we can do everything with nth-child(n) ?
Why having top,left,right,bottom if we can use only inset?
etc
This is the evolution of CSS.
I am taking practice test for Microsoft 70-480. I came across the question in the image. To select attributes that end in specific given value should be a css attribute selector such as [attribute$='value']. I don't understand how we make that selection with a css pseudo-element. Can some one explain to me why
As you've correctly stated, you need an attribute selector for this (although you would need to use [attribute*=value] instead), and you can't match elements using pseudo-element selectors (that's why they're called pseudo-elements!).
The only explanation for the "correct answer" here being option C is that whoever wrote that test either made a mistake with the options, or doesn't understand CSS selectors. Hopefully the former.
When working with css selectors we face many choices how to select an element (using combined selectors, using ids or classes). I am asking if there are any guidelines and best practices about how to make a choice about selectors and classes/ids to have maintainable websites with easy portable parts ?
I find this article helpful - https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS
If I'm getting your question right, the choice on which selectors to use will depend on good mark-up as well as appropriate naming of classes and ID's.
Generally, know your target audience and what browsers they use. For instance, you can use something like:
p + ul in IE7, but only if, in your html code there are no comments or elements between a p and the next element, which in this case is a ul.
So knowing what browsers your site is dominantly viewied with is the first thing really. Then, you can work backward or forward as needed.
In the end, it's about IE7+ and whether your user base is using that because there are many kinds/types of selectors that only work in later browsers.
When combining a class and ID in CSS is it better practice to use .class#id or #id.class? Does one have advantages over the other, or are they treated exactly the same by every browser? Thoughts?
They both point to the same element due to that id selector, so they work the same way.
As for advantages, I feel that .class#id is suited more for specific cases of a .class element (like a sticky post in a blog), and a #id.class is just an extension of the #id element's stylesheet.
I'm not sure if this is common practice, but I find it helpful.
I believe you can find some useful information here:
How to combine class and ID in CSS selector?
I understand that in jQuery, it's advantageous to be more specific when using selectors so that jQuery doesn't have to traverse the entire DOM to find what you're looking for. For example, $('span.description') is better than just $('.description') if I know that the description class is only ever applied to <span> elements.
Is this the case with CSS, too? Is there any specific advantage for me to use span.description { } instead of .description { }? I'm thinking in terms of speed, optimization, etc. Am I saving the browser any work by telling it exactly where to look?
This is true in CSS -
A good rule is to descend from the nearest ID.
IDs are indexed so locating them is extremely fast. There is no reason to use more than one in your selector.
Google Code- Optimize browser rendering
This answered a lot of questions I had on the subject including this one-
I hope you find it useful.
Read up on css specificity - which is the most important reason to be more or less specific with your css.
http://www.w3.org/TR/CSS2/cascade.html#specificity
As browser performance is pretty much a non-issue (except for in jquery, as you've mentioned), my guideline is to be specific when you are controlling precedence, or when you want to make something a bit more readable in your css. Over specifying can make it tricky to re-use css selectors and make things overly complicated.
Edit
This looks like a bit of a duplicate:
CSS Performance Question
it always depends on your amount of html code and the structure. It is definitely a good idea to use especially ids and appropriate selectors. (ie #nav li instead of li.nav). Since browser first load the html and then apply the css you are helping a lot.
This said, when it comes to pure css (no jquery) the difference in speed is nowadays not easy to distinguish, because the rendering engines are highly optimized - especially when it comes to applying css. So normally it shouldn't matter.
As far as I know, how specific your selectors are make very little difference on the performance.
The two areas where more specific selectors are most useful, is to reduce the risk that it's not applied where you don't want it, and to make one selector take precedence over another.
A more specific rule has precedence over a less specific rule, so:
span.myclass {}
has precedence over:
.myclass {}
(no matter what the order is in which the rules were declared)