연습장

2. 셀렉터 본문

CSS3

2. 셀렉터

js0616 2024. 6. 27. 01:08

 style을 적용하고자하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것이다.

 

복수개의 셀렉터를 연속하여 지정할 수 있으며 쉼표( , )로 구분한다.

h1, p { color: red; }

 

1. 전체 셀렉터 (Universal Selector)

* : HTML 문서 내의 모든 요소를 선택한다. html 요소를 포함한 모든 요소가 선택된다. (head 요소도 포함된다)

 

<style>

    * { color: red; }
   
</style>

 

2. 태그 셀렉터 (Type Selector)

태그명 :  지정된 태그명을 가지는 요소를 선택한다.

 

<style>

    p { color: red; }
   
</style>

 

3. ID 셀렉터 (ID Selector)

#id 어트리뷰트 값 :  id 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다. 중복불가능

 

<style>
    /* id 어트리뷰트 값이 p1인 요소를 선택 */
    #p1 { color: red; }
</style>

 

4. 클래스 셀렉터 (Class Selector)

.class 어트리뷰트 값 : class 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다. 중복가능

 

<style>
    /* class 어트리뷰트 값이 container인 모든 요소를 선택 */
    /* color 어트리뷰트는 자식 요소에 상속된다. */
    .container { color: red; }
    /* not supported in IE */
    #p2 { color: initial; }
</style>

  <div class="container">
    <p id="p1">paragraph 1</p>
    <p id="p2">paragraph 2</p>
  </div>

 

 

div 에 red color 를 주었고 p 에서 상속받아 빨간색으로 나타난다.

그러나 #p2에서는 더 우선순위를 가져 기본색이 나타나게 된다. 

 

 

HTML 요소에 class 어트리뷰트 값은 공백으로 구분하여 여러 개 지정할 수 있다.

아래와 같이 클래스 셀렉터를 사용하여 미리 스타일을 정의해 두고,

HTML 요소는 이미 정의되어 있는 클래스를 지정하는 것으로 필요한 스타일을 지정할 수 있다.

이것은 재사용의 측면에서 유용하다.

 

부트스트랩 같은거 불러다가 class 이름만 넣으면 나타나는 그런것.. 

 

 

5. 어트리뷰트 셀렉터 (Attribute Selector)

 

 

셀렉터[어트리뷰트]  : 지정된 어트리뷰트를 갖는 모든 요소를 선택한다.

<style>
    /* a 요소 중에 href 어트리뷰트를 갖는 모든 요소 */
    a[href] { color: red; }
</style>

 

 

 

셀렉터[어트리뷰트=”값”] : 지정된 어트리뷰트를 가지며 지정된 값과 어트리뷰트의 값이 일치하는 모든 요소를 선택한다.

<style>
    /* a 요소 중에 target 어트리뷰트의 값이 "_blank"인 모든 요소 */
    a[target="_blank"] { color: red; }
</style>

 

 

셀렉터[어트리뷰트~=”값”] 지정된 어트리뷰트의 값이 지정된 값을 (공백으로 분리된) 단어로 포함하는 요소를 선택한다.

<style>
    /* h1 요소 중에 title 어트리뷰트 값에 "first"를 단어로 포함하는 요소 */
    h1[title~="first"] { color: red; }
</style>

 

 

셀렉터[어트리뷰트|=”값”] 지정된 어트리뷰트의 값과 일치하거나 지정 어트리뷰트 값 뒤 연이은 하이픈(“값-“)으로 시작하는 요소를 선택한다.

<style>
    /* p 요소 중에 lang 어트리뷰트 값이 "en"과 일치하거나 "en-"로 시작하는 요소 */
    p[lang|="en"] { color: red; }
</style>

 

 

셀렉터[어트리뷰트^=”값”] 지정된 어트리뷰트 값으로 시작하는 요소를 선택한다.

<style>
    /* a 요소 중에 href 어트리뷰트 값이 "https://"로 시작하는 요소 */
    a[href^="https://"] { color: red; }
</style>

 

 

셀렉터[어트리뷰트$=”값”] 지정된 어트리뷰트 값으로 끝나는 요소를 선택한다.

<style>
    /* a 요소 중에 href 어트리뷰트 값이 ".html"로 끝나는 요소 */
    a[href$=".html"] { color: red; }
</style>

 

 

셀렉터[어트리뷰트*=”값”] 지정된 어트리뷰트 값을 포함하는 요소를 선택한다.


<style>
    /* div 요소 중에서 class 어트리뷰트 값에 "test"를 포함하는 요소 */
    div[class*="test"] { color: red; }
    /* div 요소 중에서 class 어트리뷰트 값에 "test"를 단어로 포함하는 요소 */
    div[class~="test"] { background-color: yellow; }
</style>
 

 

 

 

 

6. 복합 셀렉터(Combinator)

 

6.1 후손 셀렉터 (Descendant Combinator)

자신의 1 level 상위에 속하는 요소를 부모 요소, 1 level 하위에 속하는 요소를 자손 요소(자식 요소)라한다.

자신보다 n level 하위에 속하는 요소는 후손 요소(하위 요소)라 한다.

 

셀렉터A 셀렉터B

<style>
    /* div 요소의 후손요소 중 p 요소 */
    div p { color: red; }
  </style>

 

 

 

6.2 자식 셀렉터 (Child Combinator)
자손 셀렉터는 셀렉터A의 모든 자식 요소 중 셀렉터B와 일치하는 요소를 선택한다.

 

셀렉터A > 셀렉터B

<style>
    /* div 요소의 자식요소 중 p 요소 */
    div > p { color: red; }
  </style>

 

 

6.3 형제(동위) 셀렉터 (Sibling Combinator)

형제(동위) 셀렉터는 형제 관계(동위 관계)에서 뒤에 위치하는 요소를 선택할 때 사용한다.

 

 

6.3.1 인접 형제 셀렉터(Adjacent Sibling Combinator)

셀렉터A의 형제 요소 중 셀렉터A 바로 뒤에 위치하는 셀렉터B 요소를 선택한다.

A와 B 사이에 다른 요소가 존재하면 선택되지 않는다.

 

셀렉터A + 셀렉터B

 

<!DOCTYPE html>
<html>
<head>
  <style>
    /* p 요소의 형제 요소 중에 p 요소 바로 뒤에 위치하는 ul 요소를 선택한다. */
    p + ul { color: red; }
  </style>
</head>
<body>
  <div>A div element.</div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

  <p>The first paragraph.</p>
  <ul>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

  <h2>Another list</h2>
  <ul>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ul>
</body>
</html>

 

body 의 자식으로 div - ul - p - ul - h2 - ul 이 형제로 존재하며

p + ul 은 p 의 다음 ul 에 해당하므로 4 5 6 의 색상이 red 로 나오게 된다.

 

 

6.3.2 일반 형제 셀렉터(General Sibling Combinator)

셀렉터A의 형제 요소 중 셀렉터A 뒤에 위치하는 셀렉터B 요소를 모두 선택한다.

 

셀렉터A ~ 셀렉터B

 

<!DOCTYPE html>
<html>
<head>
  <style>
    /* p 요소의 형제 요소 중에 p 요소 뒤에 위치하는 ul 요소를 모두 선택한다.*/
    p ~ ul { color: red; }
  </style>
</head>
<body>
  <div>A div element.</div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

  <p>The first paragraph.</p>
  <ul>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

  <h2>Another list</h2>
  <ul>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ul>
</body>
</html>

 

 

body 의 자식으로 div - ul - p - ul - h2 - ul 이 형제로 존재하며

p ~ ul 은 p 의 다음 나오는 모든 ul 에 해당하므로 4 5 6 7 8 9 의 색상이 red 로 나오게 된다.

 

 

7. 가상 클래스 셀렉터 (Pseudo-Class Selector)

가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다.

원래 클래스가 존재하지 않지만 가상 클래스를 임의로 지정하여 선택하는 방법이다.

가상 클래스는 마침표(.) 대신 콜론(:)을 사용한다.

CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다.

 

선택자 : 특정 상태 {
    속성 : 값 ;
  }

 

 

7.1 링크 셀렉터(Link pseudo-classes), 동적 셀렉터(User action pseudo-classes)

 

  • 마우스가 올라와 있을때 (hover)
  • 클릭된 상태일 때 (active)
  • 포커스가 들어와 있을 때 (focus)
  • 링크를 아직 방문하지 않았을 때 (link)
  • 링크를 방문했을 때 (visited)

 


<!DOCTYPE html>
<html>
<head>
  <style>
    /* a 요소가 방문하지 않은 링크일 때 */
    a:link { color: orange; }

    /* a 요소가 방문한 링크일 때 */
    a:visited { color: green; }

    /* a 요소에 마우스가 올라와 있을 때 */
    a:hover { font-weight: bold; }

    /* a 요소가 클릭된 상태일 때 */
    a:active { color: blue; }

    /* text input 요소와 password input 요소에 포커스가 들어와 있을 때 */
    input[type=text]:focus,
    input[type=password]:focus {
      color: red;
    }
    </style>
  </head>
<body>
  <a href="#" target="_blank">This is a link</a><br>
  <input type="text" value="I'll be red when focused"><br>
  <input type="password" value="I'll be red when focused">
</body>
</html>

 

 

7.2 UI 요소 상태 셀렉터(UI element states pseudo-classes)

 

:checked : 셀렉터가 체크 상태일때

:enabled : 셀렉터가 사용 가능한 상태일 때

:disabled : 셀렉터가 사용 불가능한 상태일 때 

 

<!DOCTYPE html>
<html>
<head>
  <style>
    /* input 요소가 사용 가능한 상태일 때,
       input 요소 바로 뒤에 위치하는 인접 형제 span 요소를 선택 */
    input:enabled + span {
      color: blue;
    }
    /* input 요소가 사용 불가능한 상태일 때,
       input 요소 바로 뒤에 위치하는 인접 형제 span 요소를 선택 */
    input:disabled + span {
      color: gray;
      text-decoration: line-through;
    }
    /* input 요소가 체크 상태일 때,
       input 요소 바로 뒤에 위치하는 인접 형제 span 요소를 선택 */
    input:checked + span {
      color: red;
    }
  </style>
</head>
<body>
  <input type="radio" checked="checked" value="male" name="gender"> <span>Male</span><br>
  <input type="radio" value="female" name="gender"> <span>Female</span><br>
  <input type="radio" value="neuter" name="gender" disabled> <span>Neuter</span><hr>

  <input type="checkbox" checked="checked" value="bicycle"> <span>I have a bicycle</span><br>
  <input type="checkbox" value="car"> <span>I have a car</span><br>
  <input type="checkbox" value="motorcycle" disabled> <span>I have a motorcycle</span>
</body>
</html>

 

 

회원가입 또는 로그인 같은곳에서 사용해볼만한것같다. 

 

 

7.3 구조 가상 클래스 셀렉터(Structural pseudo-classes)

 

:first-child : 셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 선택한다.

:last-child : 셀렉터에 해당하는 모든 요소 중 마지막 자식인 요소를 선택한다.

 

<!DOCTYPE html>
<html>
<head>
  <style>
    /* p 요소 중에서 첫번째 자식을 선택 */
    p:first-child { color: red; }

    /* p 요소 중에서 마지막 자식을 선택 */
    p:last-child { color: blue; }
  </style>
</head>
<body>
    <p>11 은 body 에서 첫번째 -> red
        <div>
            <p>21 은 div 에서 첫번째 -> red</p>
            <p>22</p>
            <p>23 은 div 에서 마지막 -> blue </p>
        </div>
    </p>


    <div>
        <p>24 은 다른 div 에 1개 존재, last 가 first 보다 아래 위치 하므로 blue 로 적용</p>
    </div>

    <p>12</p>
    <p>13 은 body 의 마지막이 아님 -> 보이지 않는 뭔가가 마지막에 있는거같다. </p>

</body>
</html>

 

 

다음과같이 h1 을 추가할경우

<!DOCTYPE html>
<html>
<head>
  <style>
    /* p 요소 중에서 첫번째 자식을 선택 */
    p:first-child { color: red; }

    /* p 요소 중에서 마지막 자식을 선택 */
    p:last-child { color: blue; }
  </style>
</head>
<body>
    <h1> h1은 첫번째이지만 p 가 아님 ! </h1>
    <p>11 은 body 에서 2번째
        <div>
            <p>21 은 div 에서 첫번째 -> red</p>
            <p>22</p>
            <p>23 은 div 에서 마지막 -> blue </p>
        </div>
    </p>


    <div>
        <p>24 은 다른 div 에 1개 존재, last 가 first 보다 아래 위치 하므로 blue 로 적용</p>
    </div>

    <p>12</p>
    <p>13 은 body 의 마지막이 아님 -> 보이지 않는 뭔가가 마지막에 있는거같다. </p>

</body>
</html>

 

 

 


:nth-child(n) 셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택한다.
:nth-last-child(n) 셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식인 요소를 선택한다.


:first-of-type 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 첫번째 등장하는 요소를 선택한다.
:last-of-type 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 마지막에 등장하는 요소를 선택한다.
:nth-of-type(n) 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 앞에서 n번째에 등장하는 요소를 선택한다.
:nth-last-of-type(n) 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 뒤에서 n번째에 등장하는 요소를 선택한다.

 

관련 예제는 해당 출처 링크 참조 .. 

https://poiemaweb.com/css3-selector

 

CSS3 Selector | PoiemaWeb

CSS(Cascading Style Sheets)는 HTML 요소(Element)의 style(design, layout etc)을 정의한다. 그리하려면 HTML이 존재하여야 하고 또한 style을 적용하고자하는 HTML 요소를 특정할 필요가 있다. 이러한 목적으로 사용

poiemaweb.com

 

 

7.4 부정 셀렉터(Negation pseudo-class)

:not(셀렉터) 셀렉터에 해당하지 않는 모든 요소를 선택한다.

 

 

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
    }
    div {
      float: left;
      width: 32%;
      height: 200px;
      background-color: red;
      /* margin-bottom: 2%; */
      color: #fff;
      font-size: 3em;
      line-height: 200px;
      text-align: center;
    }
    /* div 요소 중에서 1, 4, 7...번째 등장하는 요소가 아닌 요소만을 선택 */
    /* 1, 4, 7... : 공차가 3인 등차수열 */
    div:not(:nth-of-type(3n+1)) {
      margin-left: 2%;
      background-color: blue;
    }
    /* div 요소 중에서 4번째 이후 등장하는 요소가 아닌 요소만을 선택 */
    div:not(:nth-of-type(n+4)) {
      margin-bottom: 2%;
      background-color: gray;
    }
  </style>
</head>
<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</body>
</html>

 

 

기본의 빨간색에서

3n+1 은 왼쪽의 요소에 대한 선택이며, 이를 not 하여 맨 왼쪽이 아닌 요소들을 파란색으로 하고

n+4 는 4번째 이후 요소들이며, 이를 not 하여 즉 1 2 3 에 대해서 요소들을 회색으로 한다. 

 

table 을 쓰지않고 표를 만들때 써도 좋지 않을까 싶다. 

 

 

 

 

7.5 정합성 체크 셀렉터(validity pseudo-class)

:valid(셀렉터) 정합성 검증이 성공한 input 요소 또는 form 요소를 선택한다.
:invalid(셀렉터) 정합성 검증이 실패한 input 요소 또는 form 요소를 선택한다.

 

<!DOCTYPE html>
<html>
<head>
  <style>
    input[type="text"]:valid {
      background-color: greenyellow;
    }

    input[type="text"]:invalid {
      background-color: red;
    }
  </style>
</head>
<body>
  <label>입력값이 반드시 필요
    <input type="text" required>
  </label>
  <br>
  <label>특수문자를 포함하지 않는 4자리 문자 또는 숫자
    <input type="text" value="ab1!"
      pattern="[a-zA-Z0-9]{4}" required>
  </label>
  <br>
  <label>핸드폰 번호 형식
    <input type="text" value="010-1111-2222"
      pattern="^\d{3}-\d{3,4}-\d{4}$" required>
  </label>
</body>
</html>

 

정규표현식과 함께 사용하여 해당 input 의 원하는 조건을 시각적으로 보여 줄 수 있을것 같다. 

 

 

 

 

 

 

 

8. 가상 요소 셀렉터 (Pseudo-Element Selector)

 

가상 요소는 요소의 특정 부분에 스타일을 적용하기 위하여 사용된다. 특정 부분이란 예를 들어 다음과 같다.

  • 요소 콘텐츠의 첫글자 또는 첫줄
  • 요소 콘텐츠의 앞 또는 뒤

가상 요소에는 두개의 콜론(::)을 사용한다. CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다.

 

::first-letter 콘텐츠의 첫글자를 선택한다.
::first-line 콘텐츠의 첫줄을 선택한다. 블록 요소에만 적용할 수 있다.
::after 콘텐츠의 뒤에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
::before 콘텐츠의 앞에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
::selection 드래그한 콘텐츠를 선택한다. iOS Safari 등 일부 브라우저에서 동작 않는다.

 

 

before 를 사용하여 그림 - 어두운 레이어(before) - 텍스트를 이용하여 만들어본적이있다. 

 

 

 

요약

 

 

1. 전체 셀렉터 (Universal Selector)  
* 


2. 태그 셀렉터 (Type Selector)       
h1 , p , ...


3. ID 셀렉터 (ID Selector)              
#ID


4. 클래스 셀렉터 (Class Selector)      
.class


5. 어트리뷰트 셀렉터 (Attribute Selector)   
a[href] { color: red; }
셀렉터[어트리뷰트]
셀렉터[어트리뷰트=”값”]
셀렉터[어트리뷰트~=”값”]
셀렉터[어트리뷰트|=”값”]
셀렉터[어트리뷰트^=”값”]
셀렉터[어트리뷰트$=”값”]
셀렉터[어트리뷰트*=”값”] 

 

 


6. 복합 셀렉터(Combinator)

6.1 후손 : 셀렉터A 셀렉터B     
div p


6.2 자식 : 셀렉터A > 셀렉터B   
div > p


6.3 인접 형제 셀렉터
셀렉터A + 셀렉터B 


6.4 일반 형제 셀렉터
셀렉터A ~ 셀렉터B

 


7. 가상 클래스 셀렉터 (Pseudo-Class Selector)
7.1 링크, 동적 셀렉터
:hover , :active, :focus, :link, :visited 

7.2 UI 요소 상태 셀렉터
:checked , :enabled , :disabled 

7.3 구조 가상 클래스 셀렉터

셀렉터에 해당하는 모든 요소 중 n번째
:first-child , :last-child  , :nth-child(n) , :nth-last-child(n) 

셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 n번째 등장하는 요소를 선택한다.
:first-of-type , :last-of-type , :nth-of-type(n), :nth-last-of-type(n)

7.4 부정 셀렉터

셀렉터에 해당하지 않는 모든 요소를 선택한다.
:not(셀렉터)

 

 div 요소 중에서 4번째 이후 등장하는 요소가 아닌 요소만을 선택

 div:not(:nth-of-type(n+4)) { } 

 


7.5 정합성 체크 셀렉터(validity pseudo-class)
정합성 검증이 성공/실패한 input 요소 또는 form 요소를 선택
:valid , :invalid


8. 가상 요소 셀렉터 (Pseudo-Element Selector)
::before , ::after , ::first-letter , ::first-line , ::selection

 

 

'CSS3' 카테고리의 다른 글

5. display, visibility, opacity  (0) 2024.06.28
4. 박스모델  (0) 2024.06.27
3. 프로퍼티 값의 단위  (0) 2024.06.27
1. CSS 기본 문법  (0) 2024.06.26
0. css2 와 css3 의 차이  (0) 2024.06.26
'CSS3' Related Articles more