CSS : not (: last-child) : 애프터 셀렉터

369

다음과 같은 스타일의 요소 목록이 있습니다.

ul {
    list-style-type: none;
    text-align: center;
}

li {
    display: inline;
}

li:not(:last-child):after {
    content:' |';
}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

스 니펫 확장

CSS를 사용하여 마지막 요소를 제외한 모든 요소를 선택하는 방법을 아는 사람이 있습니까?

여기 에서 :not()선택기 의 정의를 볼 수 있습니다

css css-selectors pseudo-element

— 맷 클락슨
소스

1

이 동작은 Chrome 10의 버그 인 것 같습니다. Firefox 3.5에서는 작동합니다.

— duri

6

실제로 2018 년 최신 Chrome으로 스 니펫을 실행하고 예상대로 작동했습니다.

— atoth

433

not selector에 문제가 있다면, 그것들을 모두 설정하고 마지막 것을 재정의 할 수 있습니다

li:after
{
  content: ' |';
}
li:last-child:after
{
  content: '';
}

또는 이전에 사용할 수 있다면 마지막 자녀가 필요하지 않습니다.

li+li:before
{
  content: '| ';
}

— 임마
소스

12

이것은 실제로 IE8까지 작동하는 유일한 방법입니다 (죄송합니다, IE7 및 그 이전의 치토는 없습니다). li:not(:first-child):before이전 버전의 Internet Explorer가 해결하기에는 너무 무섭습니다.

— Sandy Gifford

240

모든 것이 올바른 것 같습니다. 사용한 것 대신 다음 CSS 선택기를 사용할 수 있습니다.

ul > li:not(:last-child):after

— 비벡
소스

4

@ScottBeeson 이것은 현대 브라우저에 가장 적합한 천막이지만 오래된 브라우저에서 허용되는 답변 작업입니다. (나는 당신에게 동의합니다, 이것은 받아 들여 져야합니다)

— Arthur

25

글로 작성된 귀하의 예는 Chrome 11에서 완벽하게 작동합니다. 브라우저가 :not()선택기를 지원하지 않습니까?

이 크로스 브라우저를 수행하려면 JavaScript 또는 이와 유사한 것을 사용해야합니다. jQuery 는 선택기 API에서 : not () 을 구현 합니다.

— 리자 댈리
소스

8

li:not(:first-child):before전에 수직 막대를 수행 하고 추가 하여이 문제를 해결했습니다 . 마지막 자녀를 지원하지 않는 안정적인 버전의 Chrome으로 작업하고있었습니다. 카나리아 빌드는 않습니다. 답변 tho에 감사드립니다.

— Matt Clarkson

2013 년에도 Chrome이 지원하지 않는 것 같습니다.

— MikkoP

20

CSS를 사용한 예제

  ul li:not(:last-child){
        border-right: 1px solid rgba(153, 151, 151, 0.75);
    }

— 로레나 피타
소스

20

나를 위해 그것은 잘 작동

&:not(:last-child){
            text-transform: uppercase;
        }

— 아 샤드 나심
소스

1

이 답변은 CSS가 아니라 SCSS와 관련이있을 수 있습니다.

— Chris Walsh

10

IE에서 샘플이 작동하지 않으면 콘텐츠 CSS 속성을 사용하려면 IE에서 페이지를 표준 방식으로 렌더링하려면 문서에서 Doctype 헤더 를 지정해야 합니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

</html>

두 번째 방법은 CSS 3 선택기를 사용하는 것입니다

li:not(:last-of-type):after
{
    content:           " |";
}

그러나 여전히 Doctype을 지정해야합니다.

그리고 세 번째 방법은 JQuery를 다음과 같은 스크립트와 함께 사용하는 것입니다.

<script type="text/javascript" src="jquery-1.4.1.js"></script>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

<script type="text/javascript">
  $(document).ready(function () {
      $("li:not(:last)").append(" | ");
    });
</script>

세 번째 방법의 장점은 doctype을 지정할 필요가 없으며 jQuery가 호환성을 처리한다는 것입니다.

— 마틴 쿤
소스

6

<! DOCTYPE html>은 새로운 HTML5 표준입니다.

— 매트 클라크 슨

1

이것은 이것을 다루는 훌륭하고 현대적인 방법입니다. 나는 마지막 자녀로 고생하고 있었고, 나는 당신의 대답을 찾았습니다. 이것은 완벽하다! :하지 (: 마지막의 형) : 후

— Firze

1

마지막 자식 전 :과 이후를 제거하고 사용

 ul li:not(last-child){
 content:' |';
}

잘하면, 그것은 작동해야합니다

— 제이 루크 만
소스

-2

당신이 이것을 시도 할 수 있습니다, 나는 당신이 찾고있는 대답이 아니라는 것을 알고 있지만 개념은 동일합니다.

모든 어린이의 스타일을 설정하고 마지막 어린이에서 스타일을 제거하는 위치.

코드 스 니펫

li
  margin-right: 10px

  &:last-child
    margin-right: 0

영상

— 야슈 미탈
소스

2

안녕하세요,이 에디터가 무엇인지 알려주세요. 보기 좋네요.

— Zanecat

작은 코드 조각이므로 누구나 쉽게 암기하고 입력 할 수 있습니다.

— Yashu Mittal