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 15 days ago.
Improve this question
what I have
when I am going through geek ended up with some doubts
<label class="script">
Yes
<input type="checkbox">
<span class="geekmark"></span>
</label>
some CSS selectors I don't understand 👇
1) .script:hover input~.geekmark {}
2) .script input:active~.geekmark{}
3) .script input:checked~.geekmark {}
4) .script input:checked~.geekmark:after{}
5) .script .geekmark:after{}
please explain them in descriptive way,
like if we have parent:hover > child{} when mouse hovered over parent then the child get styled please explain those above 5 CSS selections in such descriptive manner
Sure, here's an explanation of each of the 5 CSS selectors:
.script:hover input~.geekmark- Selects the element with class
.geekmark that is a sibling of the input element and only applies
the styles when the parent element with
class .script is hovered over.
.script input:active~.geekmark - Selects the element with class
.geekmark that is a sibling of the input element and only applies
the styles when the input element is actively being clicked.
.script input:checked~.geekmark - Selects the element with class
.geekmark that is a sibling of the input element and only applies
the styles when the input element is in a
checked state.
.script input:checked~.geekmark:after - Selects the pseudo-element
:after of the element with class .geekmark that is a sibling of the
input element and only applies the styles when the input element is in a
checked state.
.script .geekmark:after - Selects the pseudo-element :after of the
element with class .geekmark that is a child of the element with
class .script and applies the styles to it.
Related
This question already has answers here:
Multiple descendant children selector with css [duplicate]
(3 answers)
Closed 3 years ago.
Codepen example is here.
Question. How do I paint yellow all inputs that are NOT descendants of div.b?
My attempt paints all three elements yellow:
:not(.b) input.myInp {background:yellow}
Thanks!
:not(.b) > div > p input.myInp {background:yellow}
You need to make the selector specific enough that it does not match with the parent .a element.
Your selector is not working because you're targeting any element that does not have the class .b but has an <input> descendant, and since the input has two ancestor elements which don't have this class the rule applies to them as well.
You should just specify that you're referring to the container's themselves by including the parent in your selector:
div.a > :not(.b) input.myInp {background:yellow}
This question already has answers here:
Target first element of DIV using CSS
(4 answers)
Closed 4 years ago.
How can I target a element with a class only if it is the first element under the body tag, and then not style any other elements with the same class on the same page?
You can target an element as direct child of the body only if it's both the first-child and with a specific class name
body > .yourclass:first-child {
...
}
:first-child matches a specific element, regardless of its class name but in this case the class must be also chained. All other elements with that class name won't be styled.
Codepen demo
This question already has answers here:
How do I select an element based on the state of another element in the page with CSS?
(3 answers)
Closed 8 years ago.
This example shows in detail... The problem starts with:
.h:hover { background:red }
.h:hover ~ td { background:blue }
That works fine: the :hover event selector triggers the following-sibling td element. So, we can say that the ".h:hover triggers ~ td"... But, if the td element has a backward occurrence, there is no selection.
PS: note that the rolspan in the example causes a "layout with a td following-sibling" where structure have a td that is not following.
The only possibility is the #id selector. So, why does CSS not offer some operator or construction to use #id in that constraint?
SUB-QUESTION#1: is there any pure CSS solution?
(edit) Thanks #TylerH to show that sub-question#1 is not a duplicate (!).
The point here is the #id selector in a trigger-event context.
Why CSS3 or CSS4 or "?" standards are not using #id for this kind of application. Are there some standard about CSS events and a better control for manage them?
We know that there is no "previous sibling" selector, and this is an understandable problem with parse algorthims. But "find #id" algorithm (no matter if next or previous!) is so simple and so fast, there are no "parse problem" to adopt #id in a kind of "trigger selector".
SUB-QUESTION#2: there are a standardization iniciative (at CSS WG?) to do some workaround to the problem, using #id as triggered selector?
PS
The HTML label tag and for attibute deal with similar problem. A <label for="for"> not need Javascript to triggers (by click event) its correspondent <input type="checkbox" id="for"> checked... So, we can imagine an on-mouse-over correspondent event triggering in the same way,
label#from1:hover <OPERATOR> #for1 { ...do something... }
at a typical HTML form like this,
<div id="for1">
<input type="checkbox" id="mycheck"/>
<span></span>
</div><!-- tag input BEFORE tag label-->
<label id="from1" for="mycheck">Label for my styled "checkbox"</label>
The ~ selector is called the "general sibling" selector. This means it can only be used to select siblings of the appropriate element. In your case, the #c21 element does not have any siblings (brothers or sisters).
What you are asking for cannot be done with pure CSS, because it requires a parent selector (something like :has() from CSS Selectors Level 4). By "parent selector", I mean the ability to move backward up the DOM to an ancestor element, so that you can then move to the ancestor's sibling, and then to the ancestor's sibling's child element.
Think of it this way: the working selector is a boy selecting his sister. That is OK in CSS-land. However, the not-working selector is a boy trying to select his cousin. This is not OK in CSS-land, because it requires a parent selector. The boy would need to first select his parent, then his parent's brother, and then this parent's brother's son.
The fact that it is an ID rather than a class is irrelevant.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 9 years ago.
Is there a way to write css so it would select a div above a selector you already known.
For example.
#modal .container .login{
//style
}
so the above code will look for an ID of modal > classname of container > classname of login.
And style the .login.
Now is is possible to have it go the reverse. So style the #modal only if it has a child of .login and .container
Thanks
Short answer? no. (in the current CSS spec) as already answered here.
Is there a CSS parent selector?
but, I can give you a little trick.
create a special CSS rule (a class) with your special styling for the 'parent'.
then, with JQuery, on document.ready, check for all the elements in the DOM who meets your requirement (in your case: has a child of some class), and dynamically add the special CSS class.
It's not a perfect solution, but can be helpful in some cases.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Is there a CSS parent selector?
I'm trying to style a paragraph with a class of "long-sentence" which contains a span with a class of "background-fill". The target for styling must be the paragraph and not the span.
Therefore, this solution is inappropriate as it targets the span:
p.long-sentence span[class="background-fill"]
This selector appears perfect, however it targets a span with an attribute of "background-fill" and not a class:
p.long-sentence[span="background-fill"]
Can it be done? Or is this too stringent a criteria for a selector that has multiple variables?
This needs to be used CSS selectors 4.
For example, the following selector represents a list item LI unique
child of an ordered list OL:
OL > LI:only-child
However the following one represents an ordered list OL having a
unique child, that child being a LI:
$OL > LI:only-child
The structures represented by these two selectors are the same, but
the subjects of the selectors are not.
Form: http://www.w3.org/TR/2011/WD-selectors4-20110929/#subject
But there is no browser support CSS selectors 4 now. So you need to use JavaScript.
jQuery:
$("p.long-sentence:has(span.background-fill)").addClass("otherClass");