` element right below it. In that case, you can adjust the margin accordingly. Here’s a simple example of how you can achieve this with the `:has()` selector:
“`css
h2 {
margin-block-end: 1.2rem;
&:has(+ time) {
margin-block-end: 0;
}
&:has(+ time) + time {
margin-block-end: 1.2rem;
}
“`
This feature of CSS is incredibly powerful as it allows for deep inspection of DOM elements and flexible styling options. It’s like giving CSS the ability to look down the tree and then move back up as needed. The possibilities are endless, and developers are finding creative ways to leverage this new feature.
One practical application of the `:has()` selector is in styling dynamic content in templates. For example, you can style elements based on their attributes or content. This can be particularly useful when dealing with unknown data coming into templates. With JSX, you can easily target elements based on their attributes or content like this:
“`html
{thing.map((thing) => (
{thing.name}
{thing.text}
))}
“`
And then style them using the `:has()` selector:
“`css
.thing:has([data-category=”widget”]) {
background: yellow;
}
“`
The `:has()` selector opens up a whole new world of possibilities for styling in CSS. From simple margin adjustments to complex quantity queries, the `:has()` selector gives developers more control over their styles than ever before. It’s definitely a feature worth exploring and experimenting with in your projects.
Another cool CSS feature that deserves more attention is blend modes. Blend modes allow you to create stunning visual effects by blending elements with their backgrounds or layering multiple backgrounds with different blend modes. The results can be dramatic or subtle, depending on how you use them.
Brad Woods has a great article showcasing the power of blend modes with interactive examples that really bring them to life. From blending gradients over images to blending textures and patterns, blend modes give you the ability to create unique and striking visual effects programmatically.
Koding Kitty also has a helpful explanation of blend modes using Tailwind class names, making it easier to apply blend modes to your designs. Robin’s guide on CSS-Tricks is also a valuable resource for learning more about blend modes and how to use them effectively in your projects.
Overall, blend modes are a powerful feature that can add depth and dimension to your designs. Whether you want to create bold, dramatic effects or subtle, nuanced textures, blend modes allow you to customize your designs in ways that were previously difficult or impossible in CSS.
In conclusion, CSS is a versatile and powerful tool that offers endless possibilities for creating stunning visual effects. From blend modes to shadows and blend modes, the latest CSS features give developers more control over their designs than ever before. So why not explore these features in your next project and see what creative effects you can achieve!