CSS 선택자

선택자

출처 : 튜토리얼로 배우는 HTML & CSS

• 전체선택자는 * { }
• 타입선택자는 해당 타입 { }
• class선택자는 .classname{ }
  • class 속성은 한 페이지에 여러 개가 존재할 수 있기 때문에 동일한 class 속성이 들어간 요소들을 동시에 식별할 수 있다
  • 클래스는 중복이 가능하다는 특징 때문에 유니크한 class를 생성하여 자주 쓰는 스타일을 정의해두고 재사용하는것이 가능
• id선택자는 #idname { }
  • id 속성은 페이지에 있는 해당 요소를 유일하게 식별할 때
  • 같은 페이지 안에 id 값은 유일해야한다, 한 HTML 문서 내에서 딱 한개만 존재해야함

  선택자 목록

h1 {color: red;}
h2 {color: red;}
h3 {color: red;}
h4 {color: red;}
h5 {color: red;}
h6 {color: red;}
를
h1, h2, h3, h4, h5, h6 {color: red;} 로 쓸 수 있다

선택자 관계

/* 자손 */
div p {color: red; }
/* 형제 */
div + p {color: blue;}
/* 직계자식 */
 div > p {color: green;}

선택자 우선순위

1. 후자 우선의 원칙
2. 구체성(명시도)의 원칙
3. 중요성의 원칙

1.후자 우선의 원칙

동일한 선택자가 연속으로 사용되었을 경우 후자가 우선합니다.

2.구체성(Specificity)의 원칙

한 선택자가 다른 선택자보다 더 구체적으로 작성되었다면 구체적인 선택자가 우선합니다.

가중치

id > class > 타입` 순으로 style 적용

🍊 class선택자를 아무리 많이 써도 id선택자의 우선순위 가중치가 훨씬 높기 때문에 id가 우선이다~

<style>
 h1 {
    color: blue; /* 0001 점 */
    }
section h1 {
    color: red; /* 0002 점으로 선택 */
    }
.sector {
    color: blue; /* 0010 점 */
    }
section .sector {
    color: red; /* 0011 점으로 선택 */
	}
#one {
    color: blue; /* 0100 점 */
	}
section .sector #one {
    color: red; /* 0111 점으로 선택 */
    }
#one.two.three {
   color: red;
    }
h1.one.two.three {
   color: blue;
    }
section h2.one.two {
    color: red;
   }
  </style>

3. 중요성의 원칙

• !important : 절대적인 우선순위. 가중치 점수를 무시하고 무조건적인 우선 순위
• !important 는 inline-style보다 우선한다
• !important 가 여러개 있을 경우 순서에 영향 받는다

button{ 
  background-color: lightblue !important; 
}
body button {
	background-color: green; 
}