03. 다양한 선택자(Selector)

○ 전체 선택자 (*)

    - 현재 HTML 내의 모든 요소에 스타일 적용하기

    - 형식 : *{속성: 속성값; 속성: 속성값;}

*{
  font-family: 궁서체;
  font-size: 40px;
  font-style: italic;
  font-weight: bold;}

 

○ 태그 선택자

    - 지정된 태그에는 모두 스타일 적용하기

    - 형식 : 태그{속성: 속성값; 속성: 속성값;}

p{/* 모든 <p>요소 */  
    font-family: 굴림체;
    font-size: 20px;
    font-weight: bolder;}

 

○ 클래스 선택자

    - 지정된 클래스에는 모두 스타일 적용하기

    - 형식 : .클래스명{속성: 속성값; 속성: 속성값;}

.hide{
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    font-size: 0;}

 

○ ID 선택자

    - 지정된 id에는 모두 스타일 적용하기

    - 형식 : #아이디명{속성: 속성값; 속성: 속성값;}

#menu{
    width: 100px;
    height: 100px;
    background: darkgray;}

 

○ 그룹 선택자 ( , )

    - 둘 이상의 요소에 같은 스타일 적용

    - 형식 : 선택자1, 선택자2, 선택자3 {속성: 속성값; 속성: 속성값;}

h2, p{/* 모든 <h2>, <p>요소 */
    color:darkolivegreen;}

 

○ 그 외 세부적인 적용범위

    ① 어떤 선택자 안에 있는 선택자에만 적용 (띄어쓰기 사용)

        - 형식 :선택자1 선택자2{속성:속성값;속성:속성값;}

div p{/* <div>안에 있는 모든 <p>요소 */  
    background-color: aquamarine;}

div h2{/* <div>안에 있는 모든 <h2>요소 */  
    text-shadow: 2px 2px darkgrey;}

 

    ② 어떤 선택자의 자식 선택자에만 적용 (부모>자식)

        - 형식 :부모선택자>자식선택자{속성:속성값;속성:속성값;}

div>span>p{/* div의 자식인 span의 자식인 p에만 적용 */
    text-decoration-line: line-through;
    text-decoration-color: brown;}
    
#nav>ul{/* id=nav의 자식중에서 ul태그 */
    list-style: none;}

 

    ③ 태그의 상세 속성 접근 (세부속성 :(콜론) 이용)

        - 형식 : 선택자:세부속성{속성:속성값;속성:속성값;}

li:nth-child(2){ /* <li>요소중에서 2번째 */
    font-weight: bold;}

a:link {color: black; text-decoration: none;}       
a:visited {color: black; text-decoration: none;}     
a:hover {color: black; text-decoration: underline;}       
a:active {color: black; text-decoration: none;}

        - a:link : 일반적 링크 및 방문하지 않은 링크

        - a:visited : 방문했던 링크

        - a:hover : 마우스 올렸을 때 링크
        - a:active : 마우스 누르는 순간의 링크