I have the following html:
<form action="">
<div class="cont">
<div class="form-group">
<input type="text">
</div>
</div>
<div class="cont">
<div class="form-group">
<input type="text">
</div>
</div>
<div class="cont">
<div class="form-group">
<input type="text">
</div>
</div>
</form>
I would like to select only the first form group.
This is easily achievable when .form-group is not contained by .cont, working example here.
I've been trying with what's below and similar things:
form .cont .form-group:first-child{
outline: 1px solid red;
}
I understand why this doesn't work, easily visualized here.
Here's a live explample., how can I select only the first form group?
Based on your HTML in the second example, you could select the first .form-group element in the first .cont element:
Updated Example
form .cont:first-child .form-group:first-child {
outline: 1px solid red;
}
If there aren't multiple .form-group elements nested in the .cont element, like in your third example, you could omit the :first-child pseudo class from the .form-group element:
Updated Example
form .cont:first-child .form-group {
outline: 1px solid red;
}
Of course, this won't work in all instances, such as when the first .cont element doesn't contain a .form-group element. It's worth pointing out that your selector form .cont .form-group:first-child wasn't working because the .form-group elements aren't sibling children elements.
Related
I have a containing div that has three divs inside. I want to style only the two divs that contain the radio input. Without using class names, is it possible to select those two divs?
If not, how do I select just the radio inputs and style those? Here's my attempt, with non-working CSS:
.container > div > input[type="radio"] {
border:1px solid green;
}
<div class="container">
<div>
<input type="radio" id="22" name="SetFour">
<label for="22"><span>Selection One</span></label>
</div>
<div>Some Random Div</div>
<div>
<input type="radio" id="23" name="SetFour">
<label for="23"><span>Selection Two</span></label>
</div>
</div>
CodePen for reference
You can use nth-of-type. But do this only if you have no alternatives and are sure that this block will not change in the future.
.container > div:nth-of-type(1),
.container > div:nth-of-type(3) {
border:1px solid green;
}
The selector selects the radio buttons, but the radio inputs don’t support the border property.
In case you want to select the divs, not the inputs, use classes; although there is a :has() pseudo‐class in the specifications, no major browser currently supports it.
https://caniuse.com/css-has
https://www.w3.org/TR/selectors-4/#relational
you have to set them a class.
write the similar class and styling.
or their id.
Hi i want to select first label element within div with classname form_fields.
Below is the code,
<form>
<div className="form_fields">
<span>first span</span>
<div>first div</div>
<label>
<span>Name</span>
</label>
<label>Description</label>
</div></form>
What i have tried?
.fields label:first-child {
margin: 20px;
}
But this doesnt apply to the first label inside div of class form_fields. How can i do it? thanks.
Try with first-of-type pseudo-selector:
.form_fields label:first-of-type {
margin: 20px;
}
.form_fields label:nth-of-type(1) {
margin: 20px;
}
I can imagine you are looking to do more than just that but its a great start to ask around here. In HTML and CSS you will find there are several ways to achieve the same results and the path you choose will often be based on personal preferences. In this specific case you have just concept mistakes but you are definitively on the right track.
in your tag, you should change className o just "class".
in your style, change :first-child to :first-of-type
<form>
<div class="form_fields">
<span>first span</span>
<div>first div</div>
<label>
<span>Name</span>
</label>
<label>Description</label>
</div>
</form>
<style>
.form_fields label:first-of-type {
margin: 20px;
}
</style>
You can choose between 2 pseudo-class :
The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements. See doc
The :nth-of-type(1) CSS pseudo-class matches elements of a given type, based on their position among a group of siblings. See doc
Solution with :first-of-type :
.form_fields label:first-of-type {
background:red;
}
<form>
<div class="form_fields">
<span>first span</span>
<div>first div</div>
<label>
<span>Name</span>
</label>
<label>Description</label>
</div>
</form>
.form_fields label:nth-of-type(1) {
color: blue;
}
I have an form in html where I want to add the tooltip when the user hover on some input field. The tooltip data is however fetched from json and is dynamic. How do I do this?
I tried the following:
<div data-balloon="{{ obj.info }}" data-balloon-pos="up">
<input class="form-control" type="text" [id]="obj.key">
</div>
But it throws the template parse error:
Can't bind to 'balloon' since it isn't a known property of 'div'.
I also tried:
<div [data-balloon]="obj.info" data-balloon-pos="up">
<input class="form-control" type="text" [id]="obj.key">
</div>
How shall I proceed?
You could simply use a pseudo-element with only CSS, to display any of your attribute:
div[data-balloon] {
float:left;
}
div[data-balloon]:hover::after {
content: attr(data-balloon);
border: 1px solid black;
border-radius: 8px;
background: #eee;
padding: 4px;
}
<div data-balloon="My data here" data-balloon-pos="up">
<input class="form-control" type="text" [id]="obj.key">
</div>
If there is nothing more in your div element, it should work fine to use the :hover on the div.
If there is something more… You may want to move your data-balloon to your input element, as “parent” selection is not possible in CSS.
Hope it helps.
I just added a link tag after an input text type but when I view the site, the link goes on top of the input as you can see on the photo and don't see anything wrong.
Perhaps there is a reset css that I dont know.
a.activate {
background-color: pink;
padding: 10px;
}
<div class="cont bonus">
<h3>You have no active Bonus on your account</h3>
<h4>Got a Bonus code?</h4>
<input class="input" type="text" name="bonuscode" placeholder="Bonus Code">
<br>
<div id="activate">
<a class="activate" href="#">Activate</a>
</div>
</div>
That's because your link is an inline element. The padding you've added behaves differently for inline elements than block elements.
Set your link to display: inline-block;
a.activate {
background-color: pink;
padding: 10px;
display: inline-block;
}
<div class="cont bonus">
<h3>You have no active Bonus on your account</h3>
<h4>Got a Bonus code?</h4>
<input class="input" type="text" name="bonuscode" placeholder="Bonus Code">
<br>
<div id="activate">
<a class="activate" href="#">Activate</a>
</div>
</div>
An inline element occupies only the space bounded by the tags that define the inline element.
- MDN Inline Elements.
Just add display block to input. No need to change anything.
input{
display:block;
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Highlight label if checkbox is checked (html/css)
I would like label to get a red border if radio is checked.
Code so far:
HTML:
<center style="margin-top:20px;">
<label class="big">
This is a box 1
<input name="radio-group1" type="radio" />
</label>
<br/>
<label class="big">
This is a box 2
<input name="radio-group1" type="radio" class='sex' />
</label>
</center>
CSS:
.big {
display:block;
width:100px;
height:100px;
background-color:gainsboro;
cursor:pointer;
}
.big:hover {
border:1px solid blue;
}
No JS solutions please. I have been trying with sibling and children selectors but unsuccesfuly.
JSFIDDLE: http://jsfiddle.net/QqVCu/10/
You would have to rearrange the HTML so the label/red-border-element comes after the radio.
HTML
<center style="margin-top:20px;">
<div class="big">
<input id="box1" name="radio-group1" type="radio" />
<label for="box1">This is a box 1</label>
</div >
<br/>
<div class="big">
<input id="box2" name="radio-group1" type="radio" />
<label for="box2">This is a box 2</label>
</div >
</center>
CSS
.big {
display:block;
width:100px;
height:100px;
background-color:gainsboro;
cursor:pointer;
position: relative;
}
.big:hover {
border:1px solid blue;
}
label {
width: 100%;
height: 100%;
display: block;
}
input[type="radio"] {
position: absolute;
top: 20px;
left: 50%;
}
input[type="radio"]:checked + label {
border: red 1px solid;
}
http://jsfiddle.net/QqVCu/12/
But it starts getting weird. A little javascript wouldn't hurt.
edit: this version is a little cleaner
You can use :checked selector, but this will only work for the checkbox itself. Otherwise there is no way to do it in pure CSS - you will have to resort to JavaScript (which I do realize you said you wanted to avoid - but pure CSS won't do it).
What you are trying is not possible with current structure of your html. There is no such thing as a parent selector. There is a sibling selector though, wich could be used to accomplish what you are after. First you would have to restructure your html to something like this:
<div>
<input name="radio-group1" id="box1" type="radio" />
<label class="big" for="box1">
This is a box 1</label>
</div>
<div >
<input name="radio-group1" id="box2" type="radio" class='sex' />
<label class="big" for="box2" >
This is a box 2</label>
</div>
I made label and input siblings in stead of parent/child. They will still work the same thanks to their id and for attributes. I also changed their order to be able to use the next sibling selector. The extra div is required to do some absolute positioning to put them back in the same order you had in your fiddle.
Next i added a few lines of css. The real magic happens here:
div input:checked+label {
border: 1px solid red;
}
This will selected all 'next sibling' of an input that is checked and has a div as a parent. You could further finetune this to only work on radio's and in reality i would add a class to the wrapper div, but this is just a 'proof of concept'.
The rest of the css i added is just some positioning to mimic the layout you had in your example. This will also need some finetuning.
The working example is here: http://jsfiddle.net/QqVCu/14/