The CSS :has() pseudo-class has been a long-awaited feature in web development. It allows developers to select parent or preceding sibling elements based on their child elements or subsequent sibling elements, respectively. This powerful tool enables more flexible and dynamic styling, opening up a world of possibilities for developers. In this article, we will discuss the usage and advantages of the pseudo-class, as well as its potential impact on web design and development.
The :has() allows developers to select elements based on their relationship with other elements in the HTML structure. This was previously impossible with CSS alone, forcing developers to rely on JavaScript or jQuery to achieve such functionality. It is a game-changer in this regard, as it empowers developers to create more dynamic and responsive designs with just CSS.
Example of a highlighting a table row if it contains an invalid input:
tr:has(input:invalid) {
background-color: #ffc0cb;
}
One of the most significant benefits of using the :has() is its ability to apply styles to parent elements based on their children's properties. For example, you can style a <div> element only if it contains a specific child element, such as an <img> tag. This allows for more granular control over your styles, and it can help to keep your stylesheets clean and maintainable.
Another advantage of the pseudo-class is its flexibility. You can use it in combination with other CSS pseudo-classes, such as :not() and :is(), to create complex selection criteria. This makes it an incredibly powerful tool for web developers, as it enables them to achieve a high level of specificity with their styles.
How to style a list item only if it contains a link:
li:has(a) {
font-weight: bold;
}
The :has() has numerous practical applications in web development, making it an indispensable tool for modern web developers. Here are some examples of how the :has() pseudo-class can be used in real-world scenarios:
Conditional Styling: The pseudo-class allows you to apply styles to elements based on their contents or structure. For instance, you can style a <nav> element differently if it contains a dropdown menu. This enables you to create more adaptive and context-aware designs that respond to the content of your website.
Dynamic Grid Layouts: With the :has(), you can create grid layouts that adjust based on the number and type of elements within a container. For example, you can style a grid container differently if it contains an even or odd number of items or if certain elements are present. This enables you to create responsive and flexible grid layouts that cater to various content types and structures.
Form Validation Feedback: It can be used to provide visual feedback to users based on the validity of form inputs. You can style a form field container differently if it contains an invalid input, alerting users to any errors and improving the overall user experience.
Nested Navigation Menus: The :has() can be used to create nested navigation menus that expand and collapse based on user interaction. By styling parent menu items based on their child elements, you can create dynamic menus that adapt to the structure of your website. The pseudo-class is a powerful and versatile tool that allows developers to create more dynamic, flexible, and responsive designs. Its ability to select parent or preceding sibling elements based on their relationships with other elements opens up a world of possibilities in web design and development. As browser support for the :has() pseudo-class continues to grow, it is poised to become an essential tool in every web developer's toolbox.
In the world of web design, CSS has always been a cornerstone for styling and formatting websites. With the increasing need for global and multilingual support in web design, it's crucial to adapt our design thinking and tools accordingly. Enter CSS Logical Properties and Values, an invaluable addition that redefines the way we approach web design across languages and writing modes. In this guide, we'll explore the advantages of using logical properties and values in your designs, dive into practical examples, and understand how this new approach can make your life easier as a designer or developer. Prepare to revolutionize your web design game by embracing the power and flexibility of CSS Logical Properties and Values.
CSS Logical Properties provide a whole new way of thinking about layout and spacing in your designs. Instead of focusing on physical directions like left, right, top, and bottom, you can now think in terms of "inline" and "block" directions. Inline directions handle left and right, while block directions manage top and bottom. This becomes especially useful when dealing with different languages and writing modes, as it allows for more consistent and adaptable styling.
Calssic Approach:
/* For left-to-right languages */
margin-left: 20px;
/* For right-to-left languages */
margin-right: 20px;
Inline properties:
/* Works for both left-to-right and right-to-left languages */
margin-inline-start: 20px;
CSS Logical Properties excel when it comes to handling various writing modes and directions. For instance, they can easily accommodate languages like Arabic that are read from right-to-left or languages like Chinese, Japanese, and Korean that can be written either horizontally or vertically. By being context-dependent, logical properties make it possible to reuse CSS styles across different languages, streamlining the design process and providing a better user experience.
<p lang="en" dir="ltr">English: Left to Right</p>
<p lang="ar" dir="rtl">العربية: من اليمين إلى اليسار</p>
p {
margin-inline-start: 20px; /* Adapts to writing direction */
}
In this example, the margin-inline-start property automatically adjusts the margin based on the writing direction, without the need for additional styles.
In today's modern web development landscape, responsiveness and adaptability are essential in creating an engaging user experience. CSS Container Queries, a recent addition to the CSS family, allows developers to create components that adapt to their container's size, enabling a more dynamic and flexible approach to responsive design. This article will introduce you to the concept of CSS Container Queries and explore two significant subheadings: "Getting Started with CSS Container Queries" and "What Problems Do CSS Container Queries Solve?"
To get started with CSS Container Queries, you need to define a containment context on an element. This is achieved by using the container-type property with a value of size, inline-size, or normal. Once you've set up the containment context, you can use the @container at-rule to define a container query. This allows you to apply styles based on the nearest ancestor with a containment context.
Miriam Suzanne, a CSS Working Group member, said in an article, "Container queries allow us to style elements based on the size of their parent – or any other ancestor. That’s a huge shift in the way we think about styling, with new possibilities for modularity and reusable components."
CSS Container Queries address some of the limitations of traditional media queries. While media queries are an essential tool for responsive web design, they are based on the viewport size and device characteristics. This can lead to issues when trying to create responsive components that need to adapt to their container size instead of the entire viewport.
With CSS Container Queries, developers can create truly reusable components that automatically adapt to their parent container's dimensions. This allows for more flexibility and ease in designing complex interfaces and layouts, as components can be built once and used anywhere in the layout without worrying about the specific placement each time.