css (10) - 고급 선택자

 

1. 연결 선택자 

 

1.1 하위요소 선택자와 자식 선택자 

 

하위 요소에 스타일 적용하는 하위 선택자와 자식 선택자 

상위요소 하위요소 

부모요소 > 자식요소 

 

1.2 형제 요소 스타일 적용하는 인접형제 + 형제 선택자 

 

요소1+요소2

요소1~요소2

 

2. 속성 선택자 

 

특정 속성이 있는 요소를 선택할 수 있다. (속성만 선택하는 건 없는 듯하다)

 

2.1 특정 속성 요소 선택 

a[속성]

a[속성=값]

a[속성~=값] : 여러 값 중에서 특정 속성값이 포함된 요소 선택 (단어별)

a[속성 |= 값] : 특정 속성 값이 포함된 속성 요소 선택  (단어별,하이픈포함) 

ex a[title|=us] : 속성이 us거나 us-로 시작 하는것 모두 

a[속성 ^= 값] : 속성값이 정확하게 일치하지 않더라도 지정한 문자로  시작하는 속성 

> regex같음 

a[속성 $= 값] : 속성 값이 ~단어로 끝나는 속성 모두 찾음 

a[속성 *= 값] : 해당 문자 어느 위치던 포함한다면 선택 

 

 

 

 

----

3. 가상 클래스와 가상요소 

 

 

3.x 가상요소 

 

불필요한 태그를 사용하지 않고, 화면에 보이는 부분을 꾸밀 때 사용 ::로 사용 

 

- 첫번째 줄, 첫번째 글자에 스타일 적용 ::first-line, first-letter요소 

지정한 요소의 첫번째 줄이나 첫번째 글자에 스타일 적용 

*단 첫번째 글자는 반드시 첫째줄에 있어야함 (br로 띄어쓰기하면 적용안댐)

 

- 내용 앞뒤에 컨텐츠 추가 ::before, ::after요소