Regarding the code here:
The radio buttons in the fiddle aren't acting the way radio buttons should.
I'm not familiar with + in CSS and I wonder if this has something to do with it.
input[type="radio"]:checked+label{ ..... }
//a label that immediately follows an input of type radio that is checked
The + sign in CSS denotes a selector that is adjacent to the first selector.
In your example the + sign is modifying the label not the actual radio button but the label only.
Now it is not working because you havent specified a group name (or name) for the radio button try the following html.
<form>
<input type="radio" id="radio1" name="rdo">
<label for="radio1"></label>
<input type="radio" id="radio2" name="rdo">
<label for="radio2"></label>
</form>
Now the radiobuttons are bound to the same name and will function correctly.
Cheers, Nico
This selects the adjacent element, see The 30 CSS Selectors you Must Memorize.
FTA:
This is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. In this case, only the first paragraph after each ul will have red text.
Supported in IE7+
It matches a element immediately preceded another specified element.
In your example this would mean it matches any label element that follows an input element of type="radio".
More information on selectors here: http://www.w3.org/TR/CSS2/selector.html
If you are referring to the radio buttons not being mutually exclusive (you can select multiple ones), it is because the html does not define the radio buttons as being part of the same group. Use the name attribute to make this happen.
<form>
<input type="radio" name="radioGroup" id="radio1">
<label for="radio1"></label>
<input type="radio" name="radioGroup" id="radio2">
<label for="radio2"></label>
</form>
I believe your questions about the + in CSS is unrelated, but it is correctly identified as the next sibling in other answers.
Related
I have found many examples explaining how to use multiple :not selectors on an individual element. However, so far I have been unable to find any examples that use :not selectors on different levels within a single selection path in CSS / JS querySelector.
For example, given a HTML structure of:
<div class="anything_except_ignore">
<input type="text" id="a" />
<input type="hidden" id="b" />
</div>
<div class="ignore">
<input type="text" id="c" />
</div>
I wish to select JUST input#a.
I have tried the following in JS and it does not seem to work:
var elems = document.querySelectorAll("div:not(.ignore) input:not([type='hidden'])");
In this case it appears the first :not selector is ignored (so in the above example both input#a AND input#c are selected.
Have I made a mistake in the syntax or is this approach not possible to use :not selectors in this way to select just input#a?
I can work around this by looking a parent class in JS once the elements are selected, but I'd rather do it properly at the selector stage.
---UPDATE--- as suggested in one of the answers, my mistake was in not understanding that other DIVs further up the DOM can fulfil the :not(.ignore) criteria and so the input under the div.ignore element IS selected. If I remove other DIVs then the requested logic does seem to work as proved by this test:
var res="",elems = document.querySelectorAll("div:not(.ignore) input:not([type='hidden'])");
for(var i=0;i<elems.length;i++){
res = res + elems[i].id + "\n";
}
alert(res);
<div class="anything_except_ignore">
<div>
<input type="text" id="aa" value="a"/>
<input type="hidden" id="bb" value="b"/>
</div>
</div>
<div class="anything_except_ignore2">
<span>
<input type="text" id="dd" value="d"/>
<input type="hidden" id="ee" value="e"/>
</span>
</div>
<div class="ignore">
<input type="text" id="cc" value="c"/>
</div>
Sorry for any confusion, but at least this helps clarify how it should work as I could find no other examples of this in my searching.
---CONCLUSION---
As far as I can tell I have to either:
make sure that my inputs are always immediate children of the div I want to check and use the ">" syntax
after selection of all non-hidden inputs, use JS to check up the DOM tree of each, to check the class name of all DIVs up the tree.
If there is a better querySelector way to solve this particular issue then I'd love to hear it.
This is a common misunderstanding of how :not works in combination with other selectors.
Let me guess, there are actually more div elements than you have shown us, around these elements …?
div:not(.ignore) is not “ignored”, but the condition is just fulfilled by a different element than you thought - by some div element further up the tree. The space in between the two partial selectors is the descendant selector, so every input:not([type='hidden']) element that has a div ancestor that doesn’t have the class ignore anywhere above it in the DOM tree, matches the full selector.
If you change your selector to div:not(.ignore) > input:not([type='hidden']), this would only select such input fields if their immediate parent is a div without that class.
I have this label and checkbox
<label><input type="checkbox" id="SameAsPrimaryAddress" />Same As Primary Address</label>
Is there a CSS selector that will only affect the label text and not the checkbox or do I have to separate my label from the input or give the label an ID or class to be able to do this?
It depends
In that case and if you only need that HTML, you can.
But
It is better to wrap your text with a span or a div to avoid problems you can encounter.
Here's a demo
http://jsfiddle.net/6aS4k/
Then you can add style with label span {}
Your answer: No. There is no selector to only target the free floating text of an element, without affecting the inherited properties of other elements within. To explicitly style your text, you would actually want to wrap your text in another element to target in your CSS, like a span.
However, in your specific case, that checkbox does not have many (if any) inherited properties in most browsers default stylesheet. So, a long as you aren't using a reset stylesheet or otherwise normalizing that input to inherit style properties you could get away with styling the label to affect only the text.
In the end, I would recommend that your label should actually correspond to your input separately, which would also semantically make sense. This would also allow you to make use of the for attribute, which will allow clicking on your label to toggle the corresponding checkbox as well, which is a win for usability!
<div>
<input type="checkbox" id="SameAsPrimaryAddress" />
<label for="SameAsPrimaryAddress">Same As Primary Address</label>
</div>
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.
I have found an example in the net where the label tag and its 'for' attribute were used to hint the browser to which control the label belongs to. E.g:
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
My question is if I actually have two controls where the same single label should be assigned to the combination of both (not to each one, if possible), eg:
a label text + a numeric input field + a text (unit) input field
Should I
assign the label only to the numeric input field (because it can't be done) or
is it possible to put the numeric and text input field into a single span tag and attach the label to that span?
or can both input controls be placed inside the single label tag?
Which solution will work for accessibility on all browsers?
The for attribute of labels can indeed be used with any element (so long as the ID matches) but only for a single element. Additionally, it really only makes sense for form elements.
From the spec:
for = idref [CS]
This attribute explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.
And:
To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element.
(emphasis mine)
I would like to select <label> elements that immediately precede <input type="checkbox">
from the CSS guide
Adjacent sibling selectors have the
following syntax: E1 + E2, where E2 is
the subject of the selector.
But, unless I'm misunderstanding the spec I need a select where E1 is the subject not E2. I'm sure this must be available, what am I missing?
Actually no, youre not missing anything (unless i have been for quite some time now as well) - you cant select a previous sibling with css2 selectors.
I've never used it, but I understand from the link that you've provided that it should be done exactly like follows:
input[type='checkbox'] + label { color: Red }
This should work for the next HTML:
<input type='checkbox' id='chckTest' /><label>Test checkbox</label>
I don't have the possibility to check it now but I believe that the "Test checkbox" text will be red...