Recently, I've tried using the "checkbox hack" to be able to do cool styles on an image when clicked instead of hovered. I am a complete beginner and currently, I don't want to touch javascript. I am trying to understand how it works and I am currently having a difficulty understanding why use universal selector on css. I understand from a stackoverflow answer (Difference between universal and descending selector in CSS) that it helps to read from right to left when reading selectors. However how is it not possible to just use the descendant selector instead of using a universal selector (I tried only #box:checked ~ span but it just doesn't work)?
#box:checked ~ * span{
font-weight: bolder;
}
<input type="checkbox" id="box">
<label class="label-box" for="box">
<span>Lorem Ipsum</span>
</label>
Yes. It's possible to use a descendant selector. It's just about using the selectors in the correct way by taking care of CSS Specificity rules. You can read more about CSS specificity on the web.
Also, I suggest looking over the symbols used in CSS because there may be another way also to do the same.
Look over the code snippet below without the use of a universal selector.
#box:checked ~ .label-box span {
font-weight: bolder;
}
<input type="checkbox" id="box">
<label class="label-box" for="box">
<span>Lorem Ipsum</span>
</label>
Related
I have a situation where I need to change the text color of a label where the following sibling is an input, when its focussed.
div(class='form-control')
label(class='label ...')
input(type='text')
The best I can come up with is the move the label to AFTER the input, use the adjacent sibling selector input:focus + label
input:focus + label {
#apply text-green-500;
}
...and then reverse the order with flexbox flex-direction ... but it means I need to separate the styling into separate CSS file and putting the order 'backward' is highly annoying ...
Are there any tips, tricks or Tailwind utilities to support this use case?
You can use the group and group-focus-within utilities and keep your markup as is.
<div class="group">
<label class="group-focus-within:text-red-600">Some text</label>
<input class="..." />
</div>
Focus-within is now supported in all major modern browsers.
Here it is on Tailwind play https://play.tailwindcss.com/7BRw4QLbly
For me this answer worked, by setting the :focus-within property in the css on the class of the outer div.
In your case it would be:
form-control:focus-within label {
#apply text-green-500;
}
A particular web editor only allows in-line css and no javascript.
I would like to make a minimal show/hide section:
<div>
<p id="question">What do you call a fish with no eyes</p>
<p id="answer" style="visibility:hidden">Fsssssssh</p>
</div>
Is there any solution? - I.E. compatible.
In short, no.
While it's entirely possible to achieve such a system (for multiple questions and answers) without any JavaScript whatsoever, it's not possible to do it purely inline. This is because you can't target pseudo-elements inline.
And even with you current HTML structure this would still be impossible, as there is no child selector in CSS (though a :has() pseudo-selector has been drafted).
In addition to this, it's also worth noting that inline CSS has a higher level of specificity than stylesheets; a stylesheet rule cannot override inline CSS unless you make use of an !important declaration.
Assuming you are change your HTML, this can be achieved with a combination of the :focus pseudo-selector, the adjacent sibling combinator (+) and the !important declaration, as can be seen in the following:
#question:focus + #answer {
visibility: visible !important;
}
<div>
<a id="question" href="#">What do you call a fish with no eyes</a>
<p id="answer" style="visibility:hidden">Fsssssssh</p>
</div>
i have :
<form id="commentform">
<p class="class1">
<p class="class2">
<p>
<input id="captcha_code"></input>
</p>
</form>
i want to style the "p" which does not have nor id neither class, i want to do it in a way that it does not style the other "p" tags.
my "p" has a child with id (#captcha_code). i guess, if i can style #captcha_code parent, it will not concern the others... but i do not know how to do it...
There is not currently a way to style an element based on whether or not it contains a particular child. The best way I can think to style the <p> in your case would be:
#commentform p:not([class]){
}
Closing your paragraphs isn't completely necessary, but it's always nicer to read. Additionally, you shouldn't add a closing tag for your input in HTML:
<form id="commentform">
<p class="class1"></p>
<p class="class2"></p>
<p>
<input id="captcha_code">
</p>
</form>
JSFiddle
To keep it simple, this can't be done.
Unlike the child selector >, There is no (and will probably never be) a parent < selector in css.
Have a look at this article to see why.
Try this:
p > input {
// style for that..
}
Using this, the style will be applied to the parent of the input.
Fiddle for this: http://jsfiddle.net/afzaal_ahmad_zeeshan/WyV7A/
I'm using the following in some selenium code:
WaitForElement(By.CssSelector("#document-count:contains(<number greater than 0>)"));
Specifying the number greater than 0 is where I'm stuck. Is there any way to use only css to check and see if an element's innertext has something other than 0?
:contains was deprecated in CSS3. Since WebDriver ties directly into the browser, it's unable to use that pseudo-class.
Is there any way to use only css to check and see if an element's innertext has something other than 0?
Unfortunately not. CSS really screwed Selenium users over with their deprecation of both :contains and :nth
As Arran said, you can use xpath, or - if you are willing to experiment with C# and CSS together (not just css as you state) then you can come up with something to loop x amount of times checking the text.
Per Chris Coyier at CSS Tricks:
Deprecated
:contains() - As far as I know, this is gone. The current
CSS3 spec has removed it. I don't know the story, let me know if you
do. At a glance, it looks ridiculously useful (being able to select
objects based on the textual content they contain). It may be because
of problems, or having content in selectors being undesirable. My
preference would be to have it select by elements rather than text,
like p:contains(img), but alas, no such luck.
That said, if you were to set the value properties, you may be able to use :not([value="0"]):
See jsFiddle demo
HTML
<div id="doc">
<input type="text" value="0" />
<br />
<input type="text" value="1" />
<br />
<input type="text" value="2" />
</div>
CSS
#doc input[value="0"]
{
background: red;
}
#doc input:not([value="0"])
{
background: green;
}
Result
I am trying to define styling for second sibling's child element based of first sibling's class.
Here is an example of what I am trying to achieve
<div >
<div class="one">
<div class="find edit">
Find me
</div>
</div>
<div class="two">
<div class="change">
Change me
</div>
</div>
</div>
In this example, I want "Change me" to be green if "edit" class is found. Is it possible to achieve this purely based on css?
Help much appreciated.
Thanks,
Medha
As far as I know, it's not possible to access the parent selector (I wish it was). If you could consider this structure, it'll be no problem at all:
HTML
<div>
<div class="one edit">
<div class="find">
Find me
</div>
</div>
<div class="two">
<div class="change">
Change me
</div>
</div>
</div>
CSS
.one.edit + .two .change { color: green; }
If not, you could easily accomplish what you're after with a little JavaScript.
Here You can find answer:
Complex CSS selector for parent of active child
Short answer copied from link:
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.
Update:
Now I notice the edit class required in the child. You cannot.
simply you need something like a parent selector, and this doesn't exist in CSS 3, it's suggested in CSS 4 though, but that's far from happening any time soon.
More here:
CSS selector for "foo that contains bar"?
.
Original:
Depending on which browsers you care about, this may work:
div.one + div.two > div.change {
color: green;
}
Reference:
http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors
Live Example:
http://jsfiddle.net/Meligy/NVjq6/