Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
With-respect to the following expression:
radio:focus > .approve, radio:focus > .dis-approve{/*statements...*/}
Is it accepted by CSS interpreter/compiler?
Objective: applies iff both .approve and .dis-approves' radio-typed parents are in-focus.
It is valid (see BoltClock's comment), but you'll find that it will not match anything as it has several problems:
radio isn't a valid HTML element. Did you mean input[type=radio]?
If you did mean input[type=radio], that element cannot have children, so > .approve and > .dis-approve wouldn't select anything. Did you mean + .approve and + .dis-approve, to an element next to this one?
The best way to know if your CSS works is to apply your CSS to a HTML structure which should accompany this and see what happens.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 10 months ago.
Improve this question
Hello guys I have this CSS selector and I can't figure out how to read it. Can someone explain? Thanks
.form__input:not(:placeholder-shown).form__input:not(:focus)+.form__label {
The ideal is that in nested css classes you put them one below the other for easy reading, since it can contain many elements and about your question
.form__input:not(:placeholder-shown)
// apply the class to all .form__input that do not have the selector "placeholder-shown".
.form__input:not(:focus) // applies the css to all .form__input not in "focus".
+.form__label // here applies the css to the input label
{
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I was going through the main boostrap.css file and came across several uses of this selector:
.btn-group-vertical > .btn:first-child:not(:last-child) {}
So it's selecting an element that has the .btn class which is a first child (but also not a last child?) of an element with the class .btn-group-vertical
Why would there be a need for the chained :not() selector? I can't imagine a use case for this.
The use case would be if it's a single element in the group, wherein it's both the first and last child.
I opened an issue on Github and got a response from the creator himself (Mark Otto):
:first-child and :last-child can apply to the same element if it's the
only child element. We do this to avoid overriding properties again
and again. If we did :only-child we'd have to write another selector
altogether.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
What is the difference between for example p:last-child selector and p:last-of-type selector?
Also what is the difference between for example p[class|"hello"] and p[class^="hello"]
As you'd expect p:last-child matches the last child and p:last-of-type matches the last element of the type.
The difference between p[class|"hello"] and p[class^="hello"] is that the former is not a valid selector while the latter is.
Also, see the comment on your question.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
How could i remove all unused css elements from my page.i have used many tools but all are telling me the percentage of unused css but no one is telling me which css element to remove..
i just want to know my unused css elements.
Checkout the Firefox extension:
Dust-Me at https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/.
"Dust-Me Selectors is development tool that scans your website to find unused CSS selectors."
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
maybe a silly question but as far as I like standards I'd like to know, how should we write CSS selectors:
.my-selector-for-div (breaks)
.mySelectorForDiv (camel case)
Is there a standard which of those ( or any other ) should be used ?
Here is a website of css name convention (with examples):
http://www.realdealmarketing.net/docs/css-coding-style.php
There are some interesting articles about code formating (about CSS and BEM methodology):
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
http://coding.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/
I'd go with matching the language. In CSS' case it uses hyphenation regularly so for selectors I would also use hyphens even though I personally find them ugly.
Not sure if there's a proper style guide for them though.
edit: Can I use camel-case in CSS class names seems to also say use hyphens for class names.