Tech Stock logo Tech Stock

중요순으로 몇가지만 숙지해두고 필요할 때마다 추가

특정 클래스를 선택할 때

.Class {
    font-size: 20px;
}

특정 ID를 선택할 때

#Divid {
    font-size: 20px;
}

li밑의 a태그 전체에 적용할 때

li a {
    font-size: 20px;
}

특정 태그 전체에 적용할 때

a {
    font-size: 20px;
}
p {
    font-size: 10px;
}

가상 클래스 사용
방문전 링크 색이나 방문후 링크색 등에 많이 쓰임

a:link { 
    color: blue; 
}
a:visted { 
    color: purple; 
}
a:hover { 
    color: red; 
}

html의 바디가 이렇게 있을때
특정 요소의 직계 자식에게만 해당
이 경우는 첫번째 ul만을 인식하여 첫번째 ul전체에 박스가 적용 됐다.

직계만적용

<body>
    <div id="container">
        <ul>
           <li> 리스트 1
             <ul>
                <li> 리스트 1-1 </li>
             </ul>
           </li>
           <li> 리스트 2
             <ul>
                <li> 리스트 2-2 </li>
             </ul>
            </li>
           <li> 리스트 3 </li>
           <li> 리스트 4 </li>
        </ul>
     </div>
</body>
#container > ul {
        border: 1px solid black;    
    }

html의 바디가 이렇게 있을때
특정 요소의 하위 자식에게 모두 해당
이 경우는 첫번째 ul뿐만 아니라 그 밑의 ul도 인식하여 전체에 박스가 적용 + 하위 ul에도 적용이 됐다.

하위까지적용

<body>
    <div id="container">
        <ul>
           <li> 리스트 1
             <ul>
                <li> 리스트 1-1 </li>
             </ul>
           </li>
           <li> 리스트 2
             <ul>
                <li> 리스트 2-2 </li>
             </ul>
            </li>
           <li> 리스트 3 </li>
           <li> 리스트 4 </li>
        </ul>
     </div>
</body>
#container ul {
        border: 1px solid black;    
    }

특정 속성이 있는 앵커만을 다룰때
이 경우는 title속성이 있는 앵커만을 다룬다

a[title] {
   font-size: 20px;
}

모든 div중에 abc라는 div만 제외하고 싶을때

div:not(#abc) {
   line-height: 1.5em;
}