JS

css 선택자 속성 태그

곰탁 2022. 1. 3. 11:50
<div class="content-item">

우선 div는 (tag) class는 속성명 "content-item"은 속성값이라고 생각하면 된다.

 

css  선택자.

 

[속성명]
[속성명 = “속성값”]


[속성명 ~= “속성값”] : 특정 문자 포함

 - 속성값에 공백 허용.
[속성명 *= “속성값”] : 특정 문자 포함

 - 속성값에 -, _,공백과 합성어 사용 가능.
[속성명 |= “속성값”] : 접두사 포함

 - 속성값에 -만 허용됨.
[속성명 ^= “속성값”] : 접두사 포함

 - 속성값에 -, _, 공백과 합성어 전체 허용
[속성명 $= “속성값”] : 접미사 포함

 - 속성값에 전체 허용.

 

이렇게 봤을때 같은 기능을 가졌지만 속성값에 어떤걸 허용하는지에 따라서 나누어 져있다.

속성값에 해당 값이 포함되어있는데 범용적으로 쓰려면 *= 사용하고,

접주사에는 ^= 접미사로는 $=를 사용하면 되는 것으로 보인다.

 

*=, ^=, $= 이 세가지는 필수로 기억해서 사용하면 될 것같다.

 

추가로 해당 태그를 한정하기 위해선

 tab[속성명="속성값"]으로 사용하면 된다.