CSS Selector

CSS 셀렉터란?

스타일을 지정한 대상을 의미한다.

유니버셜 셀렉터

모든 요소를 선택한다.

*{
    margin: 0;
    padding: 0;
}

타입 셀렉터

지정한 요소를 선택한다. 어러개를 지정하는 경우에는 쉼표(,)로 구분한다.

strong, em {
    font-weight: 600;
    font-size: 1em;
    color: #ff6600;
}

속성 셀렉터

E[foo=”bar”]

지정한 속성명과 속성값이 동일한 요소에 스타일을 적용시킨다.

a[rel="external"] {

}

E[foo~=”bar”]

지정한 속성명과 속성값을 포함하고 있는 여러 요소에 스타일을 적용시킨다.

p[class~="cen"] {

}

E[foo^=”bar”]

지정한 속성명과 속성값으로 시작하는 요소에 스타일을 적용시킨다.

div[id^="side"] {

}

E[foo$=”bar”]

지정한 속성명과 속성값으로 끝나는 요소에 스타일을 적용시킨다.

img[src$=".gif"]{ {

}

E[foo*=”bar”]

지정한 속성명과 속성값을 포함한 요소에 스타일을 적용시킨다.

div[id*="ext"] {

}

E[hreflang|=”en”]

hreflang 속성과 속성값을 가진 요소에 스타일을 적용시킨다.

a[hreflang|="ko"] {

}

유사 요소

E::first-line

요소의 첫번째 행에 스타일을 적용시킨다. 블록요소에만 적용된다.

p {

}

p::first-line{

}

E::first-letter

요소의 제일 첫번째 문자에 스타일을 적용시킨다.
첫번째 문자가 특수문자인 경우에는 그 다음 문자와 함께 스타일이 적용된다.
블록요소에만 적용된다.
속성에 대하여 제한이 있다.

p::first-letter {

}

E::selection

선택한 부분에 스타일을 적용시킨다.

p::selection {

}

E::before

요소의 포함 된 내용 앞에 내용을 생성시킨다.

p::before {
    content:"ugoon's";
}

E::after

요소의 포함 된 내용 뒤에 내용을 생성시킨다.

p::after {
    content:"css selector";
}

클래스 셀렉터

class 속성 값에 따라 스타일을 적용시킨다.

.foo {
    color: red;
}

ID 셀렉터

id 속성 값에 따라 스타일을 적용시킨다.

#foo {
    color: red;
}

부정 유사클래스

요소 중에서 “s”가 아닌 것에 스타일을 적용시킨다.

input:not([type="text"]) {
    background:yellow;
}

자손 셀렉터

부모 요소에 포함된 모든 자식 요소에 스타일을 적용시킨다.

E F {
    
}

자식 셀렉터

부모 요소에 포함된 직접적인 자식 요소에 스타일을 적용시킨다.

E > F {
    
}

인접 셀렉터

부모 요소에서 바로 직접적으로 연결되어 있는 다음 요소에 스타일을 적용시킨다.

E + F {
    
}

간접 셀렉터

해당 요소 뒤에 출현하는 요소에 스타일을 적용시킨다.

E ~ F {
    
}

구조 유사 클래스

E:root

문서 안 루트요소에 스타일을 적용한다.

:root{

}

E:nth-child(n)

부모 요소의 n번째 자식 요소에 스타일을 적용시킨다.

div.guide p:nth-child(7){

}

/* odd와 동일 */
div.guide p:nth-child(odd){

}

div.guide p:nth-child(even){

}

/* even과 동일 */
div.guide p:nth-child(2n){

}

E:nth-last-child(n)

부모 요소의 마지막으로 부터 n번째 자식 요소에 스타일을 적용시킨다.

div.guide p:nth-last-child(3){

}

E:nth-of-type(n)

부모 요소의 형제관계인 n번째 요소에 스타일을 적용시킨다.

div.guide p:nth-of-child(3){
    
}

E:nth-last-of-type(n)

부모 요소의 마지막으로부터 형제관계인 n번째 요소에 스타일을 적용시킨다.

div.guide p:nth-last-of-child(3){
    
}

E:first-child

부모요소의 첫번째 요소에 스타일을 적용시킨다.

div.guide p:first-child{
    
}

E:last-child

부모요소의 마지막 요소에 스타일을 적용시킨다.

div.guide p:last-child{
    
}

E:first-of-child

부모요소의 형제관계의 같은 이름을 가지고 있는 첫번째 요소에 스타일을 적용시킨다.

div.guide p:first-of-child{
    
}

E:last-of-child

부모요소의 형제관계의 같은 이름을 가지고 있는 마지막 요소에 스타일을 적용시킨다.

div.guide p:last-of-child{
    
}

E:only-of-type

부모요소 안에 유일한 요소에 스타일을 적용시킨다.

div.guide p:only-of-type{

}

E:empty

자식요소를 전혀 가지고 있지 않은 요소에 스타일을 적용시킨다.

사용 예

div.guide p:empty{

}

링크 유사 클래스

E:link

유저가 아직 방문하지 않은 링크에 스타일을 적용시킨다.

a:link{

}

E:visited

유저가 방문하였던 링크에 스타일을 적용시킨다.

a:visited{

}

유저 액션 유사 클래스

E:active

대상 요소가 액티브하였을 때 스타일을 적용시킨다. (마우스를 클릭하고 버튼에서 손을 떼었을때)

a:active{
    
}

E:hover

대상 요소가 가리켜지고 있을 때 스타일을 적용시킨다. (롤 오버)

a:visited{
    
}

E:focus

대상 요소가 포커스 되었을 때 스타일을 적용시킨다.

input:focus, textarea:focus{

}

타켓 유사 클래스

E:target

URI에 앵커링크가 지정되어 있는 링크에 액티브 하였을 때 스타일을 적용시킨다.

*:target{
    ...
    background:url("target.gif") no-repeat right center;
}

언어 유사 클래스

E:lang(ko)

요소 중 ko와 일치하는 lang속성값을 가진 요소에 스타일을 적용시킨다.

p:lang(ko){
           
}

UI 요소 상태 유사 클래스

E:enabled

포커스 입력이 가능한 것은 유효한 것에 스타일을 적용시킨다.

E:disabled

포커스 입력이 불가능한 것은 유효한 것에 스타일을 적용시킨다.

E:checked

라디오 버튼, 체크박스가 체크가 된 상태의 스타일을 적용시킨다.

2019 ugoon.net