CSS 선택자

기본

전체 선택자 (*)

* {

 

}

 

태그  : 태그의 이름을 선택

li {

   color: red;

}

 

클래스 선택자 : 지정된 클래스 이름을 선택

.orange {

   color: orange;

}

 

아이디 선택자 : 전역속성 아이디 이름을 선택

#orange {

   color: orange;

}

 

 

복합

자식 선택자 : ABC > XYZ 

ul > .orange {

    color: orange;

}

 

하위 서택자 : ABC (띄어쓰기) XYX

ul .orange {

    color: orange;

}

 

인접 형제 선택자 : ABC + XYZ; ABC 바로 다음 XYZ

오랜지 클래스의 바로 다음 li태그

.orange + li {

    color: orange;

}

 

인접 형제 선택자 : ABC ~ XYZ; ABC 바로 모든 XYZ

오랜지 클래스의 모든 li태그

.orange ~ li {

    color: orange;

}

 

가상클래스 선택자 : 동작을 나타내는 클래스

:hover

box클래스에 마우스를 올려놓으면 1초동안 300px로 늘어난다.

.box {

   width: 300px;

   transition: 1s;

}

.box:hover {

    width: 300px

}

 

:active

클릭을 하는 동안

 

:focus

포커스가 되어 있는 동안

input

 

tabindex속성 : focus가 될 수 있는 요소를 만드는 속성

 

:first-child : 형제요소 중 첫째

.orange span:first-child

orange클래스 하위 클래스 중 첫 번째 요소

만약 span아닌게 첫번째라면 선택이 안된다.

 

:last-child : 형제요소 중 마지막

.orange span:last-child

orange클래스 하위 클래스 중 첫 마지막 요소

만약 span아닌게 첫번째라면 선택이 안된다.

 

:nth-child(k) : k번째 요소

:nth-child(kn): k*n번째요소 n은 0부터 시작

 

:not(선택자) : 선택자 아닌 모든 선택자 ; 부정 선택자

 

 

가상요소 선택자

::before : content앞에 삽입

.box::before {

   content: "앞!";

}

 

<div class="box">

  (띄어쓰기 됨)

   Contents!

</div>

--> 앞! Contents!

 

::after : content앞에 삽입

.box::after {

   content: "뒤!";

}

 

<div class="box">

  (띄어쓰기 됨)

   Contents!

</div>

--> Contents! 뒤!

 

 

속성선택자 : 속성을 선택 [ABC]

[disabled] {

  color: red;

}

 

[속성="값"] 가능

 

 

상속 : 부모의 스타일이 하위요소에 적용된다. (

--> 글자, 문자랑 관련되어있는 것들 대부분이 상속된다.

 

.parent {

    width: 300px;

    height: 200px;

    background-color: orange;

}

 

.child {

    width: 200px;

    height: inherit;

    background-color: inherit;

}

 

선택자 우선순위

선택자 점수에 따라 우선순위가 부여됨.

같은 점수면 해석 순서