CSS Selectors Demo
Universal Selector (*)
The universal selector (*) applies to all elements. In this demo, it's setting box-sizing: border-box; for all elements.
Class and ID Selectors
Class selectors (.classname) apply to any element with that class:
This paragraph has the "highlight" class. Hover over me!
ID selectors (#idname) apply to the element with that specific ID:
This paragraph has the ID "special-item" and has special styling.
Attribute Selectors
Attribute selectors target elements with specific attributes:
This paragraph has data-type="important" and is styled differently.
This paragraph has data-type="info" and has its own style.
Pseudo-classes
Pseudo-classes select elements based on their state:
Pseudo-elements
Pseudo-elements target parts of an element:
This paragraph has a styled first letter using ::first-letter and an emoji after it using ::after.
Interactive Demo
Hover over the items below to see which CSS selector applies to them:
Class selector (.color-change)
ID selector (#unique-item)
Attribute selector (data-demo="true")
Pseudo-class (:hover)
CSS Flexbox Demo
Responsive Navigation Bar
This navigation bar uses Flexbox to create a responsive layout. Toggle mobile view to see how it adjusts.
Justify Content
Responsive Card Layout
These cards use Flexbox to create a responsive layout that adapts to different screen sizes.
Number of Cards
Card Arrangement
Alignment
Card Title 1
This is a card that uses flexbox for layout. It will resize and reposition based on screen size and flex properties.
Card Title 2
This is a card that uses flexbox for layout. It will resize and reposition based on screen size and flex properties.
Card Title 3
This is a card that uses flexbox for layout. It will resize and reposition based on screen size and flex properties.
CSS Grid Demo
Basic 3x3 Grid Layout
This is a simple 3x3 grid with equal-width columns and fixed-height rows. You can adjust the number of columns and rows dynamically.
Columns
Rows
Gap Size
Responsive Image Gallery
This image gallery uses CSS Grid to create a responsive layout that adapts to different screen sizes. You can customize the minimum and maximum column widths.