<div class="commentList">
<article class="comment " id="com21"></article>
<article class="comment " id="com20"></article>
<article class="comment " id="com19"></article>
<div class="something"> hello </div>
</div>
Vreau pentru a selecta #com19
?
.comment {
width:470px;
border-bottom:1px dotted #f0f0f0;
margin-bottom:10px;
}
.comment:last-child {
border-bottom:none;
margin-bottom:0;
}
Care nu funcționează atâta timp cât eu nu am un alt div.ceva ca real ultimul copil în commentList. Este posibil să se utilizeze ultimul copil selector în acest caz, pentru a selecta ultimul aspect de articol.comentariu
?
[jsFiddle](
):last-child
funcționează numai atunci când elementul în cauză este ultimul copil al containerului, nu ultimul de un anumit tip de element. Pentru că, vrei :ultima-de-tip
Ca pe @BoltClock's comentariu, aceasta este doar de verificare pentru ultimul "articol" element, nu în ultimul element cu clasa.comentariu`.
html
<div class="commentList">
<article class="comment " id="com21"></article>
<article class="comment " id="com20"></article>
<article class="comment " id="com19"></article>
<div class="something"> hello </div>
</div>
css
body {
background: black;
}
.comment {
width:470px;
border-bottom:1px dotted #f0f0f0;
margin-bottom:10px;
}
.comment:last-of-type {
border-bottom:none;
margin-bottom:0;
}
Dacă sunteți plutind elementele pe care le poate inversa ordinea
de exemplu float: right; "în loc de" float: stânga;
Și apoi, utilizați această metodă pentru a selecta primul copil dintr-o clasă.
/* 1: Apply style to ALL instances */
#header .some-class {
padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
padding-right: 20px;
}
Aceasta este de fapt aplicarea la clasă în ULTIMĂ instanță, doar pentru că-l's acum în ordine inversă.
Aici este un exemplu de lucru pentru tine:
<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
border: 1px solid red;
padding-right: 0;
}
#header .some-class~.some-class {
border: 0;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
<img src="some_image" title="Logo" class="lfloat no-border"/>
<ul class="some-class rfloat">
<li>List 1-1</li>
<li>List 1-2</li>
<li>List 1-3</li>
</ul>
<ul class="some-class rfloat">
<li>List 2-1</li>
<li>List 2-2</li>
<li>List 2-3</li>
</ul>
<ul class="some-class rfloat">
<li>List 3-1</li>
<li>List 3-2</li>
<li>List 3-3</li>
</ul>
<img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>
Cred că cel mai corect răspuns este: Folosesc:nth-child(sau, în acest caz specific, omologul său
:nth-ultima-copil). Mai știu doar acest selector de primul argument pentru a apuca o serie de articole bazate pe un calcul cu n, dar poate lua, de asemenea, un al doilea argument "de [orice selector CSS]".
Scenariul ar putea fi rezolvate cu acest selector: .commentList .comentariu:nth-ultima-copil(1 din .comentariu)
Dar fiind corectă punct de vedere tehnic nu't înseamnă că puteți folosi, totuși, pentru că acest selector este ca de acum doar puse în aplicare în Safari.
Pentru a citi mai departe:
Ceva care cred că ar trebui să fie comentat aici care a lucrat pentru mine:
Folosesc:last-child` de mai multe ori, în locurile necesare, astfel încât acesta devine întotdeauna ultimul dintre ultimii.
Ia asta, de exemplu:
.page.one .page-container .comment:last-child {
color: red;
}
.page.two .page-container:last-child .comment:last-child {
color: blue;
}
<p> When you use .comment:last-child </p>
<p> you only get the last comment in both parents </p>
<div class="page one">
<div class="page-container">
<p class="comment"> Something </p>
<p class="comment"> Something </p>
</div>
<div class="page-container">
<p class="comment"> Something </p>
<p class="comment"> Something </p>
</div>
</div>
<p> When you use .page-container:last-child .comment:last-child </p>
<p> you get the last page-container's, last comment </p>
<div class="page two">
<div class="page-container">
<p class="comment"> Something </p>
<p class="comment"> Something </p>
</div>
<div class="page-container">
<p class="comment"> Something </p>
<p class="comment"> Something </p>
</div>
</div>