CSS_4(Combinator, Pseudo-Classes_2)

Combinator

부모 안에 있는 자식을 바꾸고 싶은데 부모 밖에 있는 요소는 바꾸게 하고 싶지 않을때 어떻게 할까!!!! (뭔소리지..)

<span></span>
<p>//대충 뭔가 써있음
    <span>child</span>
</p>

밖의 span 말고 p안의 span만 바꾸고 싶으면 어떻게 할까!!!!

p span {
    // 바꿀 내용
}

위 처럼 부모 안의 자식만 바꿀 수 있다.

그런데 쓰다보면 조금 문제가 생긴다. 예를 들면 다음과 같다.

<div>
    <span>HELLO!!!</span>
    <p>//대충 뭔가 써있음
        <span>child</span>
    </p>
</div>

div span {
    // 바꿀 내용
}

div 바로 아래에 있는 span (HELLO!!!) 만 바꾸고 싶은데 위처럼 쓸 경우에는 <p>의 자식인 span (child) 까지 동시에 바뀌게 된다. 다음과 같이 수정할 수 있다.

div span{
    // 바꿀 내용
}

div p span {
    // 원래대로 고칠 내용
}

그런데 이것보다 더 좋은 방법이 있다.

div > span {
    // 바꿀 내용
}

'>' 기호를 사용하면 부모의 바로 아래에 있는 자식을 가리키게 된다.

또한, '+' 기호를 사용할 수도 있다.

p + span {
    // 바꿀 내용
}

그런데 주의할 점은 <p>다음에 <span>이 와야한다는 것이다. 무슨 말인가 하면

<div>
    <p>//대충 뭔가 써있음
        <span>child</span>
    </p>
    <span>HELLO!!!</span>
</div>

이와 같이 씌여야 한다. 만약 <p> 위에 <span> 이 있으면 적용이 안된다. 그런데 <p> 뒤에 <span> 이 바로 오지 않으면 '+'가 적용이 안된다. 이 때 '~'를 사용한다. <p>의 모든 <span>에 대해서 적용이 된다.

 

Combinator에 대해서 정리 해보자.

• p span : 부모'p' 밑의 모든 자식 'span'
• p > span : 부모 'p' 바로 밑의 자식 'span'
• p + span : 'p'다음에 바로 오는 'span'
• p ~ span : 'p'다음에 오는 'span' ('+'과는 다르게 p 다음에 어디든 와도 상관 없다. 모든 형제에 적용된다.)

 

Pseudo Classes

attribute의 내용에 따라서도 변화를 줄 수 있다.

다음과 같은 코드가 있다고 해보자.

<input type="text" placeholder="ID" />
<input type="password" placeholder="password" />

간단한 ID와 비밀번호 입력을 만든것이다. 그런데 ID 입력칸에만 변화를 주고 싶을때 다음과 같이 할 수 있다.

input[placeholder="ID"] {
    // 바꿀 내용
}

중괄호 안에 정보를 입력한다.

저 내용을 조금씩 바꾸면서 우너하는 정보들에만 설정을 해 줄수도 있다.

placeholder ~= "ID" 에서 '~=' 는 placeholder의 내용중에 "ID"를 포함하고 있으면 그 요소들은 전부 변경할 수 있다.

<input type="text" placeholder="First Name" />
<input type="text" placeholder="Last Name" />
<input type="password" placeholder="password" />

input[placeholder~="Name"] {
   border-color: darkred;
   // 등등 바꿀 내용
}

이렇게 써져 있으면, Name이 포함된 First Name칸과 Last Name칸만 변경된다.

자세한 내용은 다음 링크를 따라가면 알 수 있다.

https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors

특성 선택자