12 Modern CSS Features You Should Be Using in 2026

CSS has evolved dramatically. These modern features replace entire JavaScript libraries. 1. CSS Container Queries Responsive components based on their parent size, not the viewport. .card-container { container-type : inline-size ; container-name : card ; } @container card ( min-width : 400px ) { .card { display : grid ; grid-template-columns : 2 fr 1 fr ; } } Finally! Components that adapt to their context, not the screen size. 2. :has() — The Parent Selector Style a parent based on its children. This replaces tons of JavaScript. /* Style form when it contains an invalid input */ form :has ( input :invalid ) { border : 2px solid red ; } /* Style li that contains an img */ li :has ( img ) { display : grid ; grid-template-columns : auto 1 fr ; } /* Style label when its checkbox is checked */ label :has ( input :checked ) { background : #e0f2fe ; font-weight : bold ; } 3. CSS Nesting (Native) No more Sass needed for basic nesting. .card { background : white ; padding : 16px ; .title { fon