부모 내부의 마지막 자식이 아닌 특정 클래스가 있는 마지막 요소를 선택하려면 어떻게 해야 합니까?
<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;
}
그것은 다른 것이 있는 한 작동하지 않습니다.div.something댓글 목록의 실제 마지막 아이로 표시됩니다.이 경우 마지막 자식 선택기를 사용하여 마지막 모양을 선택할 수 있습니까?article.comment?
:last-child문제의 요소가 특정 유형의 요소의 마지막 자식이 아닌 컨테이너의 마지막 자식인 경우에만 작동합니다.그러기 위해서, 당신은
@BoltClock의 설명에 따르면, 이것은 마지막만 확인하는 것입니다.article클래스가 있는 마지막 요소가 아닌 요소.comment.
body {
background: black;
}
.comment {
width: 470px;
border-bottom: 1px dotted #f0f0f0;
margin-bottom: 10px;
}
.comment:last-of-type {
border-bottom: none;
margin-bottom: 0;
}<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>가장 정확한 답은 다음과 같습니다.:nth-child(또는, 이 특정한 경우에, 그 대응물.:nth-last-child대부분은 n을 사용한 계산을 기반으로 한 항목의 범위를 파악하기 위한 첫 번째 인수로만 이 선택기를 알고 있지만, 두 번째 인수인 "[임의의 CSS 선택기]"를 사용할 수도 있습니다.
이 선택기를 사용하면 시나리오를 해결할 수 있습니다..commentList .comment:nth-last-child(1 of .comment)
하지만 이 선택기는 현재 Safari에서만 구현되기 때문에 기술적으로 정확하다고 해서 사용할 수 있는 것은 아닙니다.
자세한 내용은 다음을 참조하십시오.
요소를 플로팅하는 경우 순서를 역순으로 변경할 수 있습니다.
예.float: right;대신에float: left;
그런 다음 이 방법을 사용하여 클래스의 첫 번째 자식을 선택합니다.
/* 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;
}
이제 클래스가 역순으로 정렬되었기 때문에 실제로 클래스를 LAST 인스턴스에 적용합니다.
다음은 사용자를 위한 작업 예제입니다.
<!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>
여기에 제게 도움이 된 의견을 제시해야 한다고 생각합니다.
사용하다:last-child필요한 장소에서 여러 번 반복하여 항상 마지막 자리를 차지합니다.
예를 들어 다음과 같습니다.
.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>더 뉴:has()유사 클래스(아직 모든 브라우저에서 지원되지 않음)를 사용하면 솔루션에 상당히 근접할 수 있습니다.
.class:has(+ :not(.class))
제한 사항은 다음과 같은 모든 요소를 찾을 수 있다는 것입니다..class그 뒤에 이 클래스가 없는 요소가 나옵니다.그러나 이는 질문의 사용 사례와 일치합니다.
이제 주의 깊게 사용하면 이 문제를 해결할 수 있습니다.:has()구체적으로:
/* switch out the {class} below */
.{class}:not(:has(~ .{class}))
유사한 기법을 사용하면 컨테이너에서 클래스가 마지막으로 발생하거나 요소 그룹 내에서 마지막으로 발생한 경우를 제외한 모든 항목을 선택할 수 있습니다.예제는 아래의 스니펫을 참조하십시오.
참고:has()현재 Chrome, Edge 및 Safari에서 지원되지만 Firefox에서는 지원되지 않습니다(2022년 1월).
/* last in group */
.class:has(+ :not(.class)) {
background: pink;
}
/* anything but last in container */
.class:has(~ .class) {
box-shadow: 0 0 0 1px #F00A;
}
/* last in container */
.class:not(:has(~ .class)) {
background: #0F0A;
}<div>
<div class="class">not-last</div>
<div class="class">not-last</div>
<div class="class">last-in-group</div>
<div>---</div>
<div class="class">not-last</div>
<div class="class">last-in-group</div>
<div>---</div>
<div class="class">last-class</div>
<div>---</div>
</div>이 솔루션은 어떻습니까?
div.commentList > article.comment:not(:last-child):last-of-type
{
color:red; /*or whatever...*/
}
2023년식
조금 검색해 본 결과 이것을 발견했습니다.
크롬 파이어폭스 에지 및 사파리에서 정상 작동, 다른 브라우저에서는 테스트되지 않음
/* target first element with class ".comment" */
:nth-child(1 of .comment) {
background-color: red;
}
/* target last element with class ".comment" */
:nth-last-child(1 of .comment) {
background-color: red;
}<div class="commentList">
<div class="something"> hello </div>
<article class="comment " id="com21">test</article>
<article class="comment " id="com20">test</article>
<article class="comment " id="com19">test</article>
<div class="something"> hello </div>
</div>클래스의 마지막 요소를 선택하는 두 가지 방법이 있습니다.
- 요소를 컨테이너 요소로 묶습니다.
html:
<div class="container">
<div class="member">Member</div>
<div class="member">Member</div>
<div class="member">Member</div>
<div>
CSS:
.container:last-child {
color: red;
}
- 를 사용하면 됩니다.
last-of-type.
html:
<div class="member">Member</div>
<div class="member">Member</div>
<div class="member">Member</div>
CSS:
.member:last-of-type{
color: red;
}
언급URL : https://stackoverflow.com/questions/7298057/how-can-i-select-the-last-element-with-a-specific-class-not-last-child-inside-o
'programing' 카테고리의 다른 글
| 마리아에서 JSON_TABLE이 있는 JSON 문자열 이스케이프 해제DB (0) | 2023.08.19 |
|---|---|
| 웹 사이트에서 herku 앱의 이름을 변경했습니다. 지금은 찾을 수 없습니다. (0) | 2023.08.14 |
| HttpContext입니다.현재의.부탁한다.Url. 반환되는 호스트? (0) | 2023.08.14 |
| if 문을 사용하여 div가 비어 있는지 확인 (0) | 2023.08.14 |
| Visual Studio 온라인의 원격 분기가 Visual Studio 2015 Team Explorer에 나타나지 않음 (0) | 2023.08.14 |