프론트엔드-코드/CSS

선택자 2

sdafdq 2023. 7. 12. 10:44
#box p::first-letter {font-size: 300%;}
#box내의 p중 첫번째 글자만
 

::는 엘리멘트 안의 내용을 가리키는 거고

:는 엘리멘트를 가르키는 거인듯?

 

    #box p:first-child {color: green;}
    #box p:last-child {color: purple;}
    #box p:nth-child(2) {background-color: aquamarine;}

    .line::first-line {background-color: orange;}

 

 

이거는 앞이나 뒤에 뭐 내용넣어주는 그런거 인 듯. 블록 요소로 보임 그냥 뭐 태그로 넣는게 아니라 그냥 내용 넣는거임.

 
    #box::after {content: '항목을 선택해 주세요.'; color: green;}
    #box::before {content: '항목을 선택해 주세요.'; color: green;}
   
 

'프론트엔드-코드 > CSS' 카테고리의 다른 글

레이아웃  (0) 2023.07.17
가상클래스 선택자  (0) 2023.07.12
선택자  (0) 2023.07.11
margin, padding  (0) 2023.07.07
정렬  (0) 2023.07.06