<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>
Я хочу выбрать #com19
?
.comment {
width:470px;
border-bottom:1px dotted #f0f0f0;
margin-bottom:10px;
}
.comment:last-child {
border-bottom:none;
margin-bottom:0;
}
Что не работает пока у меня есть еще одна див.что-то как фактическое последним ребенком в commentList. Можно ли использовать последний-ребенок селектор в этом случае для выбора последнего появления статья.комментарий
?
[jsFiddle](
)только последнего ребенка работает, когда элемент в вопрос является последним потомком контейнера, не последним из элементов определенного типа. Для этого, вы хотите :последний-из-тип
Как за @BoltClock'ы комментарий, это только проверка для элемента последняя "статья", а не последний элемент с классом .комментарий
.
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>
УСБ
body {
background: black;
}
.comment {
width:470px;
border-bottom:1px dotted #f0f0f0;
margin-bottom:10px;
}
.comment:last-of-type {
border-bottom:none;
margin-bottom:0;
}
Если вы не плавающие элементы можно поменять порядок
т. е. поплавок: право; "вместо" плавать: слева;`
И затем использовать этот метод, чтобы выбрать первый-ребенок класса.
/* 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;
}
Это на самом деле, применяющие класс в последней инстанции только потому, что она's теперь в обратном порядке.
Вот рабочий пример для вас:
<!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>
Я думаю, что наиболее правильный ответ: использовать через:nth-ребенок (или, в данном конкретном случае, его коллега
:й-последний-ребенок`). Большинство знает только этот селектор на его первый аргумент, чтобы захватить различные элементы, основанные на расчете с n, но также может принимать второй аргумент, что ""из [любой CSS-селектор]&;.
Ваш сценарий может быть решена с помощью этого селектора: .commentList .комментарий:го-последнего-ребенка(1 из .комментарий)
Но, будучи технически правильно не'Т означает, что вы можете ее использовать, потому что этот селектор как сейчас реализован только в сафари.
Для дальнейшего чтения:
То, что я думаю, следует говорить здесь, что работал для меня:
Использовать:в прошлом-ребенок несколько раз в тех местах, необходимо, чтобы он всегда получает последние из последних.
Возмите к примеру:
в
.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>
в
Что об этом решении?
div.commentList > article.comment:not(:last-child):last-of-type
{
color:red; /*or whatever...*/
}