[코드라이언] 선택자 심화 -Day12-

원래 내가 알고 있었던 CSS의 선택자들은 빙산의 일각이었다....

12일째 날에는 css 선택자(selector)에 어떤 것들이 있는지 그리고 항상 눈으로 봐와서 어떤건지만 대~충 알고 있었던 "가상 클래스 선택자"와 "가상 요소 선택자"를 좀 더 자세히 알게 되었다.

 

그리고 드디어 CSS의 하이라이트, Flex 진도를 나가게 되었다... 무서워...

 

---

 

https://www.w3schools.com/cssref/css_selectors.asp

CSS Selectors Reference

W3C에서 CSS 선택자 리스트를 볼 수 있다.

 

 

 

 

 

 

 

 

 

선택자 심화학습

 

input[type="text"]{
	border:1px solid green;
}

input[type="button]{
	background-color:crimson;
}

<input>태그 중 타입에따라 선택할 수 있는 선택자. 이러한 선택자를 "속성 선택자"라 한다.

 

 

a[href] {
	color:gray;
}

    a 태그 이면서 href 속성을 가지고 있는 요소 선택

 

 

p[class="paullab"] {

Font-size: 48px;

}

Class명이 공백을 포함하지 않고 정확히 "paullab"인 클래스 선택

 

 

p[class~="paul"] {

Text-align: center;

}

Class명 단어에 "paul"이 포함되는  class선택 (문자열이 아닌 단어! 공백으로 구분)

 

 

p[class*="paul"] {

Color:red;

}

Class명에 "paul"이라는 문자열을 포함한 모든 class선택

(뒤에 공백을 주면 'paul '을 포함한 모든 class를 선택하지만 'test paul'처럼 paul단어 앞에 공백이 있는 것은 선택하지 못함. 그러므로 [class~="paul"]을 쓰는게 간단하다.)

 

 

div[class^="sky"]{
	background-color:purple;
}

div 태그이면서 class 값이 sky로 시작하는 요소

 

 

div[class$="pink"]{
	background-color:pink;
}

div 태그이면서 class 값이 pink로 끝나는 요소

(class$ / class^ 등은 다른 속성값을 넣을 수 있다. a[href^="https"] 처럼)

 

 

 

가상 클래스 선택자

가상으로 class를 만들어 선택하는 것.

 

a:hover{  } - <a>태그에 마우스 오버 했을 때

a:visited{  } - 방문 후 링크 상태 (보안 문제로 사용할 수 있는 속성이 제한적이다)

a:link{  } - 방문 전 링크 상태

 

*:only-child - 모든 태그 중 유일하나인 자식 태그

.small : last-child - "small"클래스 값을 가진 태그 들 중 마지막 자식 태그

 

li : empty - <li>태그 중 콘텐츠가 비어있는 태그

li : nth-chid(3) - <li>의 자식 요소 중 3번째 자식

div : not(:first-child) - 첫번째 자식이 아닌 모든 <div>태그 들을 선택

:not(#fancy) - id 값이 "fancy"가 아닌 모든 요소들을 선택

*not이 들어간 부정 가상 선택자는 최신에 채택된 선택자라 IE에서는 지원하지 않는다....

 

input : first-of-type - 모든 <input>태그 중 첫번째 태그

input : nth-of-type(2) - 모든 <input> 태그 중 2번째 태그

input : nth-of-type(odd) - 모든 <input>태그 중 홀수번째 태그 ( (even)은 짝수번째 태그를 선택할 수 있다)

 

 

 

 

가상 요소 선택자

 

:: after / ::before -> 요소의 앞에 위치할 것인지 뒤에 위치할 것인지에 따라 after / before을 쓴다.

 

:: after { content: ' cm'; } => 하나의 가상 태그가 생긴것과 마찬가지임.

실제 html에는 존재하지 않는 가상의 태그이기 때문에 드래그 선택이 되지 않는다. (스크린 리더에서는 읽힘)

 

 

 

Flex는 내용이 많아서 다음 편에...