:last-child 의 특정 class에서 적용 안되나요 ?
ul li.fdb_itm.clear.AAAA:last-child{블라블라;}
<li class="fdb_itm clear AAAA"> a</li>
<li class="fdb_itm clear AAAA"> b</li>
<li class="fdb_itm clear"> c</li>
<li class="fdb_itm clear "> d</li>
이런식으로 반복이 되는데요. AAA class 는 무조건 처음에 나옵니다.
:first-chid 로 선택했을때는 첫번째가 잘 선택이 됩니다.
그런데 제가 필요한 AAAA 클래스를 가진 것의 마지막인 :last-child 는 적용이 안되는데요.
이런 케이스는 적용이 어렵나요?
댓글 21
ul .AAAA:last-child
ul li.AAAA:nth-last-child(1){블라블라;}
AAAA 클래스가 초반부에만 있고 뒤쪽으로는 없는 구조라서 그럴까요?
구조적인 한계로 안되는건지 궁금하네요.
AAAA가 더 있는지 뒤로 더 찾다가 못찾는건 아닌지...
거꾸로 마지막부터 세는거가 안되서 문제에요. 이게 갯수가 지정된게 아니라서요.
혹시 베스트댓글 애드온에 의해 생성되는 li 이라서 그럴까요... 뭔가 css가 동작하는 시점 의문제라던가요...
li를 나타내는게 저거인거같은데 중복사용한거같아서요
first
첫번째,두번째
이렇게는 잘 동작하는데요.
last 가 안되요..
<ui>
<li>
<li>
<div>
</ul>
이런 식일 경우
li:last-child 같은 선택자가 안먹힙니다.
li를 last-child로 지정하긴 했지만 ul 태그 안에서 last-child는 div 이기 때문에 그렇습니다.
스케치북 코멘트 출력부분인데요.
말씀 하신 것처럼 ul 안에 div 는 따로 있지 않아서요.
아 그리고 한 박스에 안에 요소가 하나만 있는 경우 last-child가 안되고 first-child로만 인식됩니다.
지금 필요한 맨 마지막에 해당하는 last-child 만 안먹는 상황입니다. 뭔가 트릭이 필요하거나 혹은 다른 방법이 필요해 보이는 시점입니다.
<article />
<article />
<div />
<div />
</section>
같은 경우 article:last-child 는 사용 불가능합니다. 태그 한정으로 article:last-of-type 을 사용할 수는 있습니다.
다만, 웹지기님이 원하시는 li.AAAA 같은 경우 last-of-class(가칭)을 사용해야 하는데,
이게 포함된 브라우저는 없는걸로 알고 있습니다.
굳이 CSS를 사용해야 하는게 아니라면 JS를 사용하는 방법도 있지 않을까 싶은데요.
jQuery를 사용하자면...
.last-child에 대한 스타일시트를 CSS에 추가한 뒤,
$("ul li.fdb_itm.clear.AAAA").last().addClass("last-child"); 로 last-child 클래스를 넣어주면 될거같은데..
웹지기님 경우는 li.AAAA:last 가 ul *:last 가 아니기 때문에 작동하지 않은거죠...
ul > li.AAAA + li:not(.AAAA) { ... } 를 사용하면 마지막 .AAAA 다음의 li 를 가져올 수는 있는데,
결국 HTML 수정이 한번은 필요할테니... jQuery가 HTML를 수정하지 않고 사용하는 방법중에선 제일 간단하겠네요.
아래처럼 셀렉터를 사용한 last-of-type도 한번 시도 해 보세요.
[class~='AAAA']:last-of-type {블라블라;}
요거 해봤는데 안되더라구요~ 일단 jQuery 로 적용해 놓았습니다. 감사합니다.
그니까 li 안에 class를 지정한건데 마지막에 위치하지 않고 뒤에 li들이 더 있어서 안되는 거 같아요.