On MDN I read about the :state() pseudo-class, however the page doesn't help much. I've tried to find some information somewhere else but wasn't very lucky. Can someone explain to me, how this pseudo-class is used?
I'm not looking for explanations on how to use pseudo-classes in general. I understand how to use :hover or :nth-child() for example but I don't understand how you can use :state(); like what to use as an argument. Maybe someone can give a quick example.
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.
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.
I am working on styling my <blockquote> but I am not able to find a complete reference that would let me check what is available to me (newbie here).
For example, "box-shadow" property. How to check if I can define for <blockquote> or not? Trial and error?
You can apply any CSS property to any HTML element.
Some inline elements don't support properties of block level elements(i.e. padding on <span>), but you can easily overcome that restriction by defining them block or inline-block
Most documentation you'll find is extraordinarily dense and reads like the specifications. As someone who is learning, my best advice to you is to test it out, make the mistakes and learn from them! You'll spend far less time here waiting for an answer you can test yourself in seconds.
That being said, the Mozilla Developer's Network has (IMHO) the easiest to absorb documentation around.
P.S. yes, you can use box-shadow on blockquotes
Here is the official list of all properties: http://www.w3schools.com/cssref/
I do also like this list: http://www.blooberry.com/indexdot/css/propindex/all.htm
While there may be some specific attributes that work best with some specific block, the general rule is that you can apply any property to any element. The result may vary from a browser to another.
Please note that some browsers support their own set of properties.
This is somehow not working: #ipadmenu.oldcontent ~ :not(#ipadmenu.newcontent) ~ #content.newcontent article {width:728px}
Is this normal? If this is correct it might be because of some other css rule that is conflicting, but I cannot seem to find it.
Did I do something wrong?
Thanks :)
There’s a syntax error, as you can check with http://jigsaw.w3.org/css-validator/ (though its report is a bit cryptic in this case). The argument of :not() must be a simple selector, see definition of :not in the CSS3 spec. The code works (on sufficiently modern browsers) if you use e.g. just .newcontent as the argument.
I can’t quite see why you would also have #ipadmenu there, as you cannot validly have two elements with the same id, i.e. #ipadmenu matches as most one element in a document.