CSS 02. 기타 선택자 (1)

1. 속성 선택자 

   : 선택하고자 하는 요소 내에 작성되어있는 속성을 이용해서 선택하는 방법 
     선택자 뒤에 [] 를 이용해서 속성과 속성값을 제시하면서 선택

    선택자[속성=속성값]{  : 속성과 속성값 일치

    선택자[속성~=속성값]{ : 속성값을 포함(한단어)  

    선택자[속성|=속성값]{ : 속성값의 시작(- 기준 한 단어)

    선택자[속성^=속성값]{ : 속성값의 시작(단어 X)

    선택자[속성$=속성값]{ : 속성값 끝

    선택자[속성*=속성값]{ : 속성값을 포함

        스타일 속성 : 값; }

 

div1

div2

div3

div4

 

 1) = : 속성과 속성값이 일치 할때  
   

div 요소들 중 name속성값이 name1과 '일치'하는 요소

<style>
div[name=name1]{ background-color: coral;}
</style>

2) ~= : 속성값이 속성값에 포함되어있을때 (한단어 기준)

div 요소들 중 name속성값에 name1을 '포함'되어있는 요소(한 단어로)--> 1과 3번 같이선택됨

<style>
div[name~=name1]{ background-color:green;}
</style>

 

3) |~ : 속성값이 어떤 단어로 시작될때 ( -로 구분, 단어로)

div 요소들 중 class속성값이 class로 '시작'되는 요소(-로 구분, 단어로)

<style>
div[class|=class]{ background-color: cornflowerblue;}
</style>

 

4) ^= : 속성값이 어떤 값으로 시작될때( 글자) 

div 요소들 중 name속성값이 na로 '시작'되는 요소

<style>
div[name^=na]{ color: lightslategray;}
</style>

 

5) $= : 속성값의 끝 글자

div 요소들 중 class속성값이 ss로 '끝'나는 요소

<style>
div[class$=ss]{ font-size: medium;}
</style>

 

6) *= : 속성값에 포함된 글자 

 div 요소들 중 class속성값에 i가 포함되어있는 요소

<style>
div[class*=i]{ background-color:gray;}
</style>

 

---

2. 자손선택자와 후손선택자 

 많은 요소들이 중첩되면서 작성가능 
 자손 : 바로 하위인 요소들 / 후손 : 하위요소들 전부 

자손선택자 :   a>b {스타일 속성 : 값;}

후손 선택자 : a b {스타일 속성 : 값;}

 <div id="test1">
        <h4>div의 자손이면서 후손입니다.</h4>
        <h4>div의 자손이면서 후손입니다.</h4>
        <ul>div의 자손이면서 후손입니다.
            <li>ul의 자손이면서 div의 후손입니다.</li>
            <li>ul의 자손이면서 div의 후손입니다.</li>
        </ul>
    </div>
    
 <style>
 #test1>h4{
    background-color: orangered;
}
#test1>ul>li{
    background-color: seagreen;
}
#test1 li{
    color: gold;
}
</style>

div의 자손이면서 후손입니다.

div의 자손이면서 후손입니다.

div의 자손이면서 후손입니다.
• ul의 자손이면서 div의 후손입니다.
• ul의 자손이면서 div의 후손입니다.