CSS 선택자 level 3 part1 - by. UXKM

Publishing
CSS
CSS 중급
CSS 선택자 level 3 part1

요약 설명
CSS 선택자 Level 3는 HTML 요소를 선택하는 규칙들을 표준화한 W3C 기술 문서이며, CSS 3에서 새로 추가되거나 개선된 선택자들을 의미합니다.
선택자는 스타일을 적용할 요소를 지정하는 방법으로, 요소의 태그명, 클래스, 속성, 구조적 위치 등을 기반으로 요소를 선택할 수 있습니다.

CSS 선택자 Level 3에는 조합 선택자, 속성 선택자, 의사(가상) 클래스, 의사(가상) 요소 등 다양한 선택 방법이 포함되어 있으며, 오늘날 웹에서 사용하는 선택자의 대부분이 Level 3 기준입니다.

요약 설명
CSS 선택자 level 3 part-1에서는

조합 선택자(Combinators)

속성 선택자(Attribute Selector)에 대한 내용을 다루고 있습니다.

조합 선택자(Combinators)

일반 형제 셀렉터(General Sibling Combinator)

CSS Level 3 선택자
형제(동위) 셀렉터는 형제 관계(동위 관계)에서 뒤에 위치하는 요소를 선택할 때 사용합니다.
셀렉터A의 형제 요소 중 셀렉터A 뒤에 위치하는 셀렉터B 요소를 모두 선택합니다.

Element ~ Element(셀렉터A ~ 셀렉터B)

								p ~ ul {
									/* style 작성 */
								}

body
p
ul
p ~ ul {color:#ff0000;}
h1
ul
p ~ ul {color:#ff0000;}

[일반 형제 셀렉터]

속성 선택자(Attribute Selector)

CSS Level 3 선택자
CSS 속성 선택기는 주어진 속성의 존재 또는 값에 따라 요소를 일치시킵니다.
대소문자를 정확하게 구분하여 사용합니다.

								[attribute^='value'] {
									/* style 작성 */
								}
								[attribute$='value'] {
									/* style 작성 */
								}
								[attribute*='value'] {
									/* style 작성 */
								}

[attribute^="value"]

지정된 속성 값으로 시작하는 요소를 선택합니다.
속성의 값이 value로 시작하는 요소를 선택합니다. 단어 기준이 아니라 문자열 기준입니다.

									/* title 속성의 값이 abc로 시작하는 h1 요소를 선택. "abc xyz", "abc-xyz" 모두 선택됩니다. */
									h1[title^="abc"] {
										/* style 작성 */
									}

[attribute$="value"]

지정된 속성 값으로 끝나는 요소를 선택합니다.
속성의 값이 value로 끝나는 요소를 선택합니다. 단어 기준이 아니라 문자열 기준입니다.

									/* title 속성의 값이 abc로 끝나는 h1 요소를 선택. "xyz abc", "xyz-abc" 모두 선택됩니다. */
									h1[title$="abc"] {
										/* style 작성 */
									}

[attribute*="value"]

지정된 속성 값을 포함하는 요소를 선택합니다.
속성의 값이 value를 포함한 요소를 선택합니다. 포함 여부는 문자열 기준으로 판단합니다.

									/* title 속성의 값이 abc를 포함한 h1 요소를 선택. "abc xyz", "abcxyz", "abc-xyz" 모두 선택됩니다. */
									h1[title*="abc"] {
										/* style 작성 */
									}

Attribute Selector 예제

️한눈에 보는 요약!