CSS 선택자 level 3 part1 - by. UXKM

2024-07-30

요약 설명
CSS 선택자 level 3 part-1 에서는
조합 선택자(Combinators),
속성 선택자(Attribute Selector)에 대한 내용을 다루고 있습니다.

3.1.1. 조합 선택자(Combinators)

3.1.1.1. 일반 형제 셀렉터(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;}

[일반 형제 셀렉터]

3.1.2. 속성 선택자(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 작성 */
									}