CSS 의사 요소 결합, ": after" ": last-child"

122

CSS를 사용하여 "문법적으로 올바른"목록을 만들고 싶습니다. 이것이 내가 지금까지 가지고있는 것입니다.

<li>태그는 그 후 쉼표로 수평으로 표시됩니다.

li { display: inline; list-style-type: none; }

li:after { content: ", "; }

작동하지만 "마지막 자식"이 쉼표 대신 마침표를 갖기를 원합니다. 그리고 가능하다면 "마지막 자식"앞에 "and"를 붙이고 싶습니다. 스타일링중인 목록은 동적으로 생성되므로 "마지막 자식"에게 클래스를 제공 할 수 없습니다. 의사 요소를 결합 할 수는 없지만 기본적으로 달성하려는 효과입니다.

li:last-child li:before { content: "and "; }

li:last-child li:after { content: "."; }

이 작업을 어떻게 수행합니까?

css

— 데릭
소스

4

당신은 정말로 이것을 위해 CSS를 사용해서는 안됩니다.

— Funky Dude

2

나는 Funky Dude에 약간 동의해야합니다. HTML (또는 일반 HTML 이상인 경우 코드 숨김)에서이 작업을 수행하는 것이 좋습니다. CSS는 형식화를위한 것입니다 :)

— Zyphrax

16

저는 개인적으로 목록에서 서식이 필수가 아니라 멋지다고 주장하는 경향이 있습니다. CSS를 사용하는 경우에는 html 또는 서버 측 코딩을 사용하는 것보다 목록에서 더 간단한 추가 또는 제거가 가능합니다. 그러나 솔직히 YMMV, 가끔 그런 이상한거야, 그리고, 등 ... =)

— 다윗은 분석 재개 모니카 말한다

9

옥스포드 쉼표를 사용하면 +1! :)

— Brandon Rhodes

5

'옥스포드 쉼표'는 +1입니다. 그것에 대해 들어 본 적이 없습니다 (나는 네이티브가 아닙니다). 그러나 빠른 위키 조회는 많은 언어에서 사용되지 않기 때문에 자연 스럽습니다. 재미 하나는 스택 인터넷 검색 CSS 문제를 배울 수있는)

— jakub.g

168

이것은 작동합니다 :) (나는 다중 브라우저를 희망하며, Firefox는 그것을 좋아합니다)

li { display: inline; list-style-type: none; }
li:after { content: ", "; }
li:last-child:before { content: "and "; }
li:last-child:after { content: "."; }

<html>
  <body>
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </body>
</html>

스 니펫 확장

— Zyphrax
소스

2

비슷한 문제는 메뉴 항목을 파이프 문자로 분리하는 경우입니다. 동일한 솔루션이 작동합니다. 그러나 최종 파이프 문자를 제거하려면 최종 콘텐츠 속성을 {content : none;}으로 설정해야합니다.

— aridlehoover 2011-08-19

2

순서도 중요합니다. li:last-child:after작동하지만 작동 li:after:last-child하지 않습니다.

— Richard Ayotte

1

염두에두고 :last-child이 IE8 이전 버전에서 지원하지 않는, 그래서 CSS3 사양에 속하지 않습니다.

— Cthulhu

23

나는 <menu> 요소의 목록 항목에 대해 이것을 좋아합니다. 다음 마크 업을 고려하십시오.

<menu>
  <li><a href="/member/profile">Profile</a></li>
  <li><a href="/member/options">Options</a></li>
  <li><a href="/member/logout">Logout</a></li>
</menu>

다음 CSS로 스타일을 지정합니다.

menu > li {
  display: inline;
}

menu > li::after {
  content: ' | ';
}

menu > li:last-child::after {
  content: '';
}

다음이 표시됩니다.

Profile | Options | Logout

그리고 이것은 Martin Atkins가 그의 논평에서 설명했던 것 때문에 가능합니다 .

CSS 2 :after에서는 ::after. CSS 3을 사용 하는 경우은 의사 요소 ::after이므로 (두 개의 세미 열)을 사용하십시오 ( ::after단일 세미 열은 의사 클래스 용입니다).

— 가브리엘 오트 클로 크
소스

16

그럼에도 불구하고 누군가가 이것으로부터 이익을 얻을 수 있습니다.

li:not(:last-child)::after { content: ","; }
li:last-child::after { content: "."; }

이것은 CSS3와 CSS2에서 작동합니다.

— 사용자 5341733
소스

11

의사 요소를 결합 할 수 있습니다 ! 죄송합니다. 질문을 게시 한 직후이 문제를 알아 냈습니다. 호환성 문제로 인해 덜 일반적으로 사용됩니다.

li:last-child:before { content: "and "; }

li:last-child:after { content: "."; }

이것은 수 영적으로 작동합니다. CSS는 놀랍습니다.

— 데릭
소스

12

이것은 "nit-picker 's corner"의 약간이지만 "last-child"는 실제로 의사 클래스 이고 "before"와 "after"는 의사 요소입니다. 차이점은 의사 클래스는 기존 요소에 대한 추가 제약 인 반면 의사 요소는 HTML이 아닌 CSS에서 생성 된 프리젠 테이션 트리의 완전히 새로운 요소라는 것입니다. 이러한 이유로 결합 할 수 있습니다. last-child은에서 수정 자 li이고 li마지막 자식 요소를 모두 선택한 후 각 요소 앞뒤에 새 요소를 선택 (암시 적으로 생성)합니다.

— Martin Atkins

이 특정 스레드를 오랫동안 잊었을 수도 있지만 목록의 길이가 가변적이라고 언급 했으므로 대부분의 상황에서 정확히 두 개의 항목이있는 목록은 영어로 쉼표로 정확하지 않을 것임을 지적 할 가치가 있습니다. 즉, "빵과 버터"를 원하신다면. "빵과 버터"보다는 -그러면 여기에 제공된 대부분의 솔루션이 불완전합니다. 나는 그것을 둘러싼 방법을 생각해 냈고, 누군가가 여전히 스레드 아래를 보는 데 도움이 될 수 있도록 답변으로 아래에 게시했습니다.

— Matt Wagner

6

언급하자면 CSS 3에서

:후

이렇게 사용되어야합니다

::후

에서 https://developer.mozilla.org/de/docs/Web/CSS/::after :

:: after 표기법은 의사 클래스와 의사 요소를 구별하기 위해 CSS 3에 도입되었습니다. 브라우저는 CSS 2에 도입 된 후 표기법도 허용합니다.

따라서 다음과 같아야합니다.

li { display: inline; list-style-type: none; }
li::after { content: ", "; }
li:last-child::before { content: "and "; }
li:last-child::after { content: "."; }

— 볼프강 축복
소스

3

이중 콜론 ::CSS3 구문 을 지원하는 모든 브라우저 는 :구문 만 지원하지만 IE 8은 단일 콜론 만 지원하므로 지금은 최상의 브라우저 지원을 위해 단일 콜론 만 사용하는 것이 좋습니다. ::의사 콘텐츠와 의사 선택자를 구분하기 위해 들여 쓴 최신 형식입니다. IE 8 지원이 필요하지 않은 경우 이중 콜론을 자유롭게 사용하십시오. 이로부터 기사

— JohnnyQ

2

IE 8은 더 이상 브라우저 표준 측면에서 플레이어가 아닙니다. Microsoft에서 지원하지 않으며 HTML5 또는 CSS3 (의사 요소, 변환 등)을 지원하지 않습니다. 저는 최대 1 년 전에 이전 버전과의 호환성에 대한 많은 작업을 수행했으며 IE6 / IE7을 통해 Modernizr.) 우리는 먼 길을 왔으며 귀하의 사이트가 근시안적인 솔루션이되지 않고 장기적으로 온라인 신원을 제시하고자한다면 IE8을 사용하는 누군가로부터 얻을 수있는 수익을 고려하십시오. 나다. 20 년 뒤인 노인들도 태블릿과 투 인원 노트북을 사용하고있다.

— Steven Ventimiglia 17 년

2

이 질문에 대한 또 다른 답변을 추가하는 이유는 @derek이 요청한 것이 정확히 필요했기 때문이며 여기에서 답변을보기 전에 이미 조금 더 나아갔습니다. 특히, 내가 CSS를 필요로 그 수 또한 쉼표가 원하지 않는 정확히 두 개의 목록 항목의 경우를 설명합니다. 예를 들어, 제가 제작하고자하는 저자별 바이 라인은 다음과 같습니다.

한 명의 저자 : By Adam Smith.

두 명의 저자 : By Adam Smith and Jane Doe.

세 명의 저자 : By Adam Smith, Jane Doe, and Frank Underwood.

여기에 이미 제공된 솔루션은 한 명의 작성자와 3 명 이상의 작성자에게 적용되지만 "Oxford Comma"스타일 (일부에서는 "Harvard Comma"스타일이라고도 함)이 적용되지 않는 두 명의 작성자 사례를 고려하지 않습니다. -즉, 접속사 앞에 쉼표가 없어야합니다.

오후에 땜질을 한 후 다음을 생각해 냈습니다.

<html>
 <head>
  <style type="text/css">
    .byline-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .byline-list > li {
      display: inline;
      padding: 0;
      margin: 0;
    }
    .byline-list > li::before {
      content: ", ";
    }
    .byline-list > li:last-child::before {
      content: ", and ";
    }
    .byline-list > li:first-child + li:last-child::before {
      content: " and ";
    }
    .byline-list > li:first-child::before {
      content: "By ";
    }
    .byline-list > li:last-child::after {
      content: ".";
    }
  </style>
 </head>
 <body>
  <ul class="byline-list">
   <li>Adam Smith</li>
  </ul>
  <ul class="byline-list">
   <li>Adam Smith</li><li>Jane Doe</li>
  </ul>
  <ul class="byline-list">
   <li>Adam Smith</li><li>Jane Doe</li><li>Frank Underwood</li>
  </ul>
 </body>
</html>

위에있는대로 바이 라인을 표시합니다.

결국 li성가심을 피하기 위해 요소 사이의 공백도 제거해야했습니다 . 그렇지 않으면 인라인 블록 속성이 각 쉼표 앞에 공백을 남길 것입니다. 대체 괜찮은 해킹이있을 수 있지만이 질문의 주제는 아니므로 다른 사람이 대답하도록 남겨 두겠습니다.

여기 바이올린 : http://jsfiddle.net/5REP2/

— 매트 와그너
소스

2

하나, 둘, 셋 같은 것을 가지 려면 CSS 스타일을 하나 더 추가해야합니다.

li:nth-last-child(2):after {
    content: ' ';
}

두 번째 마지막 요소에서 쉼표를 제거합니다.

완전한 코드

li {
  display: inline;
  list-style-type: none;
}

li:after {
  content: ", ";
}

li:nth-last-child(2):after {
  content: '';
}

li:last-child:before {
  content: " and ";
}

li:last-child:after {
  content: ".";
}

<html>

<body>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</body>

</html>

스 니펫 확장

— Raj Sharma
소스

0

공간을 절약하기 때문에 작은 장치에서 글 머리 기호 목록을 인라인 목록으로 효과적으로 변환하는 미디어 쿼리에서 동일한 기술을 사용하고 있습니다.

따라서 변경 사항 :

목록 항목 1
목록 항목 2
목록 항목 3

에:

목록 항목 1; 목록 항목 2; 목록 항목 3.

— 사용자 3064058
소스

그는 CSS로 이것을 시도하고 있습니다. 귀하의 방법은 하드 코딩 된 HTML입니다. 이 방법은 일반적으로 내비게이션을 표시하는 데 사용됩니다.

— Sparatan117