MSDN Blog

Mastering CSS Specificity

Understanding CSS specificity is crucial for writing predictable and maintainable stylesheets. Learn how browsers calculate which styles to apply when multiple rules target the same element.

Key Concepts

• Selector Types: Inline, ID, Class, Attribute, Element, Universal
• The Specificity Algorithm: Inline > ID > Class/Attribute/Element > Universal
• !important: Use with extreme caution!

Let's look at an example:

#myId .myClass { color: blue; } /* Higher specificity */
div { color: red; }           /* Lower specificity */
                

In this case, the text will be blue because the selector #myId .myClass has higher specificity than div.

Advanced CSS Layouts: Grid and Flexbox

Forget floats and hacks. CSS Grid Layout and Flexbox provide powerful, flexible, and intuitive ways to create complex and responsive layouts.

Flexbox Essentials

• display: flex;
• flex-direction, justify-content, align-items
• flex-wrap, align-content

Flexbox is ideal for one-dimensional layouts (rows or columns).

Introducing CSS Grid

• display: grid;
• grid-template-columns, grid-template-rows
• grid-gap, grid-area

Grid is perfect for two-dimensional layouts, enabling true page-level layout management.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.item {
  background-color: var(--card-bg);
  padding: 20px;
  border-radius: 5px;
}
                

Creative CSS Animations and Transitions

Bring your web pages to life with smooth animations and engaging transitions. CSS offers a performant and declarative way to add dynamic effects.

CSS Transitions

Transitions allow you to smoothly change property values over a specified duration.

.box {
  width: 100px;
  height: 100px;
  background-color: var(--primary-color);
  transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.box:hover {
  background-color: #005a9e;
  transform: scale(1.1);
}
                

CSS Animations (@keyframes)

For more complex animations involving multiple steps, use @keyframes.

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.animated-element {
  animation: pulse 2s infinite ease-in-out;
}
                

Modern CSS Selectors You Should Know

Beyond basic class and ID selectors, modern CSS offers a richer set of tools to target elements precisely and efficiently.

Structural Pseudo-classes

• :nth-child(n), :nth-last-child(n)
• :first-child, :last-child
• :only-child
• :empty

Attribute Selectors

• [attribute]
• [attribute="value"]
• [attribute~="value"]
• [attribute^="value"], [attribute$="value"], [attribute*="value"]

These are incredibly useful for styling elements based on their attributes without relying on classes.

/* Style links with an external target */
a[target="_blank"] {
  background-image: url('external-link-icon.svg');
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 15px;
}

/* Style input fields that are required */
input[required] {
  border-left: 3px solid red;
}