1. 특성 선택자 [ ] 와 결합자 ~, + , *

1. 결합자

 

 바로 자기 아래 자식인 노드만 선택하는 결합자 [ > ] 

ul > li {		// ul 의 바로 아래 li 에만 적용된다.
	...
}

 

서로 형제관계인 코드중, 해당 코드의 "이후" 로 적용되는 것을 선택하는 결합자 [ ~ ]

p ~ span {
    color: red;
}

<span>이건 빨강이 아닙니다.</span>
<p>여기 문단이 있습니다.</p>            // p 이후로 시작 ( 아직 선택 X, 이후의 span은 전부 빨강)
<code>그리고 코드도 있습니다.</code>
<span>이제 빨강입니다!</span>           // p 이후의 형제관계인 코드 (이제 빨강)
<code>더 많은 코드가 있습니다.</code>
<span>이것도 빨강입니다!</span>         // p 이후의 형제관계인 코드 (이것도 빨강)

 

서로 형제관계인 코드중, 해당 코드의 "이후" 로 "단 하나만" 적용되는 것을 선택하는 결합자 [ + ]

li:first-of-type + li {
    color: red;
}

<ul>
    <li>One</li>		// 얘부터 시작했으니, 얘는 적용X
    <li>Two!</li>       // 얘만 빨강
    <li>Three</li>
</ul>

 

2. 특성 선택자 : 특정 값만 스타일링 처리

    a[title]{
        color:red;                  // a태그 안에 title 이라는 attribute 가 있다면, red
    }

    a[href="https://example.org"] { // a태그 안에, href 가 https://example.org 라면, green
        color: green;
    }

    a[href*="example"] {            // a태그 안에, href 가 "example" 을 "포함한다면"
        font-size: 2em;
    }

    a[href$=".org"] {               // a태그 안에, href 가 ".org" 로 "끝난다면"
        font-style: italic;
    }

    a[class~="logo"] {              // a태그 안에, class attribute 가 "logo" 를 포함한다면
        padding: 2px;
    }