[HTML+CSS] 기억하면 좋은 CSS 선택자 (Selector) (1)

1 .# (Selector)

 

#flex {
	width: 50px;
    margin : auto;

}

 

▶id선택자이다. (# + 선택자) 의 형태로 id 값을 적용 대상으로 삼으며 , id 사용할때 중요한것은 class와 다르게 한페이지에서 한번만 사용이 가능합니다. 또한 class와의 우선순위는 id>class>태그 순으로 적용된다는점을 알아야 함.

 

2. .(className)

 

.btn {
	color : blue;
}

 

▶ Class선택자이다. id와 class의 차이라면 class는 선택자의 대상이 여러개의 요소가 가능하며 자주 사용하는 선택자를

 

사용하는데 많이 쓰인다. 스타일의 한그룹에 적용할 시에는 class를 사용하는 것이 좋다. 

 

 

3. * 

* {margin: 0; padding : 0;}

 

 

▶ *의 경우 페이지 전체를 대상으로 하는 용도입니다. 보통은 margin값과 padding 값으로 세팅을 하려고 많이 사용합니다. 또한 *을 자식선택자에도 사용할 수 있습니다.  

 

#container  * {
	border: 1px solid black
}

 

4. (Selector)

 

▶ type 속성에 따른 한페이지 안에 있는 모든 요소를 대상으로 삼고자 한다면 type자체를 이용하여 class선택자를 이용하면된다.

 

 

a {
	color:red;
}

ul {
	background-color : 
}

ol {
	font-size: 50px
}

 

 

5. : visited, : link

 

a: link { color : powderblue}

a: visited {color : skyblue}

 

▶ visited는 방문했었던 앵커 태그에 특정한 스타일 적용 가능 

 

    link는 클릭하기 전에 앵커 태그 전체를 대상으로 함

 

 

6. Selector1 > Selctor

 

▶ 이전에 블로그에서 포스팅 했던 조상 자식 선택자입니다. 앞에서 작성된 포스팅을 확인하면 될거 같습니다. 

 

2021.09.28 - [지토의 개발일기/html + CSS] - [ HTML+CSS] 부모 자식 선택자

 

 

7 . Selector1+ Selector2

 

p + a {color : black}

 

▶ 인접 선택자로 부터 부를 수 있는 선택자 입니다. 위의 코드를 보면 p태그 뒤에 오는 a태그 첫 번째 텍스트만 검정색

 

이 됩니다.

 

 

9.  [속성이름~="속성값"] 선택자

 

 

 

▶ 아래의 예시를 보면 title ~= "first"는 title 선택자에 first 가 들어가 있는 경우 그값만 CSS를 적용하는 것

 

 

See the Pen by yeojinho (@yeojinho) on CodePen.

 

 

10. Selector [title]

[속성이름="속성값"]

a[title] {color: orange;}

 

▶ [속성이름="속성값"] 선택자는 특정 속성을 가지고 있으며, 해당 속성의 속성값까지 일치하는 요소를 모두 선택합니다.

 

 

See the Pen by yeojinho (@yeojinho) on CodePen.