본문 바로가기
제로베이스_정리

selector (셀렉터)

다용이 2024. 4. 20. 18:20

1. type selector 

-특정 요소나 그룹을 선택하는것이 아니라 웹 전체적인 일관적이게 표현해야하는 것들이 있을때에만 사용 

-상단에 작성하는 것이 좋음 

\

2. ID selector

-콕 찝어서 설명할 수 있는 유일한 이름표 (전체 html 중 딱 1개)

- # ~~~ { }

 

 

3. class selector

-ID와 다르게 중복 선택이 가능 

- .~~~{ }

 

2가지로 작성 된 경우 : cascading 원칙에 의해 마지막으로 작성된 코드로 따라가게 됨

 

<head>
  <link rel="stylesheet" href="styles/main.css">
  <title>css</title>
  <style>
    .title {
      font-size: 36px;
      color: red;
      font-weight: bold;
    }

    #heading {
      font-size: 36px;
      color: blue;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <p class="title">
    하윙
  </p>

  <p id="heading">
    안녕하세요
  </p>

id와 class가 함께 적용된다면 id가 이김! 

인라인속성 >id > class 

 

 

 

4. Attribute selecor (속성선택자)

4-1 [attr]

 

4-2 [attr=value]

html

    <input type="text">
    <input type="submit">
    <input type="reset">

 

css

  input[type="submit"] {
    background-color: green;
  }

 

결과:

 

 

 

 

4-3 [attr^=value] 부분적으로 가능

 

 <li>
            <a href="http://example.com"target="_blink">
            Example Link (com/http)
            </a>
        </li>
       
        <li>
            <a href="http://example.org"target="_blink">
                Example Link (org/http)
            </a>
        </li>
       
        <li>
            <a href="https://example.com">
            Example Link (com/http)
            </a>
           
        </li>

        <li>
            <a href="https://example.org">
                Example Link (org/http)
                </a>

 

css

a[href^="http://"] {
  color:red;
}

 

http:// 로 시작하는 애들만 모두 빨간색으로 해줘~

 

결과

 

4-4 [attr$=value] 부분적으로 가능

css

a[href$=".com"] {
 color:silver;
}

.com으로 끝나는 애들만 모두 은색으로 해줘~

 

결과

 

 

 

 

 

 

 

4-5 [attr*value] 부분적으로 가능

css

a[href*="example"] {
  color: brown;
}

example 이 하나라도 들어있는 애들은 갈색으로 칠해줘~

 

결과

 

 

 

 

 

 

가상클래스선택자 (Pseudo-class selector)

-지금까지 배웠던 셀렉터들보다 더 디테일하고 작은 범위의 셀렉터 

-selector : ___조건___ { property: value ; }

 

    <h2>Movie List</h2>
    <ul>
        <li class="movie">Toy Story</li>
        <li class="movie">Zootopia</li>
        <li class="movie">Insideout</li>
        <li class="movie">Coco</li>
        <li class="movie">Finding Nemo</li>
    </ul>

    <ol>
        <li>Americano</li>
        <li>Latte</li>
        <li>Hot choco</li>
    </ol>

 

css

li:first-child {
  color:green;}

<li> 태그들 중  첫번째 자식요소들만 초록색으로 해줘!

 

결과

 

 

 

 

 

 

 

 

 

 

 

css

  .movie:first-child {
    font-size: 42px;
  }

 

결과

 

 

 

* 주의할점: .movie 에서 toystory의 movie를 빼버리면 zootopia가 첫번째 자식으로 폰트가 커지는것이 아니라 <li> 의 부모 태그 <ul> 안에 첫번째 자식인 toystory만 첫번째 자식으로 인식, movie를 빼버리면 first-child 에 영향을 받는 애들은 아무것도 없음 

 

 

 

 

 

 

css

  li:nth-child(3){
    color:hotpink;
  }

 

 

 

nth-child(N번째) 애들 지목

 

(2n)이 들어가면 2번째, 4번째 ... 등등이 지목될 수 있음. 

(odd) 홀수번째 지목

(even) 짝수번째 지목 

 

 

 

 

    <h2>Lorem Ipsum</h2>
    <p>
        <span>Lorem ipsum dolor sit amet</span>
        <span>consectetur adipisicing elit.</span>
        <span>Commodi voluptates sint iure quas quasi.</span>
    </p>

 

css

  span:last-child {
    color: tomato;
  }

 

마지막 자식을 토마토색으로 해줘!

 

   <h2>Movie List</h2>
   <section>
    <div>Toystory</div>
    <p>Zootopia</p>
    <p>Insideout</p>
    <div>coco</div>
    <p>Finding nemo</p>
   </section>

 

css

p:first-child {
  color:red;
}

 

결과

 

 

앞서 얘기했듯이 <p>의 부모인 <section>에서의 첫번째 자식은 Toystory인데 토이스토리는 <p>태그가 아닌 <div> 이기 때문에 아무런 변화가 없음 .

 

 

 

 

 

css

p:first-of-type {
  color:red;
}

 

결과

 

하지만 first of type은 <p>의 형제들 중 첫번째이기 때문에 주토피아가 영향을 받을 수 있다. 

 

특정 타입들만 모아서 세고 그중 첫번째를 고를 수 있음. 

 

:last-of-type / :nth-of-type() 도 모두 적용 가능

 

 

 

 <h2>Movie List</h2>
   <section>
    <div class="movie">Toystory</div>
    <p class="movie">Zootopia</p>
    <p class="movie">Insideout</p>
    <div class="movie">coco</div>
    <p class="movie">Finding nemo</p>

 

css

.movie:first-of-type {
  color:red;
}

 

 

 

first of type일 경우에는 토이스토리만이겠지만

 

2가지 타입 <div> 와 <p> 태그들 중 첫번째 타입인 토이스토리와 주토피아가 함께 선택 될 수 있음. 

 

 

 

 

 

 

selector:not(selector)

 <form>
    <input type="text" placeholder="name">
    <input type="email" placeholder="email">
    <input class="pw" type="password" placeholder="password">
    <input type="submit">
  </form>

class pw로 이름 지어줌

 

css

input:not(.pw) {
  background-color: blue;
}

class기 때문에 .pw

input 중에 .pw 빼고 배경색깔을 다 파랗게 해줘!

 

input:not([type=password]) {
  background-color:blue;
}

input들 중에 type이 password인것만 제외하고 배경색을 파랗게 해줘!

 

결과

 

 

 

 

 

동적 가상클래스 선택자 (상태에 따라서 스타일링을 변경)

 

<a href="http://example.com">Example link</a>

css

a:link {
  color:tomato;
}

 

원래는 파란색 링크였는데 토마토 색으로 변경 (클릭전)

 

 

a:visited {
  color:yellowgreen;
}

방문 한 링크면 옐로그린색으로 바꿔줘!

 

 

 

hover 

    <input type="button" value="저를클릭하세요">

css

input[type=button] {
  background-color: skyblue;
  border: none;
}

input[type=button]:hover {
  background-color: teal;
  color: white;
}

border: 테두리 

 

 

마우스 커서를 대면 배경:teal, 글씨색은 하얀색으로 변경됨. 

 

 

active (마우스를 클릭하고 있을때)

input[type=button]:active{
  background-color: red;
}

 

마우스를 클릭하고 떼기 전까지 배경색이 빨간색으로 변경됨. 

 

작성 순서: LVHA (Link-Visited-Hover-Active ) 순서로 작성하는 것이 좋다. 

 

focus (Tap 키를 사용해서 포커싱하거나 text 창을 입력하기 위해 클릭을 할경우)

    <input type="text">

css

input[type=text]:focus {
  background-color: blue;
}

 

text 창에 마우스 커서를 대면 파란색으로 변경 함

 

 

 

enable /disabled, checked

    <div>
        <input type="text" placeholder="1">
        <input type="text" placeholder="2">
        <input type="text" placeholder="3" disabled>
    </div>

    <div>
        <input type="radio" name="my-input" id="yes">
        <label for="yes">yes</label>

        <input type="radio" name="my-input" id="no">
        <label for="no">no</label>
    </div>

    <div>
        <input type="checkbox" name="check-me" id="check-me">
        <label for="check-me">check-me!</label>
    </div>

 

css

input[type=text]:enabled {
  background-color: skyblue;
}

 

활성화 되어있는 애들만 변경하고 싶을때 enable!

 

css

input[type=text]:disabled {
  background-color: skyblue;
}

 

활성화 되어있지 않은 애들 (disabled처리) 만 변경하고 싶을떄 disabled!

 

css

input[type=radio]:checked {
  outline: 3px solid red;
}

input[type=checkbox]:checked {
  outline: 3px solid blue;
}

 

 

outline 으로 해서 클릭했을때 클릭이 될 수있도록 함

 

 

Pseudo-Element Selector (가상 요소 선택자) 

 

before, after

 

   <div class="movie">Toy story</div>
    <div class="movie">Zootopia</div>
    <div class="movie">Inside out</div>
    <div class="movie">Coco</div>
    <div class="movie">Finding Nemo</div>

 

css

.movie::before {
  color:indianred;
}

아무것도 변한게 없음
개발자도구

css

.movie::before {
  content: 'MOVIE';
  color:indianred;
}

 

앞에 MOVIE가 자동으로 붙었지만 선택이 되지도 드래그가 되지도 않음. 

CSS로 만들어진 가상의 요소로 꾸밈을 위한 요소로 인식 (TEXT 형태로 보지 않음)

 

 

 

 

CSS로 만들어낸 가상의 요소

 

뱃지로 사용하거나 메뉴 사이에 구분점, 구분바를 사용할때 사용 

의미가 있다기보단 꾸밈을 위한 요소 

 

before가 아니라 after라고 하면 뒤에다 뱃지나 효과를 넣을 수 있음

First-letter 첫번째 글자에만 스타일링

 
 <p class="lorem">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, rerum! Ut fuga, quo nesciunt autem dolore cumque molestias ullam fugit, est quibusdam eius id. Magni rerum repudiandae sapiente ipsam iure.</p>
    <p class="lorem">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, rerum! Ut fuga, quo nesciunt autem dolore cumque molestias ullam fugit, est quibusdam eius id. Magni rerum repudiandae sapiente ipsam iur
저작자표시 비영리 변경금지

'제로베이스_정리' 카테고리의 다른 글

단위와 값  (0) 2024.04.21
폰트관련속성  (0) 2024.04.21
CSS ( Cascading Style Sheets)  (0) 2024.04.14
전역속성  (0) 2024.04.12
메타데이터의 역할 <head>  (0) 2024.04.10

'제로베이스_정리' Related Articles

티스토리툴바