[CSS]CSS선택자4

1. 문자열 속성 선택자

 

속성 값의 문자열을 확인하여 스타일 적용하는 방식의 선택자.

 

1) 선택자[속성명 ~= "특정값"] { CSS 코드; }

     : 띄어쓰기로 구분되어있는 여러 속성 값이 작성된 속성 중 속성 값이 특정 값을 단어로 포함하는 요소를 선택

2) 선택자[속성명 |= "특정값"] { CSS 코드; }

     : 속성 값이 특정 값을 단어로 포함하는 요소를 선택 단, "-" 기호로 구분, "-" 앞의 내용이 동일해야 함

 

3) 선택자[속성명 ^= "특정값"] { CSS 코드; }   (^ : 캐럿)

    : 속성 값이 특정 값으로 시작하는 요소를 선택

4) 선택자[속성명 $= "특정값"] { CSS 코드; }

    : 속성 값이 특정 값으로 끝나는 요소를 선택

5) 선택자[속성명 *= "특정값"] { CSS 코드; }

     : 속성 값이 특정 값을 포함하는 요소를 선택

 

[HTML]

[CSS]

 

#결과

 

 

2. :only-child

 

특정 요소의 자식 요소가 하나 밖에 없을 때 선택

 

[HTML]

 

[CSS]

#결과

 

3. :only-of-type

특정 요소의 자식 중 지정된 자식 요소가 딱 하나만 있을 때 선택

 

[HTML]

[CSS]

 

#결과

 

4. :empty

 

자식 노드가 없는 요소인 경우 선택자

 

노드란?

HTML에 작성되어지는 모든 것들  ex) 태그, 글자, 띄어쓰기, 엔터, 주석 등 모두 다
- 시작 태그, 종료 태그 사이에 아무것도 존재하면 안된다!

 

[HTML]

 

[CSS]

 

#결과

 

5. 여러 선택자 동시 작성하기

 

같은 스타일(css코드)을 지정하고 싶은 요소가 있으나 선택자 하나로 모두 선택할 수 없을 때 사용

 

[작성법]

[HTML]

[CSS]

 

#결과

 

6. 여러 클래스가 작성된 요소만 선택하기

 

[HTML]

[CSS]

 

#결과