[ CSS ] :empty

아티클을 읽다가 

CSS 선택자 중에 :empty 가 있다는 걸 처음 알았습니다. 

저도 항상 첫번째 예시처럼 코드를 작성하곤 했었는데, 

CSS로 훨씬 더 간단한 코드를 짤 수 있었더라구요. 

 

1.

const Card = ({ children, header }) => {
  return (
    <div className="card">
      {header && <div className="card__header">{header}</div>}
      {children}
    </div>
  );
};

 

2.

const Card = ({ children, header }) => {
  const headerRef = useRef();

  useEffect(() => {
    const hasContent = headerRef.current?.childNodes.length > 0;
    headerRef.current.style.display = hasContent ? "block" : "none";
  });

  return (
    <div className="card">
      {header && (
        <div ref={headerRef} className="card__header">
          {header}
        </div>
      )}
      {children}
    </div>
  );
};

 

3. 

/*css*/
.card__header:empty {
  display: none;
}

.

.

.

이번에 그래서 :empty에 대해 찾아봤습니다. 

: empty 란?

The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS content do not affect whether an element is considered empty.
출처 : mdn

 

---

참고

https://blog.stackademic.com/we-forgot-frontend-basics-2f9a1c4dabaa

https://developer.mozilla.org/en-US/docs/Web/CSS/:empty