How do I select an element that has a certain class?

Understanding CSS Selectors

Styling an Element with a Class

To style a specific element (say, h2) with a class, use tagName.className format.

h2.myClass { /* Because h2 deserves to feel special */ }


Styling Nested Elements

For nested elements, use parent.child format. Here's how to color an h2 nested in .myClass:

.myClass h2 { color: blue; /* Blue is the warmest color */ }


Mastering Selector Specificity

In CSS, specificity matters. More the classes, greater the weight.

.myClass.anotherClass { /* This one sings the loudest in the choir */ }


Styling Strategies and Debugging

Cascading Styles: Ordering Rules

Remember, order matters in CSS styling. A rule at the bottom will override one at the top.

.myClass { color: red; /* Red alert! */ }
.myClass { color: green; /* Green light! Takes precedence over red */ }


Debugging Styles

If your styles don't apply, review your HTML structure.

<div class="myClass">
  <h2>Smart Heading</h2> <!-- Our h2 in a div. We got this! -->
</div>


Is as good as a handshake with this CSS selector:

.myClass h2 { /* styles */ }


Color Coding Your Debugging

Why not color-code your debugging process? Use dev tools to track your styles.

Advanced Selector Techniques

Experimenting with Pseudo-Classes

Get exotic with pseudo-classes like :first-child or :nth-child for ever more focused styling:

.myClass:first-child { /* The eldest child gets a new toy */ }
.myClass:nth-child(2) { /* And the second one too, because I'm nice */ }


Deciphering Direct vs. Descendant Selectors

Know the difference between dealing with direct children (>) vs. any descendant (space):

.parentClass > .childClass { /* Direct parenting at its best */ }
.parentClass .descendantClass { /* Takes care of the entire lineage */ }
