#15 - CSS 기초 - 선택자

CSS 선택자

CSS 스타일을 입히려면 태그를 선택해야 하며, 그 방법에는 여러 가지가 있다.

태그 선택자

원하는 태그를 입력하여 선택

 

태그이름{
    속성자 : 속성 값;
}

클래스 선택자

원하는 클래스 이름을 입력하여 선택

 

.클래스이름{
    속성자 : 속성 값;
}

아이디 선택자

원하는 아이디 이름을 입력하여 선택

 

#아이디이름{
    속성자 : 속성 값;
}

전체 선택자

선택한 요소(.class) 내부의 모든 요소(*) 선택

 

.class *{
    속성자 : 속성 값;
}

혼합 선택

조건에 맞는 요소를 선택자를 혼합하여 선택

 

/* 특정 클래스를 가진 태그를 선택 */
태그.클래스{
    속성 : 속성값 ;
}

/* 부모 요소의 직계 자식 요소를 선택 */
부모태그 > .자식클래스{
    속성 : 속성값 ;
}

/* 부모 요소의 모든 하위 요소를 선택 */
부모태그 .모든하위클래스{
    속성 : 속성값 ;
}

/* 기준으로 인접한 다음 형제 요소를 선택 */
.기준클래스 + 형제태그{
    속성 : 속성값 ;
}

/* 기준으로 다음 형제 요소를 모두 선택 */
.기준클래스 ~ 형제태그{
    속성 : 속성값 ;
}

가상 클래스 선택 - 상태

마우스 상태에 따른 요소를 선택

 

/*-------------마우스 이벤트-------------*/
/* 마우스가 요소에 올라가있을 때 */
선택자:hover{
    속성 : 속성 값;
}

/* 요소를 클릭하고 있을 때 */
선택자:active{
    속성 : 속성 값;
}

/* 탭으로 이동하여 요소에 포커스 되었을 때 */
선택자:focus{
    속성 : 속성 값;
}

가상 클래스 선택 - n번째

n번째 요소를 선택

 

/*-------------n번째 요소 찾기-------------*/
/* 형제 요소 중 첫번째 요소 선택 */
선택자:first-child{
    속성 : 속성 값;
}
/* 태그 하위 요소 중 첫번째 요소 선택 */
선택자 :first-child{
    속성 : 속성 값;
}

/* 형제 요소 중 마지막 요소 선택 */
태그:last-child{
    속성 : 속성 값;
}

/* 형제 요소 중 n번째 요소 선택 */
선택자:nth-child(n){
    속성 : 속성 값;
}

/* 형제 요소 중 3배수 요소 선택 */
선택자:nth-child(3n){
    속성 : 속성 값;
}

/* 형제 요소 중 3 이후 요소 선택 */
선택자:nth-child(n+3){
    속성 : 속성 값;
}

/* 형제 요소 중, 동일 태그를 가진 n번째 요소 선택 */
태그:nth-of-type(n){
    속성 : 속성 값;
}

/* s선택자를 제외하고, 선택자를 선택한다 */
선택자:not(s){
    속성 : 속성 값;
}

가상 요소 선택

/*요소 내부 맨앞에 내용을 삽입*/
선택자::before{
    content : "필수 요소. 삽입 될 텍스트를 입력하거나 비워둔다";
}

/*요소 내부 맨뒤에 내용을 삽입*/
선택자::after{
    content : "필수 요소. 삽입 될 텍스트를 입력하거나 비워둔다";
}

가상 클래스 + 가상 요소 선택

/* 혼합 사용 */
.class:hover::before{
    content : "mixed";
}

 

속성 선택

특정 속성을 가진 요소 선택

 

/* 속성을 포함하는 요소 선택 */
[속성이름] {
    속성 : 속성 값;
}
[disable] {
    color : white;
}

/* 속성 값을 포함하는 요소 선택 */
[속성이름="값"] {
    속성 : 속성 값;
}
[type="text"] {
    color : white;
}

/* 속성 값으로 시작하는 요소 선택 */
[속성이름^="값"] {
    속성 : 속성 값;
}

[class^="text-"] {
    color : white;
}

/* 속성 값으로 끝나는 요소 선택 */
[속성이름$="값"] {
    속성 : 속성 값;
}

[class$="-text"] {
    color : white;
}