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 는 적용이 안되는데요.

이런 케이스는 적용이 어렵나요?

  • ?
    li.AAAA:list-child
  • ? Lv30
    앗 점심먹으러 나왔는데 들어가서 해보겠습니다.
  • Lv30 ?
    li도 빼야할겁니다

    ul .AAAA:last-child
  • ? Lv30
    다른 class랑 섞여 있는 뒷부분 class라 안되는걸까요.. 이것도 안되네요...
  • ul li.AAAA:nth-last-child(1){블라블라;}

  • ?
    아 nth-last-child 였죠 =_=a
  • Lv30
    요것도 안되네요.
  • Lv30
    first-chid 는 되고 last-child 가 안되는 이유가.
    AAAA 클래스가 초반부에만 있고 뒤쪽으로는 없는 구조라서 그럴까요?

    구조적인 한계로 안되는건지 궁금하네요.

    AAAA가 더 있는지 뒤로 더 찾다가 못찾는건 아닌지...
  • Lv8
    ul li:nth-child(2){블라블라} li에서 2번째꺼골라서 되지않나요?
  • Lv8 Lv30
    네. 첫번째 두번째 이렇게는 되는데요.

    거꾸로 마지막부터 세는거가 안되서 문제에요. 이게 갯수가 지정된게 아니라서요.

    혹시 베스트댓글 애드온에 의해 생성되는 li 이라서 그럴까요... 뭔가 css가 동작하는 시점 의문제라던가요...
  • Lv30 Lv8
    ul .fdb_itm.clear.AAAA:last-child{ }로도 해보셧나요?

    li를 나타내는게 저거인거같은데 중복사용한거같아서요
  • Lv8 Lv30
    네. 이렇게 해봐도
    first
    첫번째,두번째

    이렇게는 잘 동작하는데요.
    last 가 안되요..
  • Lv8
    last-child가 안되는 이유 중에 하나가

    <ui>
    <li>
    <li>
    <div>
    </ul>

    이런 식일 경우
    li:last-child 같은 선택자가 안먹힙니다.
    li를 last-child로 지정하긴 했지만 ul 태그 안에서 last-child는 div 이기 때문에 그렇습니다.
  • Lv8 Lv30
    제가 잘 이해한건지는 모르겠지만
    스케치북 코멘트 출력부분인데요.
    말씀 하신 것처럼 ul 안에 div 는 따로 있지 않아서요.
  • Lv30 Lv8
    음... 그러면 특정 클래스 자체가 안되는걸지도 모르겠네요...
    아 그리고 한 박스에 안에 요소가 하나만 있는 경우 last-child가 안되고 first-child로만 인식됩니다.
  • Lv8 Lv30
    지금 현재 해당 class가 모든 반복에 동일하게 사용되는게 아니고 조건에 따라 있는 경우가 있고 없는 경우가 있습니다. 그래서 지금 first 또는 위에서부터 순번으로는 동작하는데요.
    지금 필요한 맨 마지막에 해당하는 last-child 만 안먹는 상황입니다. 뭔가 트릭이 필요하거나 혹은 다른 방법이 필요해 보이는 시점입니다.
  • ?
    <section>
    <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 클래스를 넣어주면 될거같은데..
  • ? Lv30
    css last-child 가 되면 간단하게 되는줄 알고 시도했는데 케이스에 따라 안되는게 있는 거 같더라고요. 말씀해 주신 방법으로 해결하겠습니다. 감사합니다!
  • Lv30 ?
    last-child를 적용한 요소가 부모의 모든 요소들 중 마지막이 아니면 적용되질 않습니다..
    웹지기님 경우는 li.AAAA:last 가 ul *:last 가 아니기 때문에 작동하지 않은거죠...

    ul > li.AAAA + li:not(.AAAA) { ... } 를 사용하면 마지막 .AAAA 다음의 li 를 가져올 수는 있는데,
    결국 HTML 수정이 한번은 필요할테니... jQuery가 HTML를 수정하지 않고 사용하는 방법중에선 제일 간단하겠네요.
  • Lv8

    아래처럼 셀렉터를 사용한 last-of-type도 한번 시도 해 보세요.

    [class~='AAAA']:last-of-type {블라블라;}

  • Lv8 Lv30

    요거 해봤는데 안되더라구요~ 일단 jQuery 로 적용해 놓았습니다. 감사합니다.

    그니까 li 안에 class를 지정한건데 마지막에 위치하지 않고 뒤에 li들이 더 있어서 안되는 거 같아요.