How do I style the nth button in this HTML:
<div class="k-klas">
<div>
<p>
<button>Inschrijven</button>
</p>
<div>
<div>
<p>
<button>Inschrijven</button>
</p>
</div>
<div>
<p>
<button>Inschrijven</button>
</p>
</div>
width this CSS:
.k-klas button:nth-child(1) {background:#f00;}
.k-klas button:nth-child(2) {background:#0f0;}
both buttons will be red...
Your HTML is not correct. You need to close the first tag of div
And you need to use nth-child() for div instead of button.
.k-klas div:nth-child(1) button {background:#f00;}
.k-klas div:nth-child(2) button {background:#0f0;}
.k-klas div:nth-child(3) button {background:#000;}
<div class="k-klas">
<div>
<p>
<button>Inschrijven 1</button>
</p>
</div>
<div>
<p>
<button>Inschrijven 2</button>
</p>
</div>
<div>
<p>
<button>Inschrijven 3</button>
</p>
</div>
</div>
The best I've come up with is :
.k-klas div:nth-child(1) button {background:#f00;}
.k-klas div:nth-child(2) button {background:#0f0;}
Div's you are looking not buttons.
You're not targeting the buttons properly.
The buttons are always the first child. That is to say, the first (and only) child of the p tags are the buttons.
You need to target the divs they live in, since it's those that have multiple siblings.
.k-klas div:nth-child(1) button { background:#f00; }
.k-klas div:nth-child(2) button { background:#0f0; }
Try to target the immediate child of .k-klas div.
.k-klas>div:nth-child(1) button{
background: #f00;
}
.k-klas>div:nth-child(2) button{
background: #0f0;
}
'>' selector is used to select the immediate child in css.
Related
This question already has answers here:
How to make nth-child work with nested tags?
(2 answers)
Closed 2 years ago.
I tried hr:last-child but it didn't work. Here's my HTML structure:
<div>
<hr />
</div>
<div>
<hr />
// hide this
</div>
It worked only if I have hr as siblings.
whilst you can target it by targetting the parent divs and using the direct-sibling combinator and then the hr inside it would be far better to either add classes or better yet - change the html. Also I would suggest csss for adding things like border-bottom, rather than hr html elements.
but here goes - target the divs that are siblings - then in the div that is not the first sibling - target the hr and hide it with display:none. still not the way i would do it though.
I have added text and padding in the divs to demonstre the hr is removed in the second option.
EDIT - actually - just thought of a simpler way .... but only if you want to hide them in ALL divs that are not the first one.
.hide-hr div:not(:first-child) hr{display:none};
div {
padding: 5px
}
p {
margin: 0;
}
div + div {
border-top-width:0;
}
.hide-hr {
margin-top: 15px;
}
.hide-hr div + div hr {
display: none;
}
<p> the following shows the hr in the second div</p>
<div class="show-hr">
<div>
<p>div 1</p>
<hr/>
</div>
<div>
<p>div 2</p>
<hr/>
</div>
</div>
<p> the following hides the hr in the second div</p>
<div class="hide-hr">
<div>
<p>div 1</p>
<hr/>
</div>
<div>
<p>div 2</p>
<hr/>
</div>
</div>
You can just select the last div insted, and hide the hr in that
div {
border :solid 1px red;
padding: 10px
}
hr {
background: blue;
}
div + div {
border-top-width:0;
}
section div:last-child hr {
display: none;
}
<section>
<div>
<hr/>
</div>
<div>
<hr/>
</div>
</section>
Use :last--of-type
last-of-type
hr:last-of-type {
css here
}
Say I had: the following code. How could I select only the third div and style the 2 paragraphs inside assuming there are no classes or id's?
<div>
<h1></h1>
<p></p>
</div>
<div>
<h2></h2>
<input>
<div>
<p></p>
<input>
</div>
<div>
<h4></h4>
</div>
you can try to type in the CSS file for instance:
div:last-of-type
also if you need to target the second div you can get it by:
div:nth-of-type() in between the parances you can type the number you want to target
For inheritable properties, you may just specify the number of the child of the <div> element. e.g. div:nth-child(3)
For non-inheritable properties, you need to have a higher level of specificity to target the <p> elements. e.g. div:nth-child(3) p
To check if the property is inheritable, you may check the list here.
/* for inheritable properties such as color*/
div:nth-child(3) {
color: red;
}
/* for non-inheritable properties such as border*/
div:nth-child(3) p {
border: thin solid skyblue;
}
<div>
<h1> First
</h1>
<p>
</p>
</div>
<div>
<h2> Second
</h2>
<input>
<div>
<p> Third
</p>
<input>
</div>
<div>
<h4> Fourth
</h4>
</div>
I need to change the color of the text which is not the immediate element of the target element.
It is the child of another parent div. How do I target an outer element through css?
In the demo you can see another text' color changes on mouse over ofdiv1 span, likewise I want to change the color of div2 span
In my code, how can I target the div2's span (not the the div2 coz there will be many other elements inside div 2)?
PS - Need to target a child element of another parent from another parent element's child element.
HTML
<div class="div1">
<span>hover me</span>
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span>How to change this text color on div1 span hover?</span>
</div>
Demo
If you only want to use CSS, you have to assign the :hover to .div1 in order to select .div2 in your hover (as you can not select a parent in CSS):
.div1:hover .another_txt {
color: red;
}
.div1:hover + .div2 span{
color: red;
}
<div class="div1">
<span>hover me</span>
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span>How to change this text color on div1 span hover?</span>
</div>
You can use JavaScript / JQuery for this. To my knowledge you cannot achieve it in CSS.
HTML:
<div class="div1">
<span id="hover">hover me</span>
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span id="target">How to change this text color on div1 span hover?</span>
</div>
JS:
$(document).ready(function() {
$("#hover").hover(function() {
$("#target").css("color", "red");
})
})
Here is the live demo: https://jsfiddle.net/vf8ab8yh/1/
To target the span in the div2 when div1is hovered use the following CSS selector:
.div1:hover+.div2 span{
color: pink;
}
Demo:
.div1:hover+.div2 span{
color: pink;
}
<div class="div1">
<span>hover me</span>
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span>How to change this text color on div1 span hover?</span>
<div>Don't change this</div>
</div>
The best you can do is to wrap the span in another wrapper (you can also not wrap it,your choice) then use the ~ selector.
The use of ~ is to select all the second element (.div2) preceded by the first element (.newDiv). You can read more from here.
The element1~element2 selector matches occurrences of element2 that are preceded by element1.
Both elements must have the same parent, but element2 does not have to be immediately preceded by element1.
.newDiv:hover~.div2>span {
color: pink;
}
<div class="newDiv"><span>hover me</span></div>
<div class="div1">
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span>How to change this text color on div1 span hover?</span>
</div>
The element1~element2 selector matches occurrences of element2 that are preceded by element1.
Both elements must have the same parent, but element2 does not have to be immediately preceded by element1.
css selectors
.div1:hover~.div2 {
color: red
}
<div class="div1">
<span>hover me</span>
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span>How to change this text color on div1 span hover?</span>
</div>
I want to know if there's ability to change CSS of element that is not direct child or sibling of element hovered.
<style>
.one:hover .two {
color:red;
}
</style>
<div>
<div class="one">
111
</div>
</div>
<div class="two">
222
</div>
http://jsfiddle.net/hgd0drky/
Unless you add a parent element to both and make them have Child / Sibling relationship it is not possible purely based on CSS.
You will need javascript, however to demonstrate how easy this can be, I shall make up CSS
http://jsfiddle.net/hgd0drky/1/
<div class="one">
<div >
111
</div>
<div class="two">
222
</div>
</div>
CSS
.one:hover div {color:red;}
.one:hover .two {color:red;}
Which is just an extension of your code.
How can I choose only the first button in this code?
It's even more nested in my case, but this code is also a problem for me.
<div class="container">
<div class="some_class">
<span>abc</span>
<button class="btn">...</button>
</div>
<div class="some_class">
<span>abc</span>
<button class="btn">...</button>
</div>
<div class="some_class">
<span>abc</span>
<button class="btn">...</button>
</div>
</div>
You would use the :first-child pseudo class.
EXAMPLE HERE
.container .some_class:first-child button {
background:black;
}
Alternatively, assuming that the markup can be different, you might need to use something like this to ensure that the first button is selected even if .some_class isn't the first element. (example)
.container :first-child button {
background:black;
}
This will work
.container .some_class:first-child button {
/* rules here */
}
http://jsfiddle.net/cUu82/1/
you could just use .some_class:first-child button as well if these are the only ones on the page
The first-child (https://developer.mozilla.org/en/docs/Web/CSS/:first-child) will select the first some_class div which was probably your only issue