CSS Selector (CSS 선택자)

CSS Selector (CSS 선택자)

 

정말 자주 쓰이고 유용한 CSS 선택자에 대해서 알려드리도록 하겠습니다.

 

* 

페이지의 모든 element를 선택합니다.

보통 많은분들이 모든 element에 기본적으로 있는 margin과 padding을 지우고 시작하기위해 사용할때 등에 많이 사용합니다.

<style>
    * {
        margin: 0;
        padding: 0; 
    }
</style>

 

Element

해당 Element를 선택합니다.

<style> 
    p { 
        color: red; 
    } 
</style>

<div> 선택되지 않습니다 </div>
<p> 선택됩니다 </p> 

 

#ID

해당 id를 지정한 Element를 선택합니다.

<style>
    #exampleID {
        background-color: skyblue;
        color: white;
    }
</style>

<p> 선택되지 않습니다 </p>
<p id="exampleID"> 선택됩니다 </p>

 

.Class

해당 Class를 지정한 Element를 선택합니다.

<style>
    .example-class {
        background-color: red;
    }
</style>

<div> 선택되지 않습니다 </div>
<div class="example-class"> 선택됩니다 </div>

 

SelectorSelector

첫번째 Selector와 두번째 Selector를 붙여서 작성합니다.

첫번째 Selector 조건과 두번째 Selector 조건 모두에 해당하는 Element를 선택합니다.

해당 Element이면서 해당 Class로 지정된 Element.Class

다수의 Class로 지정된 .Class.Class

등으로 사용될 수 있습니다.

<style>
    div.example-class { 
        background-color: yellow; 
    } 
</style>

<p class="example-class"> 선택되지 않습니다 </p>  
<div class="example-class"> 선택됩니다 </div> 

<style>
    .example-class-2.example-class-3 {
        background-color: yellow;
    }
</style>

<p class="example-class-2"> 선택되지 않습니다 </p>
<p class="example-class-2 example-class-3"> 선택됩니다 </p>

 

Selector Selector

첫번째 Selector와 두번째 Selector를 띄워서 작성합니다.

첫번째 Selector 조건에 해당하는 Element의 하위에 위치한 Element들 중에 두번째 Seletor 조건에 해당하는 Element를 선택합니다.

<style>
    p span {
        color: red;
    }
</style>

<div>
    <span>선택되지 않습니다</span>
</div>
<p>
    <span>선택됩니다</span>
</p>

<style>
    p.example-class span {
        color: red;
    }
</style>

<p>
    <span>선택되지 않습니다</span>
</p>
<p class="example-class">
    <span>선택됩니다</span>
</p>

 

Selector>Selector

첫번째 Selector와 두번째 Selector를 사이에 '>'를 넣어 작성합니다.

첫번째 Selector 조건에 해당하는 Element의 바로 아래 계층에 위치한 Element들 중에 두번째 Seletor 조건에 해당하는 Element를 선택합니다.

※Selector Selector와 다릅니다.

Selector Selector는 첫번째 Selector 조건에 해당하는 Element의 몇단계 하위이든 상관없고

Selector>Selector는 첫번째 Selector 조건에 해당하는 Element의 바로 아래 계층의 Element만 선택합니다.

<style>
    div>span {
        color: red;
    }
</style>

<div>
    <p>
        <span>
            선택되지 않습니다
        </span> 
    </p>
</div>
<div>
    <span>
        선택됩니다
    </span>
</div>

 

Selector+Selector

첫번째 Selector와 두번째 Selector를 사이에 '+'를 넣어 작성합니다.

첫번째 Selector로 선택된 Element와 같은 계층의 바로 뒤에 위치한(형제 노드) Selector 조건에 해당하는 Element를 선택합니다.

<style>
    #myID+p {
        color: red;
    }
</style>

<div>
    <p> 선택되지 않습니다 </p>
    <p> 선택되지 않습니다 </p>
    <p id="myID"> 기준 </p>
    <p> 선택됩니다 </p>
    <p> 선택되지 않습니다 </p>
</div>

 

Selector~Selector

첫번째 Selector와 두번째 Selector를 사이에 '~'를 넣어 작성합니다.

첫번째 Selector로 선택된 Element와 같은 계층의 뒤에 위치한 모든 Element들 중에 두번째 Seletor 조건에 맞는 Element를 선택합니다.

※ Selector+Selector와 다릅니다.

Selector+Selector는 첫번째 Selector조건에 해당하는 Element의 같은 계층의 바로 뒤의 Element에만 해당하고

Selector~Selector는 첫번째 Selector조건에 해당하는 Element의 같은 계층의 뒤의 모든 Element에 해당합니다.

<style>
    #myID~p {
        color: red;
    }
</style>

<div>
    <p> 선택되지 않습니다 </p>
    <p> 선택되지 않습니다 </p>
    <p> 선택되지 않습니다 </p>
    <p id="myID"> 기준 </p>
    <p> 선택됩니다 </p>
    <p> 선택됩니다 </p>
    <p> 선택됩니다 </p>
</div>

 

Selector,Selector

첫번째 Selector와 두번째 Selector 사이에 ','를 넣어 작성합니다.

첫번째 Selector 조건에 해당하는 Element와 두번째 Selector 조건에 해당하는 Element 모두 선택합니다.

<style>
    div,p {
        border: solid 1px black;
    }
</style>

<div> 선택됩니다 </div>
<p> 선택됩니다 </p>

 

[Attribute]

해당 Attribute가 지정되있는 Element를 선택합니다.

해당 Attribute의 Value가 어떤 값이던지 우선 존재하기만 한다면 해당 Element를 선택합니다.

<style>
    button[title] {
        background-color: pink;
    }
</style>

<button>선택되지 않습니다</button>
<button title="my-title">선택됩니다</button>
<button title="my-title2">선택됩니다</button>

 

[Attribute=Value]

해당 Attribute의 Value가 지정한 Value와 같은 Element를 선택합니다.

[Attribute]에서는 해당 Attribute가 존재만 하면 해당 Element를 선택했지만

[Attribute=Value]는 해당 Attribute의 Value가 같은 Element만 선택합니다.

<style>
    button[name=my-title] {
        background-color: pink;
    }
</style>

<button title="your-title">선택되지 않습니다</button>
<button title="my-title your-title2">선택되지 않습니다</button>
<button title="my-title">선택됩니다</button>
<button title="my-title2">선택되지 않습니다</button>

 

[Attribute*=Value]

해당 Attribute의 Value가 지정한 Value의 문자열을 포함하는 Element를 선택합니다.

<style>
    button[name*=my-title] {
        background-color: red;
    }
</style>

<button title="your-title">선택되지 않습니다</button>
<button title="my-title your-title2">선택됩니다</button>
<button title="my-title">선택됩니다</button>
<button title="my-title2">선택됩니다</button>

 

[Attribute^=Value]

해당 Attribute의 Value가 지정한 Value의 문자열로 시작하는 Element를 선택합니다.

<style>
    button[title^=y] {
        background-color: red;
    }
</style>

<button title="your-title">선택됩니다</button>
<button title="my-title your-title2">선택되지 않습니다</button>
<button title="my-title">선택되지 않습니다</button>
<button title="my-title2">선택되지 않습니다</button>

 

[Attribute$=Value]

해당 Attribute의 Value가 지정한 Value의 문자열로 끝나는 Element를 선택합니다.

<style>
    button[title$=title] {
        background-color: red;
    }
</style>

<button title="your-title">선택됩니다</button>
<button title="my-title your-title2">선택되지 않습니다</button>
<button title="my-title">선택됩니다</button>
<button title="my-title2">선택되지 않습니다</button>

 

[Attribute~=Value]

해당 Attribute의 Value가 지정한 Value를 포함하는 Element를 선택합니다.

※ [Attribute*=Value] 와 다릅니다.

[Attribute*=Value]는 Value에 해당하는 문자열을 포함하기만 하면되고,

[Attribute~=Value]는 Value에 해당하는 Value가 정확히 포함되어 있어야 합니다.

[Attribute=Value]와도 다르니 찬찬히 비교해 보시면 좋을 것 같습니다!

<style>
    button[name~=my-title] {
        background-color: red;
    }
</style>

<button title="your-title">선택되지 않습니다</button>
<button title="my-title your-title2">선택됩니다</button>
<button title="my-title">선택됩니다</button>
<button title="my-title2">선택되지 않습니다</button>

 

Selector:not(Selector)

not()안에 있는 Selector의 조건에 해당하는 Element를 제외하고 맨앞의 Selector의 조건에 해당하는 Element를 선택합니다.

<style>
    p:not(#myID) {
        color: red;
    }
</style>

<p> 선택됩니다 </p>
<p id="myID"> 선택되지 않습니다 </p>
<p> 선택됩니다 </p>

 

Selector:hover

Selector의 조건에 해당하는 Element의 마우스 오버 상태를 선택합니다.

<style>
    a:hover {
        background-color: blue;
    }
</style>

<a href="#">마우스 오버시 배경색이 변합니다</a>

 

Selector:link

Selector의 조건에 해당하는 Element를 통해 방문한 적이 없는 상태를 선택합니다.

<style>
    a:link{
        color: green;
    }
</style>

<a href="#">클릭하여 링크로 들어간적이 없을 때 글자색을 지정합니다</a>

 

Selector:visited

Selector의 조건에 해당하는 Element를 통해 이미 방문한 상태를 선택합니다.

<style>
    a:visited {
        color: red;
    }
</style>

<a href="#">클릭하여 링크로 들어갔다면 글자색이 변합니다</a>

 

Selector:checked

Selector의 조건에 해당하는 Element 중 Checked 상태인 Element를 선택합니다.

<style>
    input[type=checkbox]:checked+label {
        color: red;
    }
</style>

<input type="checkbox" id="checkbox1"><label for="checkbox1">체크시 글자색이 변합니다</label>
<input type="checkbox" id="checkbox2"><label for="checkbox2">체크시 글자색이 변합니다</label>
<input type="checkbox" id="checkbox3"><label for="checkbox3">체크시 글자색이 변합니다</label>

 

Selector:disabled

Selector의 조건에 해당하는 Element 중 disabled 상태인 Element를 선택합니다.

<style>
    input[type=text]:disabled {
        background-color: red;
    }
</style>

<input type="text">
<input type="text" value="선택됩니다" disabled>

 

Selector:enabled

Selector의 조건에 해당하는 Element 중 enabled 상태인 Element를 선택합니다.

<style>
    input[type=text]:enabled {
        background-color: red;
    }
</style>

<input type="text" value="선택됩니다">
<input type="text" disabled>

 

Selector:read-only

Selector의 조건에 해당하는 Element 중 readonly 상태인 Element를 선택합니다.

<style>
    input[type=text]:read-only {
        background-color: red;
    }
</style>

<input type="text">
<input type="text" value="선택됩니다" readonly>

 

Selector:read-write

Selector의 조건에 해당하는 Element 중 readonly 상태가 아닌 Element를 선택합니다.

<style>
    input[type=text]:read-write {
        background-color: red;
    }
</style>

<input type="text" value="선택됩니다">
<input type="text" readonly>

 

Selector:focus

Selector의 조건에 해당하는 Element에 focus된 상태(클릭하여 입력준비가 된 상태 등)를 선택합니다.

<style>
    input[type=text]:focus {
        background-color: red;
    }
</style>

<input type="text" value="focus 상태에서 배경색이 변합니다">

 

Selector::first-letter

Selector의 조건에 해당하는 Element의 첫번째 글자를 선택합니다.

<style>
    p::first-letter {
        color: red;
    }
</style>

<p>
    첫번째 글자의 색이 변경됩니다<br>
    감사합니다
</p>

 

Selector::first-line

Selector의 조건에 해당하는 Element의 첫번째 줄을 선택합니다.

<style>
    p::first-line {
        color: red;
    }
</style>

<p>
    첫번째 줄의 색이 변경됩니다<br>
    감사합니다
</p>

 

Selector:first-child

Selector의 조건에 해당하는 Element중 첫번째 자식 노드로 있는 Element를 선택합니다.

<style>
    div p:first-child {
        color: red;
    }
</style>

<div>
    <p>선택됩니다</p>
    <p>선택되지 않습니다</p>
    <p>선택되지 않습니다</p>
</div>

 

Selector:last-child

Selector의 조건에 해당하는 Element중 마지막 자식 노드로 있는 Element를 선택합니다.

<style>
    div p:last-child {
        color: red;
    }
</style>

<div>
    <p>선택되지 않습니다</p>
    <p>선택되지 않습니다</p>
    <p>선택됩니다</p>
</div>

 

Selector:nth-child(n)

Selector의 조건에 해당하는 Element 중 n번째 자식 노드로 있는 Element를 선택합니다.

※ 0번째부터 시작하지 않고 1부터 시작합니다. Array가 0부터 시작한다고 헷갈리시면 안됩니다!

<style>
    div p:nth-child(2) {
        color: red;
    }
</style>

<div>
    <p>선택되지 않습니다</p>
    <p>선택됩니다</p>
    <p>선택되지 않습니다</p>
    <p>선택되지 않습니다</p>
    <p>선택되지 않습니다</p>
</div>

 

Selector:nth-last-child(n)

Selector의 조건에 해당하는 Element 중 뒤에서 n번째 자식 노드로 있는 Element를 선택합니다.

※ 0번째부터 시작하지 않고 1부터 시작합니다. Array가 0부터 시작한다고 헷갈리시면 안됩니다!

<style>
    div p:nth-last-child(2) {
        color: red;
    }
</style>

<div>
    <p>선택되지 않습니다</p>
    <p>선택되지 않습니다</p>
    <p>선택되지 않습니다</p>
    <p>선택됩니다</p>
    <p>선택되지 않습니다</p>
</div>

 

Selector:nth-of-type(n)

Selector의 조건에 해당하는 Element 중 n번째로 Selector 조건에 해당하는 Element를 선택합니다.

※ Selector:nth-child(n)와 비슷하다고 생각하실 수 있지만 다릅니다. 예제로 설명드리겠습니다. 

Selector:nth-child(n) = n번째 자식 노드로 있는 Selector 조건에 해당하는 Element

Selector:nth-of-type(n) = Selector 조건에 해당하는 Element 중에 n번째 Element

<style>
    div p:nth-child(2) {
        color: red;
    }
</style>

<div>
    <p>선택되지 않습니다</p>
    <div>선택되지 않습니다</div>    <!-- 2번째 자식노드에 해당하는 p가 없으므로 아무것도 선택되지 않음 -->
    <p>선택되지 않습니다</p>
    <div>선택되지 않습니다</div>
    <p>선택되지 않습니다</p>
    <div>선택되지 않습니다</div>
    <p>선택되지 않습니다</p>
    <div>선택되지 않습니다</div>
    <p>선택되지 않습니다</p>
</div>

<style>
    div p:nth-of-type(2) {
        color: red;
    }
</style>

<div>
    <p>선택되지 않습니다</p>
    <div>선택되지 않습니다</div>
    <p>선택됩니다</p>    <!-- p중에 2번째에 해당하므로 선택됨 -->
    <div>선택되지 않습니다</div>
    <p>선택되지 않습니다</p>
    <div>선택되지 않습니다</div>
    <p>선택되지 않습니다</p>
    <div>선택되지 않습니다</div>
    <p>선택되지 않습니다</p>
</div>

 

Selector:nth-last-of-type(n)

Selector의 조건에 해당하는 Element 중 n번째로 Selector 조건에 해당하는 Element를 선택합니다.

※ Selector:nth-last-child(n)와 비슷하다고 생각하실 수 있지만 다릅니다. 예제로 설명드리겠습니다. 

Selector:nth-last-child(n) = 뒤에서 n번째 자식 노드로 있는 Selector의 조건에 해당하는 Element

Selector:nth-last- of-type(n) = Selector의 조건에 해당하는 Element 중에 뒤에서 n번째 Element

<style>
    div p:nth-last-child(2) {
        color: red;
    }
</style>

<div>
    <p>선택되지 않습니다</p>
    <div>선택되지 않습니다</div>
    <p>선택되지 않습니다</p>
    <div>선택되지 않습니다</div>
    <p>선택되지 않습니다</p>
    <div>선택되지 않습니다</div>
    <p>선택되지 않습니다</p>
    <div>선택되지 않습니다</div>    <!-- 뒤에서 2번째 자식노드에 해당하는 p가 없으므로 아무것도 선택되지 않음 -->
    <p>선택되지 않습니다</p>
</div>

<style>
    div p:nth-last-of-type(2) {
        color: red;
    }
</style>

<div>
    <p>선택되지 않습니다</p>
    <div>선택되지 않습니다</div>
    <p>선택되지 않습니다</p>
    <div>선택되지 않습니다</div>
    <p>선택되지 않습니다</p>
    <div>선택되지 않습니다</div>
    <p>선택됩니다</p>    <!-- p중에 뒤에서 2번째에 해당하므로 선택됨 -->
    <div>선택되지 않습니다</div>
    <p>선택되지 않습니다</p>
</div>

 

Selector:only-child

Selector의 조건에 해당하는 Element가 유일한 자식 노드인 경우의 Element를 선택합니다. (즉 형제가 없을 경우)

<style>
    div p:only-child {
        color: red;
    }
</style>

<div>
    <p>선택됩니다</p>    <!-- 유일한 자식 노드 -->
</div>

<div>
    <p>선택되지 않습니다</p>    <!-- 형제가 있으므로 선택되지 않음 -->
    <p>선택되지 않습니다</p>
</div>

 

Selector:only-of-type

Selector 조건에 해당하는 Element와 같은 형제 노드가 없는 경우의 Element를 선택합니다. (즉 Selector 조건에 해당하는 형제가 없을 경우)

<style>
    div p:only-of-type {
        color: red;
    }
</style>

<div>
    <p>선택됩니다</p>    <!-- 유일한 자식 노드는 아니지만 p Element는 하나만 있기 때문에 선택됨 -->
    <div>선택되지 않습니다.</div>
</div>

<div>
    <p>선택되지 않습니다</p>    <!-- p Element가 2개이상 존재하기 때문에 선택되지 않음 -->
    <p>선택되지 않습니다</p>
</div>

 

정리하고나니 정말 많네요..

제가 정말 실제로 자주 사용하고 유용한 것들로만 정리해봤습니다.

혹시 추가했으면 하는 내용이나 이해가 안되는 부분이 있다면 언제든지 말씀해주시면 감사 드리겠습니다!

 

 

궁금하신 점이나 요청사항은 언제든지 말씀해주세요!

 

감사합니다!