css에서 특정 tag 혹은 attribute 선택하기

예로 id와 password를 입력받는 곳(input type="text")과 Log In 버튼(input type="submit")이 form로 묶여 있다고 하자.

<form id="login-form">
      <input
        name="username"
        required
        type="text"
        placeholder="Email or phone number"
      />
      <input name="password" required type="text" placeholder="Password" />
      <input type="submit" value="Log In" />
</form>

(html 파일)

(아래는 css 파일)

 

 

1. login-form(id) 안의 input들을 특정한 상태로 꾸미고 싶지만, type="submit"인 elements는 포함하고 싶지 않다면 아래와 같이 작성하면 된다.

#login-form input:not[type="submit"] {
    /* properties */
}

[] 안에서 특정 특성을 선택하는 것을 attribute selector라고 한다.

참고: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

 

 

2. type="submit"인 elements의 상태가 focus일 때를 설정하고 싶다면 아래와 같이 작성하면 된다.

#login-form input[type="submit"]:focus {
    /* properties */
}

:를 pseudo-classes라고 한다. 참고: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

 

 

3. login-form 안의 input의 placeholder를 설정하고 싶다면 아래와 같이 작성하면 된다.

#login-form input::placeholder {
    /* properties */
}

::를 pseudo-elements라고 한다. 참고: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

 

 

combinators를 활용해도 좋다. 참고: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors