CSS - Cacading Style Sheet, Selector(선택자)

프론트엔드 개발/HTML CSS

CSS - Cacading Style Sheet, Selector(선택자)

snowman95 2021. 9. 3. 09:16

728x90

CSS란

CSS는 Cacading Style Sheet 이다.

Cascading은 스타일 시트가 적용되는 우선순위가 위에서 아래로 떨어지는 폭포형태로 적용된다는 의미이다.
문서에 여러 개의 스타일을 적용할 때 충돌하지 않도록 하기위한 2가지 방법이 있다.

스타일 우선순위 : 사용자/제작자/브라우저 스타일 순서로 우선순위를 가지고 적용됨
스타일 상속 : 태그의 포함 관계에 따라 부모요소를 자식요소로 전달함

스타일 우선순위

Style Sheet는 아래의 3가지 종류가 존재한다.

사용자 스타일
제작자 스타일
브라우저 기본 스타일

웹 페이지에 아무런 스타일 적용하지 않았을 때 3. 브라우저 기본 스타일이 기본으로 적용해 둔 스타일이 적용되고

제작자가 따로 스타일을 적용했다면 2. 제작자 스타일이 적용되어 보여진다.

그런데 위의 3가지 종류 중에 1. 사용자 스타일 이 가장 높은 우선순위를 가지므로 다크모드나 고대비 모드같은 것들을 적용해서 브라우저를 내 입맛대로 사용할 수 있는 것이다.

스타일 상속

웹 문서의 태그들은 서로 포함 관계가 있다.

<body> 태그는 웹 문서의 모든 태그의 부모 요소이다.

그래서 <body> 태그에 스타일을 지정하면 웹 문서 전체에 스타일 적용이 가능하다.

왜냐하면 부모 요소의 스타일이 자식 요소로 상속 되기 때문이다.

Selector (선택자)

선택자란 어느 요소에 스타일을 적용할 것인지 선택하는 것이다.

Selector	태그	적용 범위
Universal	*	모든 요소에 적용
type	Tag	특정 태그를 사용한 모든 요소에 적용
ID	#id	문서의 특정 부분에 한 번만 사용가능한 특정 id에 적용
Class	class	문서의 특정 부분에 여러 번 사용가능한 특정 class에 적용
State	:	특정 태그의 상태(State)에 따라 적용
Attribute	[]	특정 태그의 특정 속성(Attribute)에 적용

※ ID와 Class Selector의 차이는 문서에서 한 번만 적용 vs 여러 번 적용의 차이다.

기본 형태

selector {
  property: value;
}

Universal Selector : 모든 요소 선택

/* css/style.css */
* {
  color: red;
}

type Selector : 특정 태그 선택

/* css/style.css */
li {              → <li> 태그만 적용
  color: blue;
}

/* test.html */
<ol>
  <li id="something">Hi</li> → 이곳에 적용됨
</ol>

만약 여러 태그에 적용하고 싶다면?

/* css/style.css */
p, li {              → <p>와 <li> 태그만 적용
  color: blue;
}

ID Selector : id 속성값이 #something인 것 선택

/* css/style.css */
#something {
  color: blue;
}

/* test.html */
<ol>
  <li id="something">Hi</li> → 이곳에 적용됨
</ol>

Class Selector : class 속성값이 something인 것 선택

/* css/style.css */
.something {
  color: red;
}

/* test.html */
<div class="something"></div> → 이곳에 적용됨

Attribute Selector : 오프닝 테그안의 attribute(속성)을 가진 것 선택

/* for 속성을 가진것 */
[for]

/* <a>태그의 href 속성을 가진것 */
a[href] {
    color: green;
}

/* <a>태그의 href속성 값이 google.com인것 */
a[href="google.com"] {
    color: green;
}

/* <a>태그의 href 속성을 가진것 중 값이 google로 시작하는것 */
a[href^="google"] {
    color: green;
}

/* <a>태그의 href 속성을 가진것 중 값이 google로 끝나는것 */
a[href$="google"] {
    color: green;
}

/* <a>태그의 href 속성을 가진것 중 값이 google을 포함하는것 */
a[href*="google"] {
    color: green;
}

혼용도 가능 <li> 태그이면서 id="something"인 것 선택

/* css/style.css */
li#something {
  color: blue;
}

/* test.html */
<ol>
  <li id="something">Hi</li> → 이곳에만 적용됨
  <li id="bye">bye</li>
</ol>

button:상태
아래 예시는 button에 마우스가 올라가면 색상이 변경되는 코드

button:hover {
  color: blue;
}

Pseudo-Selector

Selector	설명
태그:first-child	해당 태그로 된 요소들 중에 첫번째
태그:last-child	해당 태그로 된 요소들 중에 마지막
태그:nth-child(n)	해당 태그로 된 요소들 중에 n번째 요소. n+1, 2n, 2n+1 등의 식으로 넣을 수도 있음.
태그a 태그b	부모태그 a 안에 있는 모든 자식태그 b
태그a > 태그b	부모태그 a 의 바로 아래에 있는 자식태그 b
태그a + 태그b	태그a의 바로 다음에 오는 형제태그 b
태그a ~ 태그b	태그a의 모든 형제태그 b
태그a[속성b]	태그a 중에서 속성b를 가지는 요소
태그a[속성b="값"]	태그a 중에서 속성b=값을 가지는 요소
태그a[속성b~="c"]	태그a 중에서 속성b의 값에 c를 포함하는 요소 ex) ~=name firstname, lastname 모두 name을 포함하므로 해당
태그a[속성b&="c"]	태그a 중에서 속성b의 값이 c로 끝나는 요소
태그a[속성b^="c"]	태그a 중에서 속성b의 값이 c로 시작하는 요소
태그:active	태그를 마우스가 클릭하고 있을 때
태그:hover	태그 위에 마우스가 올라갈 때
태그:focus	태그가 키보드로 선택될 때
태그:focus-within	자식 태그가 focus될 때 부모태그에 적용
태그:visited	a 태그에서 사용됨. 링크를 방문한 적 있을 때
태그a:상태 태그b	부모태그a 가 특정 상태되었을때 자식태그 b에 적용
input::placeholder	placeholder의 색상 변경 등을 적용하고 싶을 때 특징으로는 콜론이 2개임
태그::selection	태그가 마우스로 드레그 되었을 때

CSS Diner 사이트

CSS Selector 를 재밋는 게임으로 연습할 수 있는 사이트다.

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

헷갈리는 것 정리

A B (A와 A의 내부에 있는 B 선택)

plate apple : 접시와 접시 위 사과 선택

<plate> → 선택
  <apple /> → 선택
<plate>

A.className (클래스값으로 className을 가진 A 선택)

orange.small

<bento>
  <orange class="small" /> → 선택
</bento>
<plate>
  <orange class="small" /> → 선택
</plate>

A, B (모든 A와 B 선택)

bento, plate

<bento> → 선택
  <pickle /> → 선택
</bento>
<plate> → 선택
  <pickle /> → 선택
</plate>

**A * (A의 자식 모두 선택)**

plate *

<plate> → 선택
  <apple /> → 선택
</plate>
<plate> → 선택
  <pickle /> → 선택
</plate>

A > B (A의 자식 B 선택)

plate > apple (plate 자식이 apple 인것 선택)

<plate>
  <apple class="small" /> → 선택
</plate>
...
<plate>
  <bento>
    <apple />
  </bento>
</plate>

A + B (A 다음에 오는 B 하나 선택)

plate + apple (plate 다음에 있는 apple 하나 선택)

<plate />
<apple class="small" /> → 선택
<apple />
...
<plate />
<apple /> → 선택
<apple />

A ~ B (A 다음에 오는 모든 B 선택)

plate + apple (plate 다음에 있는 apple 모두 선택)

<plate />
<apple class="small" /> → 선택
<apple /> → 선택
...
<plate /> → 선택
<apple /> → 선택
<apple /> → 선택
<apple /> → 선택

:first-child (모든 요소의 첫번째 자식 선택)

A :first-child (A의 첫번째 요소 선택)

plate :first-child

<div class="table">
  <plate>
    <orange> → 선택
    <orange>
    <orange>
  </plate>
</div>

:only-child (자식이 딱 1개뿐인 요소의 자식 선택)

A :only-child (자식이 딱 1개뿐인 A의 자식 선택)

plate :only-child

<div class="table">
  <plate>
    <orange> → 선택
  </plate>
  <plate>
    <orange>
    <apple>
    <pickle>
  </plate>  
</div>

:last-child (모든 요소의 마지막 자식 선택)

A :last-child (A의 마지막 요소 선택)

만약에 자식이 없으면 본인이 선택됨.

.small :last-child

<div class="table">
  <plate>
    <apple class="small"> → 선택
  </plate>
  <plate>
    <apple class="small">
    <apple>
  </plate>
  <picle class="small"> → 선택
</div>

:nth-child(A) (모든 요소의 A번째 자식 선택)

:nth-child(3)

<div class="table">
  <plate />
  <plate />
  <plate /> → 선택  
</div>

:nth-last-child(A) (모든 요소들 중에서 뒤에서 A번째 자식 선택)

B:nth-last-child(A) (B 요소들 중에서 뒤에서 A번째 자식 선택)

만약에 자식이 없으면 본인이 선택됨.

bento:nth-last-child(3)

<div class="table">
  <plate />
  <bento /> → 선택
  <plate>
    <orange />
    <orange />
    <orange />
  </plate>
  <bento />
</div>

:first-of-type (가장 처음으로 등장하는 요소들 선택)

A:first-of-type (가장 처음 등장하는 A 선택)

apple:first-of-type

<div class="table">
  <plate />
  <bento /> → 선택
  <plate>
    <orange />
    <orange />
    <orange />
  </plate>
  <bento />
</div>

:nth-of-type(A) (A번째에 등장하는 요소들 선택)

:nth-of-type(odd) (홀수 번째에 등장하는 요소들 선택)

:nth-of-type(even) (짝수 번째에 등장하는 요소들 선택)

B:nth-of-type(A) (A번째에 등장하는 B 선택)

:nth-of-type(even)

<div class="table">
  <plate />
  <plate /> → 선택
  <plate />
  <plate /> → 선택
  <plate />
  <plate /> → 선택
</div>

:nth-of-type(An+B) (A번째에 등장하는 B 선택)

:nth-of-type(2n+1)

※ 반드시 n+숫자 순서로 와야하며, n=1부터 들어간다고 생각

<div class="table">
  <plate />
  <plate />
  <plate /> → 선택
  <plate />
  <plate /> → 선택
  <plate />
</div>

:only-of-type() (딱 1번 등장하는 모든 요소 선택)

A:only-of-type() (딱 1번 등장하는 A요소 선택)

<div class="table">
  <plate />
  <plate />
  <plate /> → 선택
  <plate />
  <plate /> → 선택
  <plate />
</div>

:empty() (자식이 없는 빈 요소 선택)

A:empty() (A요소 중 자식이 없는 빈요소 선택)

bneto:empty()

<div class="table">
  <bento /> → 선택
  <bento>
    <pickle class="small" />
  </bento>
  <plate />
  <bento /> → 선택
</div>

:not(A) (A를 포함하지 않는 요소 선택)

B:not(A) (B요소 중 A를 포함하지 않는 요소 선택)

apple:not(.small)

<div class="table">
  <plate>
    <apple class="small" />
  </plate>
  <plate>
    <apple> → 선택
  </plate>
  <apple /> → 선택
</div>

저작자표시 비영리 동일조건