I have a css:
.form-group input[type=checkbox]:not(.form-group div.checkbox input[type=checkbox]) {
margin-top: 10px;
}
Which aims to have a margin-top for those checkbox without div.checkbox
but I want to use default css for those checkboxes inside div.checkbox
However, I got this warning when I check the css, what is the proper way to do this? thanks.
The below won't work because the CSS :not() selector takes only simple selectors as argument and as per the W3C Specs, a simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
.form-group input[type=checkbox]:not(.form-group div.checkbox input[type=checkbox]) {
margin-top: 10px;
}
The argument that is used in the above selector is a sequence or chain of simple selectors.
The negation pseudo-class selector is in my opinion the most complex CSS selector to employ and it gets extremely messy if even one element which doesn't respect the rule is introduced somewhere in the middle. For example, a selector div:not(.checkbox) input[type=checkbox] will exclude only the second checkbox in the below structure.
div:not(.checkbox) input[type=checkbox] {
margin-top: 10px;
outline: 2px solid red;
}
<div class='something-else'>
<input type='checkbox' />
</div>
<div class='checkbox'>
<input type='checkbox' />
</div>
<div class='checkbox'>
<div class='something-else'>
<input type='checkbox' />
</div>
</div>
<div class='something-else'>
<div class='checkbox'>
<input type='checkbox' />
</div>
</div>
You may have expected the last two checkboxes to also have been excluded because they have one div.checkbox ancestor above them but that doesn't happen because they also happen to have 1 non div.checkbox ancestor which is making the element get matched. This is why it becomes complex to use this selector.
If your HTML structure is something like the one in the below snippet then you could use combination of direct-child selectors along with the negation pseudo-class to style only checkboxes that aren't part of a div.checkbox ancestor.
.form-group > div:not(.checkbox) input[type=checkbox],
.form-group > input[type=checkbox] {
margin-top: 10px;
outline: 2px solid red;
}
<form class='form-group'>
<input type='checkbox' />
<div class='checkbox'>
<input type='checkbox' />
</div>
<div class='not-checkbox'>
<input type='checkbox' />
</div>
<div class='checkbox'>
<div class='something-else'>
<input type='checkbox' />
</div>
</div>
<div class='not-checkbox'>
<div class='something-else'>
<input type='checkbox' />
</div>
</div>
</form>
Or else, you could write the rules for all checkboxes generically and then override for those which are present within the div.checkbox.
.form-group input[type=checkbox] {
margin-top: 10px;
outline: 2px solid red;
}
.form-group div.checkbox input[type=checkbox] {
margin-top: 0px;
outline: none;
}
<form class='form-group'>
<input type='checkbox' />
<div class='checkbox'>
<input type='checkbox' />
</div>
<div class='not-checkbox'>
<input type='checkbox' />
</div>
<div class='checkbox'>
<div class='something-else'>
<input type='checkbox' />
</div>
</div>
<div class='not-checkbox'>
<div class='something-else'>
<input type='checkbox' />
</div>
</div>
</form>
Related
This question already has answers here:
Why doesn't nth-of-type/nth-child work on nested elements?
(1 answer)
nth-of-type vs nth-child
(7 answers)
Closed 10 months ago.
I am trying to implement some css with nth child selector and unfortunately it's not working.
div.abc input:nth-child(3)
{
background: red;
color: red;
border: 1px solid red;
}
<div class="abc">
<p>This is some text.</p>
<div class="bc">
<input type="text"/>
</div>
<div class="bc">
<input type="text"/>
</div>
<div class="bc">
<input type="text"/>
</div>
<div class="bc">
<input type="text"/>
</div>
</div>
If you want the third input:
.abc div:nth-child(4) input
/* OR */
.abc div:nth-of-type(3) input
nth-child will seek all direct descendant tags so that would be:
<p> -> <div> -> <div> -> <div>
nth-of-type will seek all direct descendants of a specific type:
<div> -> <div> -> <div>
.abc div:nth-child(4) input {
color: gold;
}
.abc div:nth-of-type(3) input {
background: red;
border: 1px solid red;
}
<div class="abc">
<p>This is some text.</p>
<div class="bc">
<input type="text" />
</div>
<div class="bc">
<input type="text" />
</div>
<div class="bc">
<input type="text" value='TEST'/>
</div>
<div class="bc">
<input type="text" />
</div>
</div>
Your input tags are not siblings. They are wrapped in divs, so you need to select the nth-child of a div element and get the input inside that div.
.abc > div:nth-child(4) > input{
background: red;
color: yellow;
border: 1px solid red;
}
<div class="abc">
<p>This is some text.</p>
<div class="bc">
<input type="text" />
</div>
<div class="bc">
<input type="text" />
</div>
<div class="bc">
<input type="text" />
</div>
<div class="bc">
<input type="text" />
</div>
</div>
What your code is doing is not valid. nth-of-child is a selector for direct children of the parent container - in this case abc - and this parent element does not have any direct input-elements as children.
Instead, you need to target the bc-elements, as they are direct children of the the parent element abc, and then target the input.
In this example, I used nth-of-type. They are similiar, but nth-of-type targets DOM-elements directly, which are divs in this example.
div.abc .bc:nth-of-type(3) input {
background: red;
color: red;
border: 1px solid red;
}
<div class="abc">
<p>This is some text.</p>
<div class="bc">
<input type="text" />
</div>
<div class="bc">
<input type="text" />
</div>
<div class="bc">
<input type="text" />
</div>
<div class="bc">
<input type="text" />
</div>
</div>
I am trying to target what and where, as well as
search.
Here is my html:
<div class="entry-content">
<p> </p>
<div class="entry-content">
<div class="job_listings" data-location="" data-keywords="" data-show_filters="true" data-show_pagination="false" data-per_page="10" data-orderby="featured" data-order="DESC" data-categories="">
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label for="search_keywords">What?</label><br />
<input id="search_keywords" name="search_keywords" type="text" value="" placeholder="Chef, Cleaner, Manager" />
</div>
<div class="search_location">
<label for="search_location">Where?</label><br />
<input id="search_location" name="search_location" type="text" value="" placeholder="London, Berlin, Bristol" />
<input name="filter_job_type[]" type="submit" value="search" />
</div>
</div>
<div class="showing_jobs"></div>
<div></div>
<div>
Post A Job
</div>
</form>
</div>
</div>
<p><a class="load_more_jobs" style="display: none;" href="#"><strong>Load more listings</strong></a></p>
</div>
Tried everything including.
.entry-content {color: green;}
Interestingly,
. entry-content {background-color: green;}
works, but
.entry-content {color: green! important;}
does nothing.
you can use the following style to target all the labels inside entry-content. This works unless the style is not overrided by other styles
.entry-content label{
color:green;
}
For specific labels, you can use,
.search_keywords label{
color:green;
}
.search_location label{
color:green;
}
UPDATE
For input fields like chef,manager etc you can use
.search_keywords input{
//Your style here
}
or since you have id for the input field, use
#search_keywords{
//Style here
}
and for the submit button search, you can use the following,
.search_location input[type=submit]{
//style here
}
You can target by attribute and value:
label[for="search_keywords"]{ /* what label*/
background-color: red;
}
label[for="search_location"]{ /* where label */
background-color: blue;
}
input[type="submit"]{ /* search button */
background-color: green;
}
The color attribute refers to the text color, not the background colour.
Try attribute selectors
[for="search_keywords"],
[for="search_location"],
[name="filter_job_type[]"] {
color: green;
}
<div class="entry-content">
<p> </p>
<div class="entry-content">
<div class="job_listings" data-location="" data-keywords="" data-show_filters="true" data-show_pagination="false" data-per_page="10" data-orderby="featured" data-order="DESC" data-categories="">
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label for="search_keywords">What?</label><br />
<input id="search_keywords" name="search_keywords" type="text" value="" placeholder="Chef, Cleaner, Manager" />
</div>
<div class="search_location">
<label for="search_location">Where?</label><br />
<input id="search_location" name="search_location" type="text" value="" placeholder="London, Berlin, Bristol" />
<input name="filter_job_type[]" type="submit" value="search" />
</div>
</div>
<div class="showing_jobs"></div>
<div></div>
<div>
Post A Job
</div>
</form>
</div>
</div>
<p><a class="load_more_jobs" style="display: none;" href="#"><strong>Load more listings</strong></a></p>
</div>
May be i don't understand fully plus selector,
What i want, when user click on radio button home, div one should get displayed,
and when user click on radio button about, div two should get displayed, it did not work,
So i strip down the code, where is the problem, with this code i accepted div one to get displayed as home is by default checked. But it did not happened, so i know where is the problem but i dont know why,
Please read the comment, in the code, as i said which line is giving the problem hint it's css last section,
HTML CODE
<div class="container">
<input type="radio" name="option" id="home" checked />
<input type="radio" name="option" id="about" />
<div class="navigation">
<label for="home" class="link">Home</label>
<label for="about" class="link">About Us</label>
</div>
<div class="display">
<div class="one">
<h3>This is first</h3>
</div>
<div class="two">
<h3>This is second</h3>
</div>
</div>
</div>
CSS CODE
.navigation {margin-top:20px;}
.link{cursor:pointer;}
/*making div display*/
.one,.two{
display:none;
}
/*
###This line is not working## want to display div, if user click on radio
button
*/
#home:checked +.container > .one{
display:block;
}
if you want to run the code here is the code pen link https://codepen.io/arif_suhail_123/pen/KvdWey
.container is not a sibling of #home.
To select the element in question, when #home is checked, you can use the ~, which is the general sibling selector:
#home:checked ~ .display > .one
.navigation {margin-top:20px;}
.link {cursor:pointer;}
.one, .two {
display:none;
}
#home:checked ~ .display > .one {
display:block;
}
#about:checked ~ .display > .two {
display: block;
}
<div class="container">
<input type="radio" name="option" id="home" checked />
<input type="radio" name="option" id="about" />
<div class="navigation">
<label for="home" class="link">Home</label>
<label for="about" class="link">About Us</label>
</div>
<div class="display">
<div class="one">
<h3>This is first</h3>
</div>
<div class="two">
<h3>This is second</h3>
</div>
</div>
</div>
The + is the adjacent sibling combinator. Which requires:
The elements to be siblings
The selector on the left of + is the first positioned element
The selector on the right of + is the selector that follows.
There must be no other elements between them.
In the following demo:
Each radio was moved in front of the div it's associated with.
Each radio is display:none since there's no need to show them because the interface are the labels.
Demo
input[name='option'],
.one,
.two {
display: none
}
#home:checked+.one {
display: block;
}
#about:checked+.two {
display: block;
}
<div class="container">
<div class="navigation">
<label for="home" class="link">Home</label>
<label for="about" class="link">About Us</label>
</div>
<div class="display">
<input type="radio" name="option" id="home" checked />
<div class="one">
<h3>This is first</h3>
</div>
<input type="radio" name="option" id="about" />
<div class="two">
<h3>This is second</h3>
</div>
</div>
</div>
I believe for the plus operator to work the element has to be the immediate next sibling - So in this case the .one div would have to immediately follow the #home label, and the css would have to be:
#home:checked + .one{
display:block;
}
The html:
<div class="container">
<input type="radio" name="option" id="home" checked />
<div class="one">
<h3>This is first</h3>
</div>
<input type="radio" name="option" id="about" />
...
+ Selector : The element+element selector is used to select elements that is placed immediately after (not inside) the first specified element.
~ Selector : The element1~element2 selector matches occurrences of element2 that are preceded by element1.
So,you must use ~ instead of +.
.navigation {
margin-top:20px;
}
.link{
cursor:pointer;
}
.one,.two{
display:none;
}
#home:checked ~ .display > .one{
display:block;
}
#about:checked ~ .display > .two{
display:block;
}
<div class="container">
Home: <input type="radio" name="option" id="home" checked />
About: <input type="radio" name="option" id="about" />
<div class="navigation">
<label for="home" class="link">Home</label>
<label for="about" class="link">About Us</label>
</div>
<div class="display">
<div class="one">
<h3>This is first</h3>
</div>
<div class="two">
<h3>This is second</h3>
</div>
</div>
</div>
The order of elements is important when using this selector.
So to use the ~ operator the element should be after the first part.
Ex.
input[type=radio]:checked ~ label {
display: none;
}
The Html should be:
<div class="radio-groupe">
<input type="radio" name="water" id="choice-2" value="more-than-8-cups-a-day">
<label for="choice-2">More</label>
</div>
and not:
<div class="radio-groupe">
<label for="choice-2">More</label>
<input type="radio" name="water" id="choice-2" value="more-than-8-cups-a-day">
</div>
I'm having css issues with a second label on a radio button, when this radio button is checked. I already found out that a second (and a third) label is possible using 'for' in the label-tag. It's not possible to group everything in a single label-tag.
How can I change the background for the second label when a radio button is checked?
My (simplified) code is below, for the first label it works, second label it doesn't.
.radioclass:checked + label {
background-color: cyan;
}
<div class="row">
<div class="col-sm-4">
<input class="radioclass" id="id_radiobtn1" type="radio" name="radiobtn1" value="1">
<label for="id_radiobtn1">first label</label>
</div>
<div class="col-sm-4">
<label for="id_radiobtn1">second label</label>
</div>
</div>
The + selector in css means "immediate sibling", i.e. the very next element after the input must be a label. This will only select the immediate sibling.
An alternative is ~ which means "any sibling" and targets any label after the input.
In both of these cases, the elements (input and label) are on the same dom level. There is no way to traverse up the dom, grab the sibling and then the label - which is what you are trying to do with the html supplied.
If you are able to change the html, then either place the input outside the two divs or place both labels inside the same div (after the input).
.radioclass:checked ~ div label {
background-color: cyan;
}
<div class="row">
<input class="radioclass" id="id_radiobtn1" type="radio" name="radiobtn1" value="1">
<div class="col-sm-4">
<label for="id_radiobtn1">first label</label>
</div>
<div class="col-sm-4">
<label for="id_radiobtn1">second label</label>
</div>
</div>
.radioclass:checked ~ label {
background-color: cyan;
}
<div class="row">
<div class="col-sm-4">
<input class="radioclass" id="id_radiobtn1" type="radio" name="radiobtn1" value="1">
<label for="id_radiobtn1">first label</label>
<label for="id_radiobtn1">second label</label>
</div>
</div>
If you cannot alter the html, then JS is the only other approach (I've changed the input to a checkbox for demonstration purposes):
$('input').on('change', function(){
var func = 'removeClass';
if($(this).is(':checked')) {
func = 'addClass';
}
$('label[for="'+$(this).attr('id')+'"]')[func]('checked');
});
label.checked {
background-color: cyan;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-4">
<input class="radioclass" id="id_radiobtn1" type="checkbox" name="radiobtn1" value="1">
<label for="id_radiobtn1">first label</label>
</div>
<div class="col-sm-4">
<label for="id_radiobtn1">second label</label>
</div>
</div>
Using just CSS this is possible, although it does require a rearrangement of your HTML, effectively moving the radio <input> ahead of the elements in which the <label> elements are contained; this removes the (impossible in CSS) requirement of traversing to the parent of the <input> in order to style the non-sibling <label> elements.
/* selects the element with the id of 'id_radiobtn1' when it is
checked, uses the general sibling combinator (~) to select
all sibling <div> elements with the class of 'col-sm-4'
and then finds the descendant <label> elements within
that/those <div> elements whose 'for' attribute-value is
equal to 'id_radiobtn1': */
#id_radiobtn1:checked ~ div.col-sm-4 label[for=id_radiobtn1] {
background-color: cyan;
}
<div class="row">
<input class="radioclass" id="id_radiobtn1" type="radio" name="radiobtn1" value="1" />
<div class="col-sm-4">
<label for="id_radiobtn1">first label</label>
</div>
<div class="col-sm-4">
<label for="id_radiobtn1">second label</label>
</div>
</div>
Now, if you must have a visible radio <input> besides the first of the <label> elements, you can use a pseudo-element to effectively pretend, while also hiding the real radio <input>:
*,
::before,
::after {
/* to include border and padding in the calculated
dimensions (width/height) of the elements: */
box-sizing: border-box;
}
.row>input[type=radio] {
/* hiding the radio <input> elements: */
display: none;
}
/* selecting the <input> elements whose type is
equal to 'radio', which is checked and then
finding all (subsequent) sibling elements
(using the '~' combinator) which <div>
elements with a class of 'col-sm-4', and
traversing to the <label> elements within: */
input[type=radio]:checked~div.col-sm-4 label {
background-color: cyan;
}
label {
/* in order to ensure that the descendant
pseudo-elements are positioned relative
to their parent element: */
position: relative;
/* making room for the pseudo-elements: */
margin-left: 2em;
}
input[type=radio]+.col-sm-4 label::before {
/* the content property is required, even
if only an empty string, to have the
pseudo-element show up: */
content: '';
display: inline-block;
/* positioning absolutely, in relation to
the closest ancestor with a non 'static'
position, in this case the parent
<label> element: */
position: absolute;
/* moving it outside of the <label> element's
left border, to avoid the background-color: */
left: -2em;
/* purely aesthetic: */
width: 0.8em;
height: 0.8em;
/* arbitrary positioning, adjust to taste: */
top: 50%;
transform: translateY(-40%);
/* making the pseudo-element circular in shape: */
border-radius: 50%;
/* colouring the faux 'border': */
box-shadow: 0 0 0 2px #ccc;
}
/* adjusting the colours of the faux radio: */
input[type=radio]:checked+.col-sm-4 label::before {
box-shadow: 0 0 0 2px #000, inset 0 0 0 3px #fff;
background-color: limegreen;
}
<div class="row">
<input class="radioclass" id="id_radiobtn1" type="radio" name="group1" value="1" />
<div class="col-sm-4">
<label for="id_radiobtn1">row one first label</label>
</div>
<div class="col-sm-4">
<label for="id_radiobtn1">row one second label</label>
</div>
</div>
<div class="row">
<input class="radioclass" id="id_radiobtn2" type="radio" name="group1" value="2" />
<div class="col-sm-4">
<label for="id_radiobtn2">row two first label</label>
</div>
<div class="col-sm-4">
<label for="id_radiobtn2">row two second label</label>
</div>
</div>
You can do with Jquery on change event.
$(document).ready(function() {
$('#id_radiobtn1').on('change',function(){
$( "label:contains('second')" ).css( "background-color", "red" );
});
});
.radioclass:checked + label {
background-color: cyan;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-4">
<input class="radioclass" id="id_radiobtn1" type="radio" name="radiobtn1" value="1">
<label for="id_radiobtn1">first label</label>
</div>
<div class="col-sm-4">
<label for="id_radiobtn1">second label</label>
</div>
You can't do it with pure css, because backward in css is impossible.You can help of Jquery:
Note: I insert lab2 class to label.
$(document).ready(function(){
$('input[type=radio]').on('change',function(){
if($('.radioclass').is(':checked'))
$('.lab2').addClass('sel');
else
$('.lab2').removeClass('sel');
})
})
$(document).ready(function(){
$('input[type=radio]').on('change',function(){
if($('.radioclass').is(':checked'))
$('.lab2').addClass('sel');
else
$('.lab2').removeClass('sel');
})
})
#id_radiobtn1:checked + label {
background-color: green;
}
.sel {
background-color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-4">
<input class="radioclass" id="id_radiobtn1" type="radio" name="radiobtn1" value="1">
<label for="id_radiobtn1">first label</label>
</div>
<div class="col-sm-4">
<label for="id_radiobtn1" class="lab2">second label</label>
</div>
</div>
How to change parent sibling's child label when any inputbox is focused ?
I am trying to change label color when any of input box is focused.
<form>
<div class="parent-row">
<div class="child-row">
<select><option>Mr.</option><option>Mrs.</option></select>
<label>Name</label>
</div>
<div class="child-row"><input type="text" name="first_name"></div>
<div class="child-row"><input type="text" name="last_name"></div>
</div>
</form>
I tried but not succeed.
.parent-row:focus{
.child-row label{
color:red;
}
}
and
.parent-row:focus,.parent-row:focus label{
color:red;
}
Please help me to fix this in jsfiddle : https://jsfiddle.net/9kax864p/
I changed your HTML code little bit because there is no parent selector in css only choose siblings or children.
.parent-row select:focus ~ label{
color:red;
}
.parent-row input:focus ~ label{
color:red;
}
<form>
<div class="parent-row">
<div class="child-row">
<input type="text" name="first_name">
<input type="text" name="last_name">
<select><option>Mr.</option><option>Mrs.</option></select>
<label>Name</label>
</div>
</div>
</form>
Also you can see on the codepen.