CSS +(인접 형제 결합자) 외 선택자 정리

CSS에서 선택자와 선택자를 결합해서 사용하는 선택자를 Combinator라고 한다.

CSS Rule Set

출처 : https://www.nextree.co.kr/p8468/


+로 표기하는 Adjacent sibling combinator는 "인접 형제 콤비네이터"로 번역되고
Combinator중 Descendant(자손) Combinator와 Child(자식) Combinator보다는 익숙하지 않은 개념이다.

같은 부모를 가지는 요소들을 형제라고 하고 +를 기준으로 앞 선택자 직후에 나오는 후방 형제 선택자를 선택한다.

Example(1)

h1의 인접한 형제인 첫번째 ul이 선택된 것을 확인할 수 있다.

Example(2)

salmon컬러 적용을 위해 클래스 a의 li 형제를 선택한다.
클래스 a인 아이린과 슬기의 인접 li형제인 '슬기'와 '조이'가 선택된다.

li + li + li는 '웬디'의 인접형제의 인접형제인 '슬기', '아이린'의 인접형제의 인접형제인 '조이', '슬기'의 인접형제의 인접형제인 '예리'까지 선택된다.


어떤 선택자(Selector), Combinator를 선택하냐에 따라 개발자가 원하는 데이터를 지정하는 것이 수월해지기 때문에 개념을 명확하게 정확하게 알 필요가 있어 보인다.

---

그밖의 결합자

1. 일반 형제 선택자 ~

~ 을 기준으로 앞 요소 이후에 나오는 모든 뒤 요소를 선택한다. 형제 선택자는 같은 부모를 가지는 요소들을 말한다.

h1 ~ ul {
    color: red;
}

2. 속성 선택자

2.1 태그[속성이름]

속성이름 에 해당되는 속성을 가진 태그를 모두 선택합니다.

a[href] {
	font-size: 10px;
}

2.2 태그[속성이름="변수"]

속성이름 의 속성값이 변수와 일치하는 태그를 선택합니다.

a[href="http://www.naver.com"] {
    color: black;
}

2.3 태그[속성이름~="변수"]

속성이름 의 속성값이 변수 를 포함하는 태그를 선택합니다.

a[href~="naver"] {
    color: black;
}

2.4 태그[속성^="변수"]

속성 의 속성값이 변수 로 시작하는 태그를 선택합니다.

a[href^="http"] {
    color: black;
}

2.5 태그[속성$="변수"]

속성 의 속성값이 변수 로 끝나는 요소를 선택합니다.

a[href$="com"]{
    color: black;
}

2.6 태그[속성*="변수"]

속성 의 속성값이 변수 를 포함하는 태그를 선택합니다.

a[href*="naver"] {
	  color: black;
}

• 태그[속성~="변수"] 와 태그[속성*="변수"] 의 차이는 무엇인가요? ~= 는 단어를 기준으로 *= 는 문자열을 기준으로 판단을 하게 됩니다. 예를 들어서 위와 같은 상황에서 navers 를 어떻게 인식할까요?
  ~= 은 단어를 기준으로 naver 와 navers 를 다르다고 인식하고 선택을 못하게 되고 *= 은 문자열을 기준으로 navers 안에 naver가 포함되기 때문에 선택을 합니다.
  

2.7 태그[속성|="변수"]

속성 의 속성값이 변수 이거나 변수 로 시작하는 태그를 선택합니다.

a[href|="http"]{
    color: black;
}

3. Pseudo a:hover { } p:nth-child(1)

• elements - after, before, placeholder
• classes - nth-child, active, focus, hover .foot:first-child/.foo:last-child/.foo-nth-child(n) 설명 예시 code

  <ul>
  	<li class="foo">1</li>    <!-- .foo:first-child -->
  	<li class="foo">2</li>    
  	<li class="foo">3</li>    <!-- .foo:nth-child(3) -->
  	<li class="foo">4</li>
  	<li class="foo">5</li>    <!-- .foo:last-child -->
  </ul>

  .foo:first-child : class="foo"인 ****엘리먼트 중 첫번째 자식인 엘리먼트를 선택 .foo:last-child : class="foo"인 ****엘리먼트 중 마지막 자식인 엘리먼트를 선택 .foo:nth-child(n) class="foo"인 엘리먼트 중 n번째 자식인 엘리먼트를 선택