An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
Stop Using IDs and Classes in Every HTML Element!
Ola! So, this is something I've just come to a realisation recently and if you're a newbie in the world of web development then it's easy for you to forget all the variations of CSS attribute selectors and just opt for creating a specific class or ID to style a particular element in your page.
Case in point? Suppose you have a flex container containing 10 flex items that looks like this:
<div class="flex-container-column"><div class="item">flex item 1</div><div class="item">flex item 2</div><div class="item">flex item 3</div><div class="item">flex item 4</div><div class="item">flex item 5</div><div class="item">flex item 6</div><div class="item">flex item 7</div><div class="item">flex item 8</div><div class="item">flex item 9</div><div class="item">flex item 10</div></div>
You want the first flex item to have a different background-color
. You're probably thinking of creating an ID for this since this style is only unique for this item, right?
Well, what if we have the same flex container with 10 flex items in every page on our website? and we want the first item to have the same style? well just add another class to it, duh!.
Technically, that can be done but this is not the best practice! We should make use of the CSS attribute selectors, more specifically the :pseudo-classes
.
CSS :pseudo-classes
helps you single out an HTML element by its particular state, such as:
:hover
When you hover a cursor over a button:active
When a link or a button is being clicked:checked
When radio buttons are checked:first-child
and:last-child
Apply the style to the first and last element that appears immediately and lastly under its parent element, respectively:nth-child
Applies the style to a children element with a particular position in a group of sibling elements, e.g., the third 'p' in everydiv
.
With the dummy HTML code above, we can make up a few scenarios with a background-color
use case:
Let's start from top to bottom there. There are two displays: a column and a row.
Column
I want the boxes in odd positions (boxes number 1, 3, 5, 7, and 9) to be in an orange-ish color so I target them using the following :pseudo-class, specifying in the bracket that I want to target ODD numbers.
.item:nth-child(odd) { background-color: #FEC8A7;}
Same thing with the boxes with even number positions, I just replaced the word odd inside the bracket with (even)
.
.item:nth-child(even) { background-color: #FCECA5;}
Row
On my Row display, I wanted to target only the first and last boxes. So this is where the :first-child
and last-child
come into play:
/* targets the first flex item */.item2:first-child { background-color: #A16AE8; }/* targets the last flex item */.item2:last-child { background-color: #4120A9;}
Fun fact, alternatively you can replace the :first-child
with :first-of-type
or :nth-child(1)
, along with :last-child
being replaceable with :last-of-type
in this use case and they'd still deliver the same result! The difference is that, :first-of-type
will seek ONLY the first occurrence of the said element in the container/parent element, even if it's not the first child of the container/parent element. So, if I slightly change the code for the Row display above by adding an h1
like this:
<div class="flex-container-row"><h1>header</h1><div class="item2">flex item 1</div><div class="item2">flex item 2</div><div class="item2">flex item 3</div><div class="item2">flex item 4</div><div class="item2">flex item 5</div><div class="item2">flex item 6</div><div class="item2">flex item 7</div><div class="item2">flex item 8</div><div class="item2">flex item 9</div><div class="item2">flex item 10</div><div class="item2">flex item 10</div><div class="item2">flex item 10</div></div>
Using :first-child
or :nth-child(1)
will not work! Because the first child of the container is the h1
. But it will still work with :first-of-type
, because it will look for the first occurrence .item2
class in the container. In other words, :first-child
and :nth-child
are more specific in this case and are recommended to be used in practice if you want to target a really specific element position.
Original Link: https://dev.to/puputtallulah/stop-using-ids-and-classes-in-every-html-element-3k2c
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To