본문 바로가기
Today I learned!/오늘 하루 배운 것, 기억할 것

[css] 속성 선택자

by sweesweet 2022. 2. 4.

궁금한점: 속성선택자는 우선순위가 몇인건가... 

패캠에서 들었는데 기억이 삭제되었고... 책으로보니 적어야 겠다 싶어서 적음

 

 

1. 특정 속성이 있는 요소를 선택

   a[href]{...}=> a요소 중에서 href속성이 있는 요소

 

2. 특정 속성값이 있는 요소를 선택

  a[target=_blank]{...} =>a요소 중에서 target 속성값이 _blank 인 요소

 


부분속성값

1. 여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택

  [class ~=button] {...} => class 값 중에서 button이 있는 요소.(단어별)

속성은 하나면서 속성값이 여러 개일 때 특정 속성값을 찾는 데 편리

 

2.특정 속성값이 포함된 속성 요소를 선택

   a[title|= us] {...}=> title 속성값에 us가 있거나, us-로 연결된 속성값이 있는 a요소(단어별,-포함)

※1번과 다른 부분: 1번은 -로연결된 단어에는 스타일을 적용하지 않음 

 

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

a[title ^= eng]{...} =>eng로 시작하는 title속성값을 갖고있는 a요소

 

4.특정한 값으로 끝나는 속성의 요소를 선택

[href $= xls]{...} =>href의 속성값 중에 xls로 끝나는 요소 

 

5.일부 속성값이 일치하는 요소를 선택

[href *= w3]{...} =>href 속성값중에 w3이 포함된 요소