선택자

EUNJI LEE·2023년 5월 19일

HTML & CSS

목록 보기

10/10

선택자

html 문서 내부에서 특정 태그(Element)를 찾아낼 때 사용한다. class, id, 태그, 자손, 후손, 구조, 속성 선택자를 주로 사용한다.

특정 태그를 고르지 않고 전체를 선택할 땐 중괄호{ } 앞에 * 표시로 구분하면 모든 태그를 선택할 수 있다. 보통 페이지의 전체 글꼴, 공통 여백, 공통 색상 등에 이용한다.

<style>
		*{
				margin: 0;
				font-family: '돋움체';
			}
</style>

태그 선택자

태그 명으로 선택하는 것으로 태그명{ }처럼 중괄호{ } 앞에 태그 명을 적으면 된다. 스타일 태그 아래에 해당 태그가 있어도 태그를 찾아내서 적용한다.
html 파일 내부에 있는 해당 태그를 전부 찾아내서 적용하기 때문에 구분지어 사용해야할 때는 클래스명이나 아이디명, 위치등을 지정해서 구분해야 한다.

<p>태그명으로 태그를 선택하는 것</p>
<ul>
    <li>10</li>
    <li>20</li>
    <li>30</li>
    <li>40</li>
</ul>
<style>
    li{
        background-color: lavender;
        color: blueviolet;
        font-size: 25px;
     }
    p{
       font-family: 맑은고딕;
    }
</style>

아이디 선택자

태그에 설정되어있는 아이디 값을 기준으로 태그를 선택하는 것으로 #id명{ } 형태로 작성한다. id값은 고유한 값으로 중복되면 안 되지만 중복돼도 오류가 발생하지 않고 해당 아이디에 전부 스타일이 적용되긴 한다. 단, 나중에 javascript를 적용했을 때는 id값이 고유한 하나의 값이라고 가정하고 실행되기 때문에 원하는 위치에 기능이 적용되지 않는 등 에러가 발생할 수 있다.

<p id="idselect">아이디 값으로 스타일 변경하기</p>
<p id="idselect">중복된 아이디</p>
<style>
    #idselect{
        font-family: 굴림;
        font-size: 25px;
        background-color:lightsteelblue;
    }
</style>

클래스 선택자

페이지에 있는 태그 중 태그의 class 속성의 값이 일치하는 태그를 찾아서 선택하는 것으로 class 속성은 중복이 가능하고 다수를 설정할 수 있기 때문에 open source css를 작성할 때 많이 사용한다.

.class명{ } 형태로 작성하여 표현한다.

<h1 class="bg_color">background-color 변경하기</h1>
<span class="titleFont">제목처럼 변경해보기!</span>
<style>
   .bg_color{
        background-color: mediumturquoise;
    }
   .titleFont{
        font-size: 30px;
        font-weight: bolder;
        font-family: 고딕체;
        background-color: yellowgreen;
    }
</style>

💡 클래스는 class=”클래스명1 클래스명2”처럼 공백으로 구분해서 여러 개를 작성할 수 있다. 겹치는 style을 적용하는 경우 class를 여러 개 작성해서 해결할 수 있지만 이때 중복되는 스타일은 css 태그 순서대로 덮어씌워지기 때문에 적용이 원하는대로 됐는지 체크해야 한다.

속성 선택자

태그에 설정되어있는 속성 값을 기준으로 태그를 선택하는 것으로 속성 값이 많은 단일 태그(a, img, video, audio, input 등...)를 가져올 때 자주 사용한다.

선택자[속성명(연산자)속성값]로 표현하고 선택자는 생략 가능하다.

= : 동일 비교
^= : 시작하는 문자가 동일한 값을 찾을 때
|= : -를 기준으로 문자가 동일한 값을 찾을 때(-앞에 값을 기준으로 한다.)
$= : 끝나는 문자가 동일한 값을 찾을 때
*= : 포함된 값을 찾을 때
~= : 띄어쓰기를 기준으로 값을 찾을 때

<!--type이 일치하는 태그 선택해서 스타일 변경 -->
<form action="">
     <p>아이디<input type="text"></p>
     <p>비밀번호<input type="password"></p>
     <p>생일<input type="date"></p>
     <p>나이<input type="number"></p>
</form>
<style>
    input[type="text"]{
        background-color:oldlace;
        color:salmon;
    }
</style>
<!-- 공백을 기준으로 www가 있는 값만 찾아내서 스타일 변경 -->
<div id="container1">
    <a href="www naver">www naver</a><br>
    <a href="ww naver">ww naver</a><br>
    <a href="naver www">naver www</a><br>
    <a href="wwwn aver">wwwn aver</a><br>
    <a href="www naver www naver">www naver www naver</a><br>
</div>
<style>
    #container1>a[href~="www"]{
        background-color: khaki;
        color: olive;
    }
</style>

## 자손, 후손 선택자

태그를 계층 구조를 갖고 있기 때문에 부모, 자식 관계가 형성되어있다. 자손은 부모와 직접 연결되어있는 태그를 말하고 후손은 부모에 포함된 모든 하위 태그를 말한다.

자손 표현식 : 부모선택자>자손선택자

후손 표현식 : 부모선택자 후손선택자 *공백을 기준으로 부모, 후손을 구분

<header>
    <h3>자손</h3>
    <ul>
        <li>header의 후손1</li>
        <li>header의 후손2</li>
        <li>header의 후손3</li>
        <li>header의 후손4</li>
        <li>header의 후손5</li>
    </ul>
    <div>자손</div>
    <li>자손 li1</li>
    <li>자손 li2</li>
</header>
<style>
    header>li{
        background-color: ivory;
        color: rgb(83, 77, 24);
    }
    header li{
        font-size: 30px;
        font-weight: bolder;
    }
</style>

💡 이때 아래 작성한 후손 선택자의 스타일이 자손 선택자 스타일이 덮어씌워지지 않는 이유는 직접 연결된 선택자가 더 우선순위를 가지기 때문이다.

구조 선택자

선택자:first-child : 선택자로 작성된 태그 중 첫번째 태그를 골라낸다.

선택자:last-child : 선택자로 선택된 태그 중 마지막 태그를 골라낸다.

선택자:nth-child(숫자) : 선택자로 선택된 태그 중 n번째 태그를 골라낸다.

💡 기준은 타입이 아닌 같은 레벨로 해당 구조 안에서 찾기 때문에 구조에 해당 태그가 없으면 찾을 수 없다.

<div id="container7">
    <span>span</span>
    <h5>1</h5>
    <h5>2</h5>
    <h5>3</h5>
    <h5>4</h5>
    <h5>5</h5>
    <div>
        <h5>inner 1</h5>
        <h5>inner 2</h5>
        <h5>inner 3</h5>
        <h5>inner 4</h5>
    </div>
    <h5>6</h5>
    <h5>7</h5>
</div>
<style>
    /* h5위에 다른 태그가 들어가는 순간 실행하지 않음.
		같은 노드 안에서 첫번째에 있으면 style적용, 아니면 적용하지 않음 */
    div#container7>h5:first-child{
        background-color: lightskyblue;
    }
    /* inner1에 스타일이 적용된다. */
    div#container7 h5:first-child{
        background-color:lavender;
    }
    div#container7 h5:last-child{
        background-color: mediumaquamarine;
    }
    /* 1-span, 2-h5{1}, 3-h5{2} 이기 때문에 2의 백그라운드 색이 변경 */
    div#container7 h5:nth-child(3){
        background-color: lightsalmon;
    }
</style>

선택자