web/html+css

CSS 선택자 정리

기초공사 2023. 6. 8. 19:00

id: 태그의 식별자, 페이지당 하나의 이름이 존재한다. css에서 #id이름으로 나타낸다. 

class: 그룹화, 페이지당 같은 이름의 class가 존재 가능. css에서 .class이름으로 나타낸다.

 

후손 선택자: 해당 선택자 밑의 모든 선택자들을 모두 선택 : body div (body밑의 모든 div)

표기법 : 선택자1 선택자2 

공백으로 구분을 짓는다.       ex. div div {}   

 

자손 선택자: 해당 선택자 밑의 모든 선택자들을 모두 선택  body> div (body 보다 한 단계 밑의 모든 div)

표기법: 선택자1 > 선택자2

선택자들 사이에 >로 구분 짓는다. ex. div> p {}

 

<div id="selector-test">
      <div>
        div1
        <p>div>p</p>
      </div>
      <div>div2</div>
      <div>div3</div>
      <div>div4
      	<div>div4>div</div>
      </div>
      <div>div5</div>
    </div>

위의 코드에서는 selector-test > div를 했을 경우 div4 > div를 제외한 모든 div들이 선택된다. 

selector-test div로 후손 선택자를 사용하면 div4 > div를 포함한 모든 div들이 선택된다.

 

 

동위 선택자

동위 관계에서 해당 요소 뒤에 나타나는 요소를 선택할 때 사용하는 선택자

선택자1+선택자2 : 선택자 1 바로 뒤에 있는 선택자 2를 선택

선택자1~선택자2: 선택자1 뒤에 위치하는 모든 선택자2를 선택   

 

<h1>제목1</h1>
<h2>제목1 뒤의 제목2</h2>
<div>divbox</div>
<h2>제목2</h2>
<p>p태그</p>
<h2>제목2</h2>
<h2>제목2</h2>
<h1>제목1</h1>
<h2>제목1 뒤의 제목2</h2>

위의 코드에서 h1+h2를 했을 경우 제목1 뒤의 제목2 태그가 선택된다.

h1~h2로 선택하면 2, 4, 6, 7, 9번째의 모든 h2 태그들이 선택된다.  

 

 

반응선택자

사용자가 특정한 행동을 취했을 때 해당 요소에 스타일을 적용가능하다.

표기법: 태그명:hover {}

ex.   div:hover {}

hover : 해당 요소에 마우스를 올렸을 때의 스타일 

 active: 해당 요소에 마우스 클릭을 하고 있을 때의 스타일 (마우스 클릭을 때면 원상복귀)

 

구조 선택자

같은 부모를 두고 있는 동일한 태그나 식별자(id, class)를 가진 형제들 간의 순서를 가지고 선택 가능하게 해 준다.

    <ul>
      <li class="items">menu-1</li>
      <li class="items">menu-2</li>
      <li class="items">menu-3</li>
      <li class="items">menu-4</li>
      <li class="items">menu-5</li>
    </ul>

menu-1만 선택하고 싶을 경우 ul> li를 하게 되면 모든 li들이 선택된다. 따라서 이럴 경우 구조 선택자를 활용한다.  

li:first-chile {} : 같은 부모를 두고 있는 li 태그 들 중 첫 번째 li태그를 선택한다.

li:last-child {} :  같은 부모를 두고 있는 li 태그 들 중 마지막 li태그를 선택한다.

li:nth-child(number) {} : 같은 부모를 두고 있는 li 태그 들 중 number번째에 해당하는 li태그를 선택한다. 

  • li:nth-child(1) : 같은 부모를 두고 있는 li 태그 들 중 1번째에 해당하는 li태그를 선택한다. 
  • li:nth-child(2n) : 같은 부모를 두고 있는 li 태그 들 중 짝수 번째에 해당하는 li태그를 선택한다.
  • li:nth-child(2n+1) : 같은 부모를 두고 있는 li 태그 들 중 홀수 번째에 해당하는 li태그를 선택한다.

li:nth-last-child(number) : 같은 부모를 두고 있는 li 태그 들 중 마지막부터 number번째에 해당하는 li태그를 선택한다.

.items:nth-child(2n) : 같은 부모를 두고 items 들 중 짝수 번째에 해당하는 li태그를 선택한다. 

 

형태구조 선택자

같은 부모를 두고 있는 태그들이 있는데 태그의 타입이 다를 경우 사용한다.

태그명:first-of-type : 같은 부모를 두고 있는 태그 중 첫 번째 태그를 선택한다.

h1:first-of-child로 선택했을 경우 밑의 코드에선 제목1과 div박스 밖의 제목1이 선택된다. ( div박스 밖의 제목1은 body을 부모로 둔 h1태그가 2개 있다. 이 두 태그 중 첫 번째 태그가 선택된다. )    

태그명:last-of-type : 같은 부모를 두고 있는 태그 중 마지막 태그를 선택한다. 

나머지 nth-of-child나 nth-last-of-child들은 위의 구조 선택자와 비슷한 맥락이다.

 

    <div>
      <h1>제목1</h1>
      <h2>제목2</h2>
      <h3>제목3</h3>
      <h3>제목3</h3>
      <h2>제목2</h2>
      <h1>제목1</h1>
    </div>
    <h1>div박스 밖의 제목1</h1>
    <h1>div박스 밖의 제목1</h1>

 

 

속성선택자

특정한 속성이나 속성값을 가지고 있는 html 요소를 선택한다.

표기법: 태그명[속성명="속성값"] {} 

ex.  input[type="text"] {} 

 

.jpg와 같이 특정한 접미사로 끝나는 속성값을 가지고 있는 html요소를 선택한다.

표기법: 태그명[속성명$="속성값"] {} 

ex.  img[ser$="jpg"] {} 

 

특정한 속성의 문자값을 나타낼 때 사용한다.

표기법: 태그명[속성명*="속성값"] {}

ex.  div[class*=box]

밑의 html과 css가 있을 때 div[class*=box] 는 div > .box와 같은 의미이며 같은 우선순위를 가진다.  

div[class*=box] 를 div > .box 위로 올릴 경우 우선순위에 따라 div > .box스타일이 적용된다.  

 

    <div>
      <div class="box">div1</div>
      <div class="box">div2</div>
      <div class="box">div3</div>
      <div class="box">div4</div>
      <div class="box">div5</div>
    </div>
div > .box {
  text-align: center;
  padding: 10px 30px;
  font-size: 40px;
  font-weight: 900;
  color: aquamarine;
  margin-left: 30px;
}

div[class*='box'] {
  color: black;
}
 

 

※해당 내용들은 따즈아에서 주민정 강사님의 멘토 시리즈 HTML+CS53를 보고 정리한 내용입니다.

 

저작자표시 (새창열림)