CSS: Some CSS Selectors You Should Know

CSS: Some CSS Selectors You Should Know

I have been using CSS for a while now, and I have come across some CSS selectors that I myself haven't heard and seen before despite using CSS for more than 7 years now. Here are some of them:

Empty Selectors

The :empty selector is used to select elements that contain no children. For example, the following CSS will hide any empty div elements:

<div class="container">
    <p>This paragraph is not empty.</p>
    <span></span>
    <div></div>
</div>
html

.container div:empty {
    display: none;
}
css

Target Selectors

The :target selector matches the current active hashtag in the URL. For example, the following CSS will change the background color of the element with the ID of #about when the URL contains #about:

<div id="about">
    <h2>About</h2>
    <p>This is the about section.</p>
</div>
html

#about:target {
    background-color: yellow;
}
css

Lang Selectors

The :lang selector is used to select elements with a specific language. For example, the following CSS will change the color of any element with the lang attribute set to fr:

<p lang="fr">Bonjour!</p>
<p lang="en">Hello!</p>
html

p:lang(fr) {
    color: blue;
}

p:lang(en) {
    color: green;
}
css