Last child doesn't work as expected with p tag
I have a problem using :last-child
with a specific class for my tag p
, but works fine with other classified tags p
, so here's my code:
<div class="port-container">
<div class="header"><h1>Portfolio</h1></div>
<p class="header" ref="who">Who am I?</p>
<p class="info" ref="who">...</p>
<p class="header" ref="what">What do I do?</p>
<p class="info" ref="what">...</p>
<p class="header" ref="projects">Current Projects?</p>
<p class="info" ref="projects">...</p>
<p class="header" ref="conntact">Contact me</p>
<p class="info" ref="conntact">...</p>
</div>
<img class="bg-button pull-center" bg-toggle="false" src="./assets/icon-bg_white.png" title="Toggle Background" />
My CSS:
.pull-center {
position:absolute;
margin:auto auto;
top:0;bottom:0;
left:0;right:0;
}
div.port-container {
width:975px;
height:auto;
overflow:auto;
margin:auto auto;
}
div.port-container > .bg-toggle {
background-color:rgba(44,62,80,0.25);
border-color:rgba(0,0,0,0.5) !important;
}
div.port-container > div.header {
height:200px;
line-height:200px;
border:solid 1px #FFF;
border-top-left-radius:5px;
border-top-right-radius:5px;
text-align:center;
color:#FFF;
}
div.port-container > p.header {
padding:10px;
border-bottom:solid 1px #FFF;
border-left:solid 1px #FFF;
border-right:solid 1px #FFF;
color:#FFF;
cursor:pointer;
}
div.port-container > p.header:last-child { /*<----- Issue */
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
div.port-container > p.header.active {
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
}
div.port-container > p.info {
padding:10px;
border:solid 1px #FFF;
border-top:none;
display:none;
color:#FFF;
}
div.port-container > p.info:last-child { /*<----- Works fine */
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
img.bg-button {
width:32px;
height:32px;
top:auto;left:auto;
}
note: the ref attribute is used in my jQuery
TL; DR:
This works great:
div.port-container > p.info:last-child {
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
But this is not the case:
div.port-container > p.header:last-child {
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
source to share
p.info:last-child
matches all elements p.info
that are also the last children of their parent.
In your markup, p.header
they are not the last children of their parent, whereas p.header
matching different elements p.header:last-child
will not match.
Unfortunately the selector is :last-of-its-class
missing. Consistency is not possible unless you make some assumptions about the structure of the HTML. I did one:
p.header:nth-last-child(2) { }
It matches all elements p.header
that are the second to last children of their parent. Note that this requires CSS3 selector support.
p { background: #CCC; }
p.info:last-child { background: #FC0; }
p.header:nth-last-child(2) { background: #FC6; }
<div class="port-container">
<div class="header"><h1>Portfolio</h1></div>
<p class="header" ref="who">Who am I?</p>
<p class="info" ref="who">...</p>
<p class="header" ref="what">What do I do?</p>
<p class="info" ref="what">...</p>
<p class="header" ref="projects">Current Projects?</p>
<p class="info" ref="projects">...</p>
<p class="header" ref="conntact">Contact me</p>
<p class="info" ref="conntact">...</p>
</div>
source to share
Because it is p.header
not the last-child ... it is always p
with the class info
.
Selector - last-last (node) not last with class ""
The class name here just works as a conditional, so if it last-child
has a class info
, then its style.
To clarify if you have this selector:
div.port-container> p.header: last-child
All are conditional for item targeting:
- If it is inside a container
div
with a classport-container
- And this is a direct child event
>
- And a tag
p
with a classheader
- And this
last-child
source to share
You have the wrong concept of the selector.
The fact that you have used a class selector does not filter the selection. In css, combined selectors work like a condition &&
, so:
p.header:last-child
Will target a tag <p>
that is both a class element .header
and the last child of its container.
Unfortunatelly
Can't get the last element of some class
source to share
As everyone else has stated, your css selector won't work because it p.header:last-child
has to be the last child period. You can get around this using jQuery.
CSS
.port-container > .last-header {
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
JS:
$('.port-container > p.header:last').addClass('last-header');
source to share