Revolutionize Your CSS Skills with These 8 Cutting-Edge CSS Features

Introduction:

Having all the CSS concepts and remembering them is quite difficult, so here I will go over the most important CSS concepts that will take your CSS knowledge to the next level…

Now, get your pen and paper ready because we have some exciting new CSS features to unveil:

1- “:empty” Pseudo-Class:

• A new pseudo-class I came up with is “:empty”, which styles any element that contains no child nodes (child elements, text, etc.) so that you can fill up the element later with JavaScript which will remove those styles as the element is no longer empty.
• This is useful in a variety of situations, including the example we mentioned above.

p:empty{
  display: none;
}

• the element will not be displayed only if it is empty, otherwise, it will show up on the screen with its children.

2- “:target” Pseudo-Class:

• Sometimes you want to make some links that move to someplace on the same page, and at that moment you need to make some “focus styling” on the place you are moving to, that’s why “:target” pseudo-class has existed…
• “:target” pseudo-class is used to style any element in the page that is targeted from some link on the same page

section:target{
  outline: 2px solid #ff0000;
}

3- “:only-child” | “:only-of-type” Pseudo-Classes:

• “:only-child” pseudo-class is used to style an element that is the only child in its parent element
• “:only-of-type” pseudo-class is used to style an element that is the only element of its type in its parent element.

HTML:
<section>
  <p class='paragraph'> Hello World </p>
</section>

CSS:
.paragraph:only-child {
  color: #666;
}
.paragraph:only-of-type {
  border: 1px solid #ff0000; 
}

4- “:has()” Pseudo-Class:

• Absolutely, It is one of the most powerful features that really changed CSS, you should understand how powerful this pseudo-class is.
• It is used to style any element but just if it has some child element in it.
• for instance, let’s say you have two “section” elements and one of them has “h1” element inside it. If you want to give the element that has the heading element inside it some special style, that can be done by giving the element some specific class or id or using JavaScript.
• but now using this new feature, that can be done in a few seconds.

HTML:
<section>
  <h1> Hello From Section 1 </h1>
</section>
<section>
  <p> Hello From Section 2 </p>
</section>

CSS:
section:has(h1) {
  border: 1px solid red;
}

• Only the first section element that has the “h1” element inside it will have a red border.

5- “:is()” Pseudo-Class:

• This feature will save you a lot of time, It is used to simplify grouping selectors, Its usages:
• grouping element selectors

:is(h1,h2,h3,h4,h5,h6) {
  margin: 0;
}

• grouping pseudo-classes

button:is(:hover, :focus) {
  border: 1px solid #555;
}

6- inset property:

• Save yourself some coding time with this shorthand property, which combines the (top, right, bottom, and left) properties into a single line. It’s a convenient way to streamline your code and make it more efficient.
• And if you’re looking to position an element absolutely and have it fill its parent container, look no further than this property. It’s the perfect solution for achieving a seamless, full-width design.

section::after{
  position: absolute;
  inset: 0;

  /* Instead of */
  /* top: 0; */
  /* bottom: 0; */
  /* left: 0; */
  /* right: 0; */
}

** 7- “vmax” unit:**

• This versatile unit has many applications. For instance, if you want to create a pill-shaped element, simply apply a “border-radius” property with a value of “100vmax”. It’s that easy!

div{
  .
  .
  border-radius: 100vmax;
}

• It can be used to give an element the full width of the viewport, instead of using “100vw” values and falling into (overflow) issues:

div {
  box-shadow: 0 0 0 100vmax var(—same-bgColor-of-the-element);
  clip-path: inset(0 -100vmax); 
}

8- Advanced Selectors:

• Knowing these advanced selectors is essential for any web developer, as they can help you achieve complex effects without relying on JavaScript.
• In other words, they’re powerful tools that can streamline your workflow and enhance your coding skills.

img[alt]{
  /* Selecting any (img) element that has (alt) attribute */
}

img[alt="image"]{
  /* Selecting any (img) element that has (alt) attribute 
  with the value "image" */
}

img[alt^="image"]{
  /* Selecting any (img) element that has (alt) attribute 
  with the letters "image…" at the first of the value */
}

a[href$=".com"]{
  /* Selecting any (a) element that has (href) attribute with
  the letters "….com" at the end of the value */
}

div[class*="box"]{
  /* Selecting any (div) element that has (class) attribute with
  the letters "box" anywhere in the value */
}

Conclusion:

In conclusion, CSS is constantly evolving, with new features and enhancements being added all the time. By keeping up to date with the latest developments and leveraging the power of advanced selectors, shorthand properties, and versatile units, you can take your CSS skills to the next level and create stunning, responsive designs. So, keep experimenting, keep learning, and keep pushing the boundaries of what’s possible with CSS!