[HTML/CSS] selector

까꿍·2023년 6월 7일

CSS html

HTMLCSS

목록 보기

6/8

selector를 이용해 css 코드 양을 줄이고 효율적인 코드를 짜보자!

📍 selector

CSS 선택자
선택자를 통해 원하는 요소들을 선택해 css를 적용시켜줄 수 있다.

1. 공백

~ 안에 있는
모든 자식 속성도 포함시킨다.

.navbar li{
	display: inline-block;

<nav class="navbar">
  <li>
  	<li> nav → li → li도 적용! </li>
  </li>
</nav>

➥ navbar class 안에 있는 모든 li 속성들은 아래의 style 속성을 적용시킨다.

2. >

~ 안에 있는
직계 자식만 적용시킨다.

.navbar>li{
	display: inline-block;
}

<nav class="navbar">
  <li>
  	<li> nav → li까지만 적용! </li>
  </li>
</nav>

🧐 a 태그의 속성들

a 태그에 연결
text-decoration: none; : a 태그의 밑줄을 제거해준다.
a:link {속성} : a 태그의 기본 속성으로 클릭 전을 의미한다.
a: visited {속성} : a 태그에 연결된 링크로 이동 후, 클릭 후를 의미한다.
a: hover {속성} : a 태그 위에 마우스를 올렸두었을 때(클릭과 관련 x)를 의미한다.
a: active {속성} : a 태그를 클릭하는 순간을 의미한다.