This question already has answers here:
How can I correctly select the first or the last child with CSS?
(2 answers)
Closed 3 years ago.
I am not fully understanding the behaviour of some css pseudo class selectors.
Looking at this simple html template:
<body>
<div>
<p>One</p>
<p>Two</p>
</div>
<div>
<p>Three</p>
<p>Four</p>
</div>
<div>
<p>Five</p>
<p>Six</p>
</div>
<div>
<p>Seven</p>
<p>Eight</p>
</div>
</body>
I do not understand why the following css would actually apply the style to the first div:
div:nth-child(1){
color: red;
}
and the following css won't apply the style to the last div:
div:nth-last-child(1){
color: red;
}
As far as I understand the nth-child selector will find the target, look for his parent and select the nth-child corresponding to the target.
Thanks for your help.
Andrea
The problem with div:nth-last-child(1) is that the last div is not the last child.
Some IDEs, such as jsFiddle, insert a script element in the document tree.
That script element is being targeted by :nth-last-child(1), which doesn't care about element type. It only looks at siblings.
You have to either:
get rid of the script element
use div:nth-last-child(2)
use div:nth-last-of-type(1)
jsFiddle demo
It does select the last div. But the HTML structure you posted is not a ' real ' one.
Where you test i bet there are some other elements that are siblings to those divs. Like <script> <footer> etc. So there is no nth-last-child(1) with the tag div inside body
So this works.
div:nth-child(1) {
color: red;
}
div:nth-last-child(1) {
color: red;
}
<section>
<div>
<p>One</p>
<p>Two</p>
</div>
<div>
<p>Three</p>
<p>Four</p>
</div>
<div>
<p>Five</p>
<p>Six</p>
</div>
<div>
<p>Seven</p>
<p>Eight</p>
</div>
</section>
But if you have another element after the last div, it won't work because now the div is the second to last element, not the last.
div:nth-child(1) {
color: red;
}
/* this doesn't work */
div:nth-last-child(1) {
color: red;
}
/* this works */
div:nth-last-child(2) {
color: red;
}
<section>
<div>
<p>One</p>
<p>Two</p>
</div>
<div>
<p>Three</p>
<p>Four</p>
</div>
<div>
<p>Five</p>
<p>Six</p>
</div>
<div>
<p>Seven</p>
<p>Eight</p>
</div>
<h1>
Hello there
</h1>
</section>
Related
How to change CSS for the Div in the 1st line having h3 text "Example Text1"
<div class="test">
<div>
<h3> Example Text1 </h3>
</div>
</div>
<div class="test">
<div>
<h3> Example Text2 </h3>
</div>
</div>
You can't apply a CSS rule based on the contents on an element with CSS only, with the exception of the :empty selector. :contains has been a suggested selector but has not been implemented.
You will either need to use JS, or apply CSS based on the ordering of the elements you have, for example in this case you could use
.test:first-of-type h3 {
color: red;
}
To only style the first h3 tag.
You could also look into something like :contains() from jQuery if you don't mind adding a dependency.
You can't give CSS to div having a child with specific text. But you can use :first-child CSS.
.test:first-child h3 {
color: red;
}
<div class="test">
<div>
<h3> Example Text1 </h3>
</div>
</div>
<div class="test">
<div>
<h3> Example Text2 </h3>
</div>
</div>
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>
How do you give a <p> tag element inside a third <div> tag element in an HTML source code a background color in using CSS Selectors?
You can use the :nth-child() selector for this.
.container div:nth-child(3) p {
color: red;
}
<div class="container">
<div>
<p>Hello</p>
</div>
<div>
<p>I'm</p>
</div>
<div>
<p>Bob</p>
</div>
</div>
So i've always had some misunderstanding with nth child and selectors.
I have been trying to figure it out but after searching I could not find the answer.
This is my css
p.hi:nth-of-type(1) {
color: blue;
}
This is my html
<div class"head">
<p class="hi">This is some text.</p>
</div>
<div class"head">
<p class="hi">This is some text.</p>
</div>
Currently this css is applying the color blue to both paragraphs. How do I make it only add it to the first? I know that if i put them both in the same div it works but what if it is nested several times. How do i select only one?
Take a look at this fiddle.
http://jsfiddle.net/x9jkq0x3/
You can do it like this Fiddle
div:nth-of-type(1) p.hi {
color: blue;
}
<div class="head">
<p class="hi">This is some text.</p>
</div>
<div class="head">
<p class="hi">This is some text.</p>
</div>
you can use first-child to class head instead class hi
this is the example Fiddle