pseudo selectors part 1
<body>
<span>hello</span>
<p>hello my name is <span>Caleb</span></p>
</body>
</html> 이러한 코드가 있을 때 p 태그안에 span의 스타일을 바꾸기 위해 pseudo selectors를 사용해서 어떻게 스타일을 바꿀까?
답은 pseudo selectors의 문법에 있다. style sheet 안에span p를 적어서 p 태그 안에 span의 스타일을 바꿀 수 있다.코드 예시
<style> p span{ color:green; } </style>
이번에는 맨 위에 있는 코드에서 p 태그 밖에 있는 span의 스타일만 바꾸는 방법을 소개할 것이다. 만약에 우리가 p 태그 밖에 있는 span에게만 밑줄을 그어주고 싶다면 CSS를 통해 span 스타일안에 text-decoration: underline을 선언 해줄 수 있다. 그러나 이렇게 코드를 작성했을 시 문제점은 p태그 안에 있는 span 또한 밑줄이 그어진다는 것이다. 이렇게 되면 span CSS안에서 선언한 text-decoration: underline을 p span CSS안에서 text-decoration:을 다시 none 시켜야한다. 코드가 길어질 수록 비효율적이다. 그래서 body > span을 이용해서 body의 직속 자식 중에 span의 CSS안에 text-decotration: underline을 선언해서 p태그 밖에 있는 span에 밑줄을 그을 수 있게 된다
p태그 밖에있는 span 의 CSS
<style> body > span{ text-decoration: underline; } </style>
<body> <p>my Name is</p> <span>Caleb</span> </body>
위 코드와 같이 span 태그가 p 태그 바로 아래에 위치했을 때는 CSS로 p + span으로 p 태그 아래에 위치한 span의 위치를 정의해주면 된다.
