focus-within
속성 스스로 :focus
pseudo class와 일치하거나, 그 자손 중 하나가 :focus
와 일치하는 요소를 나타내는 pseudo class이다.
예를 들어 폼 인풋에 포커스를 뒀을때, 폼 전체에 특정한 스타일이 적용되게 하고싶은 상황에서 인풋의 focus여부와 관련된 state를 쓸 필요가 없어져서 유용함!
예를 들어 부모 컴포넌트에 마우스를 올렸을때,
부모 컴포넌트 안에 있는 자식의 색도 바꾸고 싶다면,
자식 styled 컴포넌트에서 부모 styled 컴포넌트를 css selector로 고르듯이 할 수 있다.
부모 자식간에만 성립하지, 형제관계에서는 서로 refer할 수 없다
const 부모컴포넌트 = styled.div`
...
`;
const 자식컴포넌트 = styled.p`
${부모컴포넌트}:hover & {
color: red;
}
`;
The styled method works perfectly on all of your own or any third-party component, as long as they attach the passed className prop to a DOM element.
styled component를 safe하게 이용하기 위해서는 따로 컴포넌트를 만들어줄때 className을 꼭 받아야 완벽하게 적용된다고 한다!
const Link = ({ className, children }) => (
<a className={className}>
{children}
</a>
);
const StyledLink = styled(Link)`
color: palevioletred;
font-weight: bold;
`;
render(
<div>
<Link>Unstyled, boring Link</Link>
<br />
<StyledLink>Styled, exciting Link</StyledLink>
</div>
);
이렇게 Link라는 나만의 컴포넌트를 만들어서 StyledLink라고 extend해서 사용할때, Link에서 전달된 className을 잘 받아서 사용할 수 있도록 명시해주어야 한다는 것..!
별 생각없이 많이 쓰던 태그인데 스타일링을 하다가 이상해서 찾아봤더니 inline-block이어서 그랬던것
inline-block 은 말그대로 inline의 특징과 block의 특징을 모두 가진 요소이다!
그래서 버튼이랑 인풋에 width, height을 지정해줘도 적용이 되었던것!
를 적용하기 위해서는 부모 태그가 block 요소여야 한다 (3번과 같은 맥락)
element1 이후에 나오는 모든 형제 요소를 선택자로 사용
element1 뒤의 요소가 꼭 element2여야만 적용되고, element2에 대해서만 선택자로 사용된다!!