[CSS] 선택자

 

속성 선택자

대괄호 안에 속성(attribute)이나 속성(attribute)+값(value)을 넣어서 선택합니다.

 

[attr]

a[target]

<a href="https://pinenamu.tistory.com" target="_blank">서울</a>

a[target] {
    color: goldenrod;
}

[attr=value]

a[href="https://pinenamu.tistory.com"]

<ul>
    <li>
        <a href="https://pinenamu.tistory.com" target="_blank">서울</a>
    </li>
    <li>
        <a href="https://pinenamu.tistory.com" target="_blank">인천</a>
    </li>
    <li>
        <a href="https://test.com">세종</a>
    </li>
    <li>
        <a href="https://pinenamu.tistory.com">대전</a>
    </li>
</ul>

a[href="https://test.com"] {
    background-color: goldenrod;
}

 

input[type="submit"]

<input type="text">
<input type="button">
<input type="submit">

input[type="submit"] {
    background-color: goldenrod;
}

 

 

[attr^=value]

속성의 값이 value로 시작하는 속성을 선택합니다.

<ul>
    <li>
        <a href="https://pinenamu.tistory.com" target="_blank">서울</a>
    </li>
    <li>
        <a href="https://pinenamu.tistory.com" target="_blank">인천</a>
    </li>
    <li>
        <a href="http://test.com">세종</a>
    </li>
    <li>
        <a href="http://pinenamu.tistory.com">대전</a>
    </li>
</ul>

a[href^="https"] {
    background-color: turquoise;
}

[attr$=value]

속성의 값이 value로 끝나는 속성을 선택합니다.

a[href^="https"] {
    background-color: turquoise;
}

 

[attr*=value]

속성의 값이 value로 적어도 하나 포함(중간, 앞, 뒤, 아무곳)하는 속성을 선택합니다.

a[href*="https"] {
    background-color: turquoise;
}

 

---

가상클래스 선택자

 

:first-child

자식 요소 중 첫번째 자식(많은 형제 중 첫번째) 요소만 선택

태그, 클래스 이름, 아이디 이름 선택 가능

 

li:first-child

<h2>떡볶이</h2>
<ul>
    <li class="food">아딸</li>
    <li class="food">신전</li>
    <li class="food">엽기</li>
    <li class="food">배떡</li>
    <li class="food">할매</li>
</ul>

<ol>
    <li>일반</li>
    <li>로제</li>
    <li>크림</li>
</ol>

<h2>스파게티</h2>
<p>
    <span>치즈오븐스파게티</span>
    <span>크림스파게티</span>
    <span>로제스파게티</span>
</p>

li:first-child {
    color: palevioletred;
}

:last-child

자식 요소 중 마지막 자식(많은 형제 중 마지막) 요소만 선택

 

:nth-chid( n )

자식 요소 중 n번째 요소 선택

li:nth-child(3) {
    color: palevioletred;
}

/*홀수*/
li:nth-child(even) {
    color: palevioletred;
}

/*짝수*/
li:nth-child(odd) {
    color: palevioletred;
}

 

:first-of-type

타입 중 첫번째(태그 이름 중 첫번째) 자식요소를 선택합니다.

 

p:first-of-type

<section>
    <div>진라면</div>
    <div>삼양라면</div>
    <p>불닭볶음면</p>
    <p>불닭볶음면</p>
    <p>불닭볶음면</p>
    <div>삼양라면</div>
    <div>삼양라면</div>
</section>

p:first-of-type {
    color: palevioletred;
}

많은 p 태그 중 첫번째 p 태그 선택

 

같은 이름 class 중 타입 중 첫번째 자식 요소 선택

 - div의 첫번째 자식, p의 첫번째 자식

<section>
    <div class="food">div 진라면</div>
    <div class="food">div 삼양라면</div>
    <p class="food">p 불닭볶음면</p>
    <p class="food">p 불닭볶음면</p>
    <p class="food">p 불닭볶음면</p>
    <div class="food">div 삼양라면</div>
    <div class="food">div 삼양라면</div>
</section>

.food:first-of-type {
    color: palevioletred;
}

 

:last-of-type

타입 중 마지막(태그 이름 중 마지막 형제)를 선택합니다.

:nth-of-type( n )

타입 중 n번째(태그 이름 중 n번째 형제)를 선택합니다.

 

 

selector1:not(selector2)

selector1은 선택하는데, selector2를 제외한 나머지를 선택한다.

 

.food:not(p)

 - food클래스 중 p태그를 제외하고 선택한다. 

<section>
    <div class="food">div 진라면</div>
    <div class="food">div 삼양라면</div>
    <p class="food">p 불닭볶음면</p>
    <p class="food">p 불닭볶음면</p>
    <p class="food">p 불닭볶음면</p>
    <div class="food">div 삼양라면</div>
    <div class="food">div 삼양라면</div>
</section>

.food:not(p){
    color: palevioletred;
}

:only-child
:only-child { } 자식 요소가 딱 한개인 경우 선택

---

동적 가상클래스 선택자

하이퍼링크에 적용하는 선택자

 

a : link 

방문한 적이 없을 때 선택

a:link{
	color : tomato;
}

 

a : visited

방문한 적이 있을 때 선택

 

[선택자] : hover

마우스를 올렸을 때 마우스를 올린 요소가 선택됩니다.

<div>
    <input type="button" value="클릭">
    <input type="button" value="클릭">
    <input type="button" value="클릭">
    <input type="button" value="클릭">
</div>

input[type=button]:hover{
    background-color: palevioletred;
}

 

[선택자] : active

마우스 버튼을 누르는 순간부터 떼는 순간 선택됩니다.

 

:link -> :visited -> :hover -> active 순서대로 선택자가 적용됩니다.

 

[선택자] : focus

특정 요소가 포커싱이 되었을때 선택됩니다.

 

 

---

가상 요소 선택자

selector::before

가상의 content를 만들어서 꾸미기 요소시에 활용한다.

실제 내용 바로 앞에서 생성되는 자식요소

.love::before {
    content: "🥩";
}

 

selector::after

실제 내용 바로 뒤에서 생성되는 자식요소​

.love::after {
    content: "🥩";
}

 

::before와 ::after를 쓸 땐 content라 속성이 꼭 필요하다고 합니다.

 

 

befor, afer로 대괄호[ ] 만들어서 붙이기 예시

div::before {
    content: "[";
}

div::after {
    content: "]";
}

 

::after로 "|" 붙이기

span::after {
    content: "|";
    margin: 10px;
    font-size: 20px;
    color: tomato;
}

 

::first-letter

/*첫번째 글짜*/
.lang::first-letter {
    color: tomato;
    font-size: 20px;
}

 

::first-line

/*첫번째 라인*/
.lang::first-line {
    color: tomato;
    font-size: 20px;
}

 

 

::selection

/*드래그하여 선택된 경우*/
.lang::selection {
    background-color: blue;
    color: white;
}

---

선택자 결합

 

하위 선택자 : 공백

div ul

 

직속 자식 선택자 : >

div > ul 

 

 

일반형제 선택 : ~

같은 부모를 갖는다면 선택합니다.

div ~ .lang

 

인접형제 선택 : +

인접한 태그끼리 선택합니다.

div + lang

 

 

type="checkbox"가 checked된 경우 형제인 label을 선택

:nth~child(3) ~ li { } 자식 요소 3번째부터 li 요소 선택