[CSS] 선택자(selector)모음

공부하면서 정리한 내용입니다
참고한 내용은 맨 아래의 링크를 확인해주세요

---

🎀 기본 선택자

*{ } 	/*전체 선택자*/

div{ } 	/*태그 선택자(태그명을 정확하게 표기)*/

.classname{ }	/*클래스 선택자 (classname변경가능)*/

#idname{ }	/*ID 선택자 (idname변경가능)*/

🎀 복합 선택자

하위선택자와 자식선택자

div ul {}	 /*하위선택자: 해당하는 모든 하위요소*/

div>ul {}	 /*자식선택자: 바로 아래 자식요소*/

조금 더 자세히 설명하자면

<!--HTML-->
<div>  <!-- div가 부모일때-->
    <ul></ul>   <!-- 자식선택자로 이 태그만 선택할 수 있음-->
    <div>
        <ul></ul>  <!-- 하위선택자는 이 태그까지 선택할 수 있음 -->
    </div>
<div>

여기서 확실하게 해야할 것은 div가 여러개 이므로 부모div를 정확하게 명시해줘야한다.

<!--HTML-->
<div class="eric"></div>

/* CSS */
div.eric>ul

인접형제선택자와 일반형제선택자

div+ul {} 	/*인접 형제 선택자: div를 뒤따르는 ul요소를 선택. 다른요소가 사이에 존재하면 선택하지 않음*/

div~ul {}	 /*일반 형제 선택자: div가 앞에 존재하면 ul을 선택 (div가 먼저 등장하지않으면 미선택)*/

<!--HTML-->
<div>  <!-- div가 부모일때-->
    <ul></ul>  <!-- 바로 뒤따르는 형제만 선택 (인접형제)-->
    <ul></ul>  <!-- div부모가 있으면 모든 형제가 선택됨(일반형제) -->
<div>

🎀 속성 선택자

div[attr]{} /*속성 선택자: 속성이 포함된 요소(attr은 type, name, value, 등이 될 수 있다.)*/

HTML이 아래의 코드를 가질 경우, 속성값으로 다양하게 표기할 수 있다.

<!--HTML-->
<div name="textRed"> color is red </div>

div[name              ] {} /*name값 상관없이 적용됨*/

div[name   = "textRed"] {} /*속성값이 정확하게 일치하는 요소*/

div[name ~ = "textRed"] {} /*속성값이 포함되는 요소(공백포함)*/

div[name ^ = "textRed"] {} /*속성값으로 시작하는 요소*/

div[name $ = "textRed"] {} /*속성값으로 끝나는 요소*/

div[name * = "textRed"] {} /*속성값이 포함되는 요소*/

div[name | = "textRed"] {} /*속성값이 정확하게 일치하거나, 속성값으로 시작되는 요소*/

🎀 가상 클래스 선택자

a:link {} /*방문하지 않은 링크*/

a:visited {} /*방문한 링크*/

a:active {} /*요소가 클릭 또는 엔터 되는 순간*/

a:hover {}  /*요소에 마우스가 올라가 있는 동안*/

a:focus {}  /*요소에 포커스가 머물러 있는 동안*/

🎀 구조적 가상 클래스 선택자

p:nth-child(n) {}        /*앞에서부터 지정된 순서와 일치하는 p요소 (p아닌 요소도 순서에 포함)*/

p:nth-last-child(n) {}   /*뒤에서부터 지정된 순서와 일치하는 p요소 (p아닌 요소도 순서에 포함)*/

p:nth-of-type(n) {}      /*p중에서 nth-child인 요소*/

p:nth-last-of-type(n) {} /*p중에서 nth-last-child인 요소*/

p:first-child {} /*첫번째에 등장하는 p (p아닌 요소도 순서에 포함)*/

p:last-child {} /*마지막에 등장하는 p (p아닌 요소도 순서에 포함)*/

p:first-of-type {} /*p중에 first-child인 요소*/

p:last-of-type {} /*p중에 last-child인 요소*/

p:empty {} /*테스트 및 공백을 포함하여 자식요소가 없는 요소*/

🎀 UI요소 상태 선택자

input:enabled {} /*사용 가능 폼 선택 input, textarea, select, button*/

input:disabled {} /*사용 불가능 폼 선택 input, textarea, select, button*/

input:checked {} /*선택된 폼 선택 input(checkbox, radio)*/

🎀 가상 요소 선택자

HTML에는 존재하지않고 CSS에서만 존재하는 것으로 javascript에서 제어하기 어렵다.

div::first-line {} /*첫번째 줄 선택*/

div::first-letter{} /*첫번째 문자 선택*/

div::before {} /*요소 시작 지점에서 생성된 요소를 선택*/

div::after {} /*요소 끝 지점에서 생성된 요소를 선택*/

::first-line과 ::first-letter 비교

p{
    width: 300px;
}
p::first-line{
    color: tomato;
}

p::first-letter{
   color: tomato;
}

::before와 ::after
어디까지나 스타일 목적이며 브라우저에서 실제 컨텐트로 다루지 않는다.
실제 컨텐트로 다뤄져야하는 경우에는 당연히 평소처럼 HTML을 사용해야 합니다.
content 속성에는 단순 텍스트 뿐만 아니라 이미지도 사용할 수 있다.
이들은 반복되는 스타일을 적용 할 때나 컨텐츠(개발자모드)에 노출되지 않게 하는데 유용하다.

예시1) 텍스트 출력

p::after,
p::before{
   color: tomato;
   content: "what"; 
}

예시2) 텍스트 토글

#text::before{
   content: "(마우스오버)";
}
#text.change::before{
    color: tomato;
    content: "(확인되엇습니다)";
}

// javascript

const p = document.getElementById("text");

p.addEventListener("mouseover", (e)=>{
    p.classList.add("change");
})
p.addEventListener("mouseleave", ()=>{
    p.classList.remove("change")
});

예시3) 이미지 토글

#text.change::after{
    color: tomato;
    background: url("/resources/image/draw.png") no-repeat 50% 50%;
    content: "";
    display: inline-block;
    height: 300px;
    width: 300px;
}

🎀 선택자 우선 순위

!important > id (100점) > class (10점) > tab (1점) > * (0점)

괄호안의 점수로 CSS우선순위를 계산한다. 가상선택자는 제외

---

Reference

1) https://webroadcast.tistory.com/4

::before ::after content에 대해 쌉 이해 가능

2) https://developer.mozilla.org/ko/docs/Web/CSS/@import

@import - CSS: Cascading Style Sheets | MDN

3) https://www.nextree.co.kr/p8468/

CSS: 선택자(Selector) 이해