수정시 유용한 css

이제 부터 잘 알아두어야 한다.

고정된 소스에 css만 수정해야할 때 유용한 것들이다.

보통 기존 소스에서 디자인이 수정되었을때 많이 한다.

이런일이 안생기게 css 구조 설계가 잘되어 있어야하는데

보통 수정사항이 많아지고 구조가 바뀌면서 덕지덕지 붙여야하는 경우가 많다.

Selector	구분예제	css	결과	비고
element > element	<div>   <h1>1</h1>   <p>2</p> </div>	div > p {background-color: yellow;}	1 2	div안 p 태그만 적용
element + element	<div>   <h2>1</h2>   <p>2</p> </div> <p>3</p> <p>4</p>	div + p{background-color: yellow;}	1 2 3 4	div 다음에 오는 p 태그만 적용
element ~ element	<div>   <h2>1</h2>   <p>2</p> </div> <p>3</p> <p>4</p>	div ~ p {background-color: yellow;}	1 2 3 4	div 다음에 나오는 p태그 모두다 적용
[attribute]	<a href="">1</a> <a href="" target="_blank">2</a> <a href="" target="_top">3</a>	a[target]{background-color: yellow;}	1 2 3	[]안에 나오는 소스만 적용
[attribute=value]	<a href="">1</a> <a href="" target="_blank">2</a> <a href="" target="_top">3</a>	a[target=_blank]{background-color: yellow;}	1 2 3	[]안에 나오는 소스만 적용
[attribute~=value]	<a title="klematis flowers">1</a> <a title="flower">2</a> <a title="landscape">3</a> <p title="flower">4</p>	[title~=flower]{background-color: yellow;}	1 2 3 4	flower 만 나오는 소스만 적용
[attribute|=value]	<p lang="en">1</p> <p lang="en-us">2</p> <p lang="en-gb">3</p> <p lang="us">4</p> <p lang="no">5</p>	[lang|=en]{background-color: yellow;}	1 2 3 4 5	en을 포함 하고 있는 소스만 적용
[attribute^=value]	<div class="first_test">1</div> <div class="second test" >2</div> <div class="test">3</div> <p class="test">4</p>	div[class^="test"]{background-color: yellow;}	1 2 3 4	div안에 class에 test 소스만 적용
[attribute$=value]	<div class="first_test">1</div> <div class="test second" >2</div> <div class="test">3</div> <p class="test">4</p>	div[class$="test"]{background-color: yellow;}	1 2 3 4	div안에 class에 test로 끝나는 소스만 적용
[attribute*=value]	<div class="first_test">1</div> <div class="test second" >2</div> <div class="test">3</div> <p class="test">4</p>	div[class*="test"]{background-color: yellow;}	1 2 3 4	div안에 class에 모든 test 소스만 적용