나의 개발일지

특성 선택자와 결합선택자에 대하여~ 본문

CSS

특성 선택자와 결합선택자에 대하여~

heew0n 2023. 10. 10. 21:00
선택자의 종류

· 기본 선택자

· 그룹 선택자

· 특성 선택자

· 결합 선택자

· 의사 클래스

· 의사 요소

 

 

특성선택자
특성선택자(속성선택자)는 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택한다

[class *="it"] {color: white;}

→  클래스 값에 "it"이 포함되는 요소 선택하기

[class ^="it"] {color: white;}

→  클래스 값에 "it"으로 시작하는 요소 선택하기

[class $="it"] {color: white;}

→   클래스 값에 "it"으로 끝나는 요소 선택하기

 

코드 세팅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>선택자 연습</h1>
    <p>태그</p>
    <p class="text">두번째 문단</p>
    <p id="choco">세번째 문단</p>
    <p class="text">네번째 문단</p>
    <p>다섯번째 문단 <span>스판태그</span></p>
</body>
</html>

 

  class를 가지고 있는 태그, id를 가지고 있는 태그 속성 변경하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [class] {
            color: blueviolet;
        }
        [id] {
        	color: orange;
            }
    </style>
</head>
<body>
    <h1>선택자 연습</h1>
    <p>태그</p>
    <p class="text">두번째 문단</p>
    <p id="choco">세번째 문단</p>
    <p class="text">네번째 문단</p>
    <p>다섯번째 문단 <span>스판태그</span></p>
</body>
</html>

 

class에 값 부여해서 속성 변경하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [class="text"] {
            color: red;
        }
        [id="choco"] {
        	color: blue;
            }
    </style>
</head>
<body>
    <h1>선택자 연습</h1>
    <p>태그</p>
    <p class="text">두번째 문단</p>
    <p id="choco">세번째 문단</p>
    <p class="text">네번째 문단</p>
    <p>다섯번째 문단 <span>스판태그</span></p>
</body>
</html>

 

 

class^="" // ""로 시작하는 id, class 값 속성 변경하기
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [class^="te"] {
            color: pink;
        }
        [id^="ch"] {
        	color: yellow;
            }
    </style>
</head>
<body>
    <h1>선택자 연습</h1>
    <p>태그</p>
    <p class="text">두번째 문단</p>
    <p id="choco">세번째 문단</p>
    <p class="text">네번째 문단</p>
    <p>다섯번째 문단 <span>스판태그</span></p>
</body>
</html>

class$="" // ""로 끝나는 id, class 값 속성 변경하기
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [class$="xt"] {
            color: pink;
        }
        [id$="co"] {
        	color: yellow;
            }
    </style>
</head>
<body>
    <h1>선택자 연습</h1>
    <p>태그</p>
    <p class="text">두번째 문단</p>
    <p id="choco">세번째 문단</p>
    <p class="text">네번째 문단</p>
    <p>다섯번째 문단 <span>스판태그</span></p>
</body>
</html>

결합선택자
두 개 이상의 선택자를 결합시켜 결합된 조건을 만족하는 요소를 선택한다
자손결합자

div p{ color: black; }

  → div 요소 안에 위치하는 모든 p 요소를 선택

div > p{color: white; }

  → div 요소의 바로 아래에 위치하는 모든 p 요소를 선택

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     body p{              //바디태그의 바로 밑 하위요소
        color: brown;
     }
     /*   
     body > span {
        color: blue;
     } */ 이 경우는 실행되지 않음 !
   	
    </style>
</head>
<body>
    <h1>선택자 연습</h1>
    <p>태그</p>
    <p class="text">두번째 문단</p>
    <p id="choco">세번째 문단</p>
    <p class="text">네번째 문단</p>
    <p>다섯번째 문단 <span>스판태그</span></p>
</body>
</html>

형제결합자

h1 ~ p{ color: red; }

 → h1 요소 뒤에 오는 형제 중 모든 p 요소를 선택

h1 + p{ color: red; }

 → h1 요소 바로 뒤에 오는 형제 p 요소를 선택

 

 

h1 ~ p
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     p > span {
        color: blue;
     }
     h1 ~ p{   
        color: aquamarine;     // h1 뒤에 오는 모든 p 요소 선택
     }
    </style>
</head>
<body>
    <h1>선택자 연습</h1>
    <p>태그</p>
    <p class="text">두번째 문단</p>
    <p id="choco">세번째 문단</p>
    <p class="text">네번째 문단</p>
    <p>다섯번째 문단 <span>스판태그</span></p>
</body>
</html>

 

h1 + p
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     p > span {
        color: blue;
     }
     h1 + p{        // h1 뒤에 바로 오는 p 태그만 선택
        color: khaki   
     }
    </style>
</head>
<body>
    <h1>선택자 연습</h1>
    <p>태그</p>
    <p class="text">두번째 문단</p>
    <p id="choco">세번째 문단</p>
    <p class="text">네번째 문단</p>
    <p>다섯번째 문단 <span>스판태그</span></p>
</body>
</html>

 

class + p
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     p > span {
        color: blue;
     }
     .text + p{
        color: khaki
     }
    </style>
</head>
<body>
    <h1>선택자 연습</h1>
    <p>태그</p>
    <p class="text">두번째 문단</p>
    <p id="choco">세번째 문단</p>
    <p class="text">네번째 문단</p>
    <p>다섯번째 문단 <span>스판태그</span></p>
</body>
</html>

 

text class 다음인 세번째, 다섯번째 <p> 가 바뀌었다

 

 

저작자표시

'CSS' 카테고리의 다른 글

의사(가상)클래스에 대하여~  (0) 2023.10.11
의사요소/after/before/first-line/marker/placeholder  (0) 2023.10.11
float과 clear에 대하여~  (0) 2023.10.10
background에 대하여~  (1) 2023.10.10
폰트어썸에서 아이콘 만들기&링크생성하기  (1) 2023.10.07
'CSS' Related Articles more