[CSS] CSS 선택자

CSS 선택자

@charset "utf-8"; 

/* 
  여러줄 주석: 설명글 삽입시 사용
*/

/* 모든 태그 선택자 */
* {
  border: 1px solid black;
}

/* 태그 선택자: 해당 태그 모두 선택 */
h1 {
  border: 1px solid black;
}

/* 자손 선택자: 직계 자식과 손자까지 모두 선택 */
p strong {
  border: 1px solid black;
}

/* 자식 선택자: 직계 자식만 선택  */
ul > li {
  border: 1px solid black;
}

/* 그룹 선택자: 해당 선택자들 모두 선택  */
h1, h2, h3 {
  border: 1px solid black;
}

/* 순서 선택자: 해당 순서의 자식 선택 */
ul li:nth-of-type(1) {
  border: 1px solid black;
}

/* 수열 선택자: 특정 배수만 선택 */
ul li:nth-of-type(2n) {
  border: 1px solid black;
}

ul li:nth-of-type(odd) {  /* odd는 홀수, even은 짝수 */
  border: 1px solid black;
}

/* 마지막 순서 선택자  */
ul li:last-child {

}

/* 타입 선택자: 태그의 특정 타입 선택  */
input[type="text"] {
  border: 1px solid black;
}

/* 가상 요소 선택자: 마우스 올렸을 경우 동작 */
h1:hover {
  border: 1px solid red;
}

/* 가상 요소 선택자: 특정 요소 앞, 뒤에 삽입 */
h1:before {
  content: "before content";
  color: blue;
}

h1:after {
  content: "after content";
  color: red;
}

/* 클래스 선택자: 태그의 클래스 값을 선택. .(점)으로 표기 */
p.text1 {
    border: 1px, solid blue;
}

/* id 선택자: 태그의 id값을 선택. id값은 파일에서 1개의 값만 존재. #으로 표기 */
#header {
    border: 1px solid green;
}