John Isaac

I learned a couple of cool tricks in CSS today.

:empty

When an element does not contain any child or just empty text, I wanted to hide this element entirely. For example, an alert message that only gets displayed sometimes. I was used conditional statements before to show and hide these elements. It turns out, in CSS, you can basically do this

element:empty {
  display: none;
}

::placeholder

I have been using this for a while to shown label for input fields. You can also style them. For example, if you want to change the color of a placeholder, You can do this

element::placeholder {
  color: red; 
}

Support for :empty and ::placeholder looks good