2022.04.06
CSS 선택자
전체 선택자(universal)
에스터리스크(*)는 페이지에 있는 전체 요소를 대상으로 함* { margin: 0; padding: 0; text-decoration: none; } # ul아래 자식 선택자에게 도사용 가능 ul * { color: tomato; }아이디 선택자(id)
샵(#)은 id를 대상으로 함. id선택자는 유연성이 없어서 재활용 불가#id { width: 300px; }클래스 선택자(class)
닷(.)은 class 선택자. 여러개의 요소를 대상으로 정할 수 있음.class { color: aqua; }타입 선택자(type)
element(요소)를 선택자로 하는 것
body, p, span, h1, ol, header등......p { font-size: 16px; } span { color: tomato; }하위 선택자(descendant)
하위 선택자는 공백으로 분리된 두개 이상의 선택자들로 만들어짐
body안에 있는 span태그 모두 선택됨# html문서 <body> <span>tomato1</span> <div> <span>tomato2</span> </div> <span>tomato3</span> </body># css문서 body span { color: tomato; }자식 선택자(child)
'>'로 분리된 두개 이산의 선택자들로 만들어짐
1depth아래의 자식들만 선택됨# html문서 <body> <span>tomato1</span> <div> <span>tomato2</span> </div> <span>tomato3</span> </body># css문서 body > span { color: aqua; }인접 형제 선택자(adjacent sibling)
'+'를 사용. 둘 다 같은 부모를 가지고 바로 뒤에 오는 요소에 적용됨
tomato3가 color: tomato;가 적용됨# html문서 <body> <span>tomato1</span> <div> <span>tomato2</span> </div> <span>tomato3</span> <span>tomato4</span> <span>tomato5</span> </body># css 문서 div + span { color: tomato; }일반 형제 선택자(general sibling)
'~(틸드)'를 사용. 둘 다 같은 부모를 가지고 바로 뒤에 오는 모든 요소에 적용됨
tomato3,tomato4,tomato5에 color: tomato;가 적용됨# html문서 <body> <span>tomato1</span> <div> <span>tomato2</span> </div> <span>tomato3</span> <span>tomato4</span> <span>tomato5</span> </body># css 문서 div + span { color: tomato; }속성 선택자 (attribute)
속성 선택자를 사용하면 특정 속성이나 특정 속성값을 가지고 있는 html요소를 선택할 수 있음*속성만 있는 경우 * selector[attribute] # html문서 <body> <span chagne>tomato1</span> <div> <span>tomato2</span> </div> <span>tomato3</span> </body>span[chagne] { background: black; color: tomato; }*속성에 값을 지정할 경우 *selector[attribute value] # html문서 <body> <span chagne>tomato1</span> <span chagne="banana" >tomato2</span> <span chagne>tomato3</span> <div> <span>tomato4</span> </div> <span>tomato5</span> </body>span[chagne="banana"] { background: black; color: yellow; }가상 클래스(pseudo class)
가상 클래스는 스타일이 적용되는 대상이 요소나 속성, 속성값에 따라 분류되는게 아니라 '상황'에 따라 분류된다- :first-child
ul에 첫번째 li에만 color가 적용됨<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body>ul > li:first-child { color: cadetblue; } - :last-child
ul에 마지막 li에만 color가 적용됨<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body>ul > li:last-child { color: cadetblue; } - :nth-child(n)
ul에 마지막 3번째에 color가 적용됨<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body>ul > li:nth-child(3) { color: cadetblue; } - :link
아직 방문한적 없는 링크에 적용됨<body> <ul> <li><a href=#>link<a></li> </ul> </body>a:link { color: violet; } - :hover
마우스를 올렸을때 적용됨<body> <ul> <li><a href=#>link<a></li> </ul> </body>a:hover { color: violet; } - :active
마우스를 클릭하고 있을때 적용됨<body> <ul> <li><a href=#>link<a></li> </ul> </body>a:active { color: violet; } - :focus
입력 양식(대표적으로 input)에 마우스를 클릭하고 입력하는 동안 적용됨<body> <input> </body>input:active { color: violet; } - :not
이미 지정된 css스타일에서 특정한 요소를 제외시킬때 사용(선택을 하지 않기 위해 사용)
선택할 요소:not(제외시킬요소): {}<div> <p>tomato</p> <p class="disabled">not tomato</p> </div>div p:not(.disabled) { color: tomato; }
- :first-child
가상 요소(pesudo elemnet)
가상 요소 섵낵자는 앞에 콜론이 두개 붙는게 웹 표준
항상 content: ""; --> 항상 넣어줘야함
::before,::after는 inline 요소기 때문에 display:block;을 해줘야 가로세로값이 적용됨
::after요소 앞에 내용을 삽입::before
요소 뒤에 내용을 삽입<body> <div> <p>Hello</p> </div> </body>p { color: tomato; } p::before { content:'Hi '; color: lime; } p::after { content: ' World'; color: violet; }상속(inheritance)
하위 요소에 어떤 css 속성을 명시하지 않는 경우, 기본적으로 상위 요소에 적용된 스타일이 하위 요소에도 적용되는 것<body> <div> <h3>Hello</h3> <p>Hello</p> </div> </body>div { color: tomato; } p { color: inherit; }
'프론트엔드 > CSS' 카테고리의 다른 글
| CSS filter속성 (0) | 2022.04.13 |
|---|---|
| 가상클래스(pesudo class)와 가상요소(pesudo element) (0) | 2022.04.08 |
| CSS초기화 reset.css 및 CSS 말줄임 표시방법 (0) | 2022.04.07 |
| CSS 속성 (0) | 2022.04.06 |
| CSS 선언방식 (0) | 2022.04.06 |