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
}
Related
<div id="titles">
<p> title1</p>
<p> title2</p>
<p> title3</p>
</div>
div title is our container here the 3 paragraphs inside need to be replaced with the span tag
is that possible doing this with only html and css
No. You cannot change a tag using CSS. You can change the behaviour, like display:inline for the Ps or display:block for the SPANs
#titles p {
display: inline;
}
#spans span {
display: block;
}
<div id="titles">
<p>title1</p>
<p>title2</p>
<p>title3</p>
</div>
<hr/>
<div id="spans">
<span>title1</span>
<span>title2</span>
<span>title3</span>
</div>
To get the last p to have no margin, you could do last-of-type, however this doesn't work once you start having p nested within other divs.
Is it possible to have specific css for the last p within a specified class?
For example:
<div class="my-container">
<div class="banner-message1">
<p>1</p>
</div>
<div class="banner-message2">
<p>2</p>
</div>
</div>
To specifically make it so that the <p>2</p> has certain styling, but not the <p>1</p>
The css of div.my-container p:last-of-type would seemingly apply to both <p>1</p> and <p>2</p> since they are the last p within the parent div (in this instance banner-message1 and banner-message2)
https://jsfiddle.net/hygzq3ab/
Here's a jsfiddle, which has both a margin-bottom on the last p tag and then also padding of the container, so that the last p element looks essentially like it has a double bottom margin. last-of-type does not seem to work since it is contained within other div classes.
Example code for that would be div.my-container p:last-of-type { margin-bottom:0; }
If the <p> is always contained in a <div> then you could target that paragraph with
.my-container > div:last-of-type p {
margin-bottom: 0;
}
You need to target the paragraph inside the last div (also :last-child instead of :last-of-type would work as well in this specific example).
But if your last <p> is not always contained in a <div> then you could target it with
.my-container > div:last-child p,
.my-container > p:last-child {
margin-bottom: 0;
}
Here you must use :last-child instead of :last-of-type or — in case the last <p> is not wrapped in its own <div> — you will also target the paragraph contained in the last <div>
Is this what are you asking for?
html (your fiddle does have alot same ids of same element)
<div class="my-container">
<div class="banner-message">
<p>
1
</p>
</div>
<div class="banner-message">
<p>
2a
</p><p>
2b
</p>
</div>
<div class="banner-message">
<p>
aaa
</p>
</p>
<p>
3
</p>
</div>
</div>
and css:
.banner-message:last-child p:last-child {
color: red
}
Should do the trick
You also should use that: last:child
.my-container > div:last-child p {
margin-bottom: 0;
}
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>
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
On hover of child, change background color of parent container (CSS only)
(3 answers)
Closed 4 years ago.
so i have a html page with a body and the following structure
<body>
<h1>Hello</h1>
<div>
<div>
// editable area -->
<div id="b">
<h1>Bye</h1>
</div>
// <--
</div>
</div>
</body>
I want to style the <body> but can only access and edit the <div> with id "b" and add a custom css file. Since the css file is used for more than one html files i can't just directly style the <body>.
Is there a possibility to style a <body> with a specific child element (child of a child) with a specific id?
You could add a specific class or id to a html page of your site(set of html pages), this way, you will only be doing CSS changes for your specific html page then access other elements as in the snippet below:
#Body_id{
background-color: yellow;
}
#Body_id div{
background-color: pink;
}
#Body_id div div{
background-color: red;
}
#Body_id div div #unique{
background-color: green;
color:white;
}
#unique{
background-color: black !important;
}
<body id="Body_id">
<h1>Hello</h1>
<div>
<div>
<div id="unique">
<h1>H1 in level 3</h1>
This is a level 3 div
</div>
This is a level 2 div
</div>
This is a level 1 div
</div>
</body>
You can give the body a ID
Then you can style it like this:
#Body_id{
background-color: yellow;
}
#divFirst{
background-color: red;
}
#divSecond{
background-color: blue;
}
#b{
background-color: green;
}
<body id="Body_id">
<h1>Hello</h1>
<div id="divFirst">
<h1>DivFirst</h1>
<div id="divSecond">
<h1>DivSecond</h1>
<div id="b">
<h1>Bye</h1>
</div>
</div>
</div>
</body>
This question already has answers here:
How can I select all elements except those inside divs with particular classes
(2 answers)
Closed 3 years ago.
How can I select all divs inside a div except divs which are nested inside one class?
For example:
#test div :not(.testAgain) div {
background: #f00;
}
<div id="test">
<div>
Some Content
</div>
<div>
Some Content
<div class="testAgain">
<div>Some Content again</div>...<div>Test Content</div>
</div>
</div>
</div>
How can I select all divs inside the #test div except the divs that are inside the .testAgain div, i.e. any CSS that I apply should apply to all divs except the content inside the .testAgain div.
I've tried:
#test div :not(.testAgain) div{
/* some CSS Styling */
}
But this doesn't seem to work. (no jQuery please!)
EDIT: There are actually dozens of nested divs ... and the .testAgain div is somewhat 6-7 levels deep down the main (#test) div.
You can do it with the # (id) selector:
#test div { /* all div's inside the #test */
background: #00f;
}
#testAgain div { /* all div's inside the #testAgain */
background: #f00;
}
<div id="test">
<div>
Some Content
</div>
<div>
Some Content
<div id="testAgain">
<div>Some Content again</div>...<div>Test Content</div>
</div>
</div>
<div>
Some Content
<div>
Some Content
</div>
</div>
<div>
Some Content
<div>Some Content
<div>Some Content</div>
</div>
</div>
</div>
div.test > div
This selects all the direct descendants of div class test.