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;
}
Related
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 think this is impossible :-(
Using CSS, I need to select the last label in the list of paragraphs, which is inside of a span.
<div>
<p>
<span>
<label>no good, because not the last</label>
</span>
</p>
<p>
<span>
<label>good</label> <!-- This one should be selected -->
</span>
</p>
<p>
<label>no good, because is not inside of a span</label>
</p>
</div>
Virtually the selector would be something like this:
div (p > span):last-child label {
background: red;
}
But I don't think CSS understands parenthesis (yet).
The reason for this is that ExtJS (Sencha) puts radio buttons in nested containers. The visibility of buttons is declared in the inner containers (that would be the span tags in the example above). I want to round corners of the last VISIBLE label, thus I need to find the last outer container that has an inner container declaring it's visibility.
Perhaps there is a different workaround for this? As a last resort, I'd accept a JS solution, as long as it's based on native ExtJS components/elements traversing syntax, rather than jQuery.
Please ask for more detail if needed.
It will (maybe, depends on if the selector will be in the final spec) partly be possible with CSS 4:
!p > span {
background: red;
}
But this will select all <p/> that have a <span/> inside, not only the last one. CSS currently does not know a :last selector, and as far as I can see even with CSS 4 this won't be implemented1.
So the summary is: Currently there is no way to do this in pure CSS.
Currently your only option is to use JavaScript. A sample in jQuery would be:
$('p:has(span)').last().css({ 'background': 'red' });
Here is a demo.
Or, as you mentioned in your comment, with extjs:
Ext.select('p:has(span):last').setStyle('background', 'red');
Here is a demo.
Answer to your updated question
Your new example does not need a parent selector anymore. The partly working CSS would be
div > p > span > label {
background: red;
}
But still: There is no :last selector in CSS1. Updating the above JavaScript samples:
jQuery:
$('div > p > span > label').last().css({ 'background': 'red' });
extJS:
Ext.select('div > p > span > label:last').setStyle('background', 'red');
1 About the :last selector:
To make it more clear: :last-child selects the last child inside an element in the dom, whatever it is. It is no sub query. So, even if your parenthesis version would be implemented, :last-child would select nothing because the really last element is not part of the query. You would need a :last selector like in some JavaScript libraries which selects the last item of the resultset, so it's a sub query. This is a completely different selector and will not be part of CSS soon.
I'm working with primefaces on a screen where I used calendar and autocomplete
I got the UI from the designer and started integration, I assigned styles like this
<p:calendar styleClass="xyz" />
the output is
<span id="bla" class="xyz" >
<input type="text" class="some other classes here" />
</span>
so my styles all fail
Now I need to apply styles on input directly instead of the spans
Can you solve it by rearranging your CSS?:
.xyz input {
/* some weird styling here */
}
This is problematic if you rely on Bootstrap CSS for example. Form controls needs the class form-control, but when you add styleClass="form-control" for p:calendar, the surrounding span gets the class instead of the input, which totally messes with the design. I think there should be a inputStyleClass attribute for the p:calendar tag, the same way there is a tableStyleClass tag for p:dataTable.
This worked for me using jQuery to add the form-control class to the input field:
$(".mycalendar input:first-child").addClass("form-control");
p:calendar id="date1" value="#{bean.date1}" styleClass="mycalendar" />
You can use this trick if you are using material design:
:host /deep/ .ui-inputtext{
/* Your Crazy Custom Style*/
}
I have the following html form
<div>
<p>Field1</p>
<input type="text" name="fld_one" id="fld_one" value="" />
</div>
<div>
<p>Field2</p>
<input type="text" name="fld_two" id="fld_two" required value="" />
</div>
I want to use CSS to mark required fields like so
div input[required]:before { color: #f00; content: "*"; }
However this css line does not make a visible change in the document.
For reference I was able to modify all required fields with the following:
div input[required] { background-color: #000; }
TL;DR - Can the :before pseudo-class be used with an attribute selector? If so, how?
:before is a pseudo-element, not a pseudo-class. It can be used with an attribute selector, but you can't use it with input elements with some browsers because it is a replaced element. (Some browsers, because it's not very well-defined whether they're supposed to work, although most lean toward "no".)
The reason why your attribute selector works is because you're applying styles to the input element itself, which works consistently in every browser.
Pseudo elements do not work with input elements, as they have no content.
From the specs:
Authors specify the style and location of generated content with the
:before and :after pseudo-elements. As their names indicate, the
:before and :after pseudo-elements specify the location of content
before and after an element's document tree content. The 'content'
property, in conjunction with these pseudo-elements, specifies what is
inserted.
Input elements have no childNodes in the DOM, hence, no content property to insert into.
As a possible workaround, apply the stars to the labels instead of the input elements
:before is not valid on <input> as it doesn't have "content" - see: CSS content generation before or after 'input' elements for a full explanation.
The "traditional" way of doing it is inserting the * on p or label (label is more semantic).
I have this code that should show and hide element outputs according to specific checkboxes.
The output that I´ve got is that each checkbox, when clicked, shows more outputs than it should.
How can they be targeted using specific css IDs?
I mean, whan you click on each box, it should only appear the text that´s referencin that specific box, and not all of them.
Thanks for your insight!!
Rosamunda
DEMO
/*styled relative to the label*/
label {display:block;}
label ~ div {display:none; margin-left:1em;}
/*targetting*/
/*boxes with id having this number will style a sibling div with this number*/
input[type="checkbox"][id*="131"]:checked ~ div[class*="131"] {display:inline;}
input[type="checkbox"][id*="134"]:checked ~ div[class*="134"] {display:inline;}
input[type="checkbox"][id*="130"]:checked ~ div[class*="130"] {display:inline;}
You can use the contains *= selector. I'm not sure what browser compatibility it has, but it works for me in Chrome. For instance changing the CSS for the first of the three checkboxes looks like this:
input[id*="131"]:checked ~ div[class="tipo-uf-131"] {display:inline;}
This is close to a perfect example of overthinking things and relying too heavily on CSS. Stylesheets are supposed to be in charge of presentation not functionality. CSS selectors can be complex enough that you could use it for validation checks - does not make it a good idea though :)
You're much better off relying on javascript to accomplish this and would end up with a significantly wider browser support matrix. Change your markup a bit:
<label>Box 1:</label> <input class="form-checkbox" id="cb131" type="checkbox"/>
...<input class="form-checkbox" id="cb134" type="checkbox"/>
...<input class="form-checkbox" id="cb130" type="checkbox"/>
<div id="cb131-linked"><b>Box 1 is checked.</b></div>
<div id="cb134-linked">...</div>
<div id="cb130-linked">...</div>
...and you can add a jQuery listener so that when the state of a checkbox is toggled, you can show the related divs like so:
$checkboxes = $(".form-checkbox");
$checkboxes.change(function(){
console.log("changed");
$checkboxes.each(function(){
$this = $(this)
$("#"+$this.attr("id")+"-linked").toggle($this.is(":checked"));
});
});
Fiddle: http://jsfiddle.net/9t59j/11/
Also, inputs are supposed to be self-closing elements.