위의 사진처럼 구현하기 위해서 다음과 같이 코드를 작성한다.
<li class="item">
<div class="content">
<dl>
<dt>1</dt>
<dd>1</dd>
<dd>2</dd>
<dt>2</dt>
<dd>3</dd>
</dl>
</div>
</item>li.item
> div:nth-of-type(1)
> dl:nth-of-type(1)
dt:not(:first-of-type)::before {
content: '';
display: inline-block;
width: 5px;
height: 8px;
margin-right: 5px;
border-right: 1px solid #aaa;
}각각의 용어들을 짧게 설명하자면 다음과 같다.
1. :nth-of-type(n)
같은 태그가 여러개 나열 된 경우에 주로 사용한다.
앞에서 부터 n번째 요소에 스타일을 적용한다는 얘기다.
비슷한 경우로, :nth-last-of(n)은 끝에서부터 n번째 요소를 적용한다는 얘기다.
위의 코드대로 설명하자면, div 요소의 첫번째 요소에 뒤의 스타일 요소를 적용하겠다는 얘기다.
2. :first-of-type
형제 관례에 있는 요소 중에서도 첫번째 요소를 선택한다는 얘기다.
즉, 여러 개의 dt 요소 중에 첫번째 요소를 선택하겠다는 얘기다.
3. :not(sth)
괄호 안 요소를 제외하고 적용하겠다는 얘기다.
즉, 2번에서 설명한 dt 요소들 중 첫번째 요소를 제외하고 ::before에 content ~ border-right과 같은 스타일을 적용하겠다는 것이다.
4. ::before
요소 앞에 원하는 텍스트나 요소를 추가할 수 있다.
즉, class이름이 item이라고 명시된 li 태그의 하위 요소 div 태그의 첫번째 요소인 dl 태그의 요소들 안에 여러 dt 요소들 중 첫번째 dt를 제외하고 나머지 dt들에 다음과 같이 적용한다는 것이다.
만약, 앞이 아니라 뒤에 적용하고 싶다면 ::after을 적용하면 된다.