CSS : before 및 : first-child 결합

CSS : before 및 : first-child 결합

---

다음 코드를 사용하여 메뉴 항목 사이에 구분 기호를 추가하고 있습니다.

#navigation_center li:before {

    content: "| ";
    color: #fff;

}

이제 첫 번째 항목 앞에 구분 기호가 없어야하므로 다음 코드를 알아 냈습니다.

#navigation_center li:before:first-child {

    content: none;

}

그러나 그것은 아무것도하지 않습니다. : before와 : first-child를 결합 할 수 있습니까?

---

시험

#navigation_center li:first-child:before {
    content: '';
}

편집 : FelipeAls의 의견 으로이 답변을 확장하고 싶었습니다. :first유효한 CSS 선택자가 아닌 사용 된 원래 질문 입니다. 대신 :first-child. 또한 의사 선택기의 순서도 중요합니다. 첫 번째 자식 선택자가 먼저 와야합니다.

나는 :before선택자에 대한 일종의 수정 자로 생각하는 경향이 있습니다. 실제로 선택한 요소 바로 앞의 공간 만 요소를 선택하지는 않습니다.

---

hradac 의 답변이 트릭을 수행해야 하지만 신규 이민자 를 돕기 위해 가능한 순열을 실행하는 것이 가장 좋을 것이라고 생각했습니다.

.works:first-child:before
{
	color: green;
	content: 'working ';
}
.works:not(:first-child):after
{
	color: green;
	content: ' is working';
}


.broken:before:first-child
{
	color: red;
	content: 'this will never show up';
}
.broken:after:not(:first-child)
{
	color: red;
	content: 'and this will not show up either';
}

works:
<div>
	<div class='works'>
	 something
	</div>
	<div class='works'>
	 something
	</div>
	<div class='works'>
	 something
	</div>
</div>
<hr/>
broken:
<div>
	<div class='broken'>
	 something
	</div>
	<div class='broken'>
	 something
	</div>
	<div class='broken'>
	 something
	</div>
</div>

이것을 분해 해보자 :

• 3 개 div.works는 div 안에 있습니다.
• 세 div.broken개도 div 안에 있습니다.
• CSS의 첫 번째 규칙은 앞에 녹색 텍스트 "working"을 추가합니다. 그것은을 선택하여 그렇게 first-child한 후 바로 전에 빈 공간을 선택.
• 두 번째 규칙은 첫 번째 뒤에 오는 각 블록 뒤에 "작동 중"을 추가합니다. 유 추적으로 first-child정의에 속하지 않는 각 블록을 먼저 선택한 다음 그 앞에있는 빈 공간을 선택합니다.
• The following two rules, will not find a block to attack themselves to. The :before:first-child attempts to select an empty space, but then tests if it is a first-child and it is not (since technically it's not yet in the DOM tree), the similar problem is with :not(:first-child).

ReferenceURL : https://stackoverflow.com/questions/9822440/css-before-and-first-child-combined