Need help regarding CSS Grid and specificity
https://codepen.io/Depayan-M-the-flexboxer/pen/dyrQgBz
I'm using grid and In this layout I want ".story-5" to take 2fr width. Also despite using two classes I couldn't make right border of ".story-3" 0px; doesn't using 2 classes make it's specificity higher?
7 Replies
if you use grid area names in the grid template. you need to also specify the grid-erea name in the item
so for example
ok, this worked, but does that mean i have to specify grid areas for story 1,2,3,4 as well? I haven't specified any area for them but only mentioned in grid template. But those still works fine. what am I missing here?
You dont need to specify it if the items are already in the correct order. They will just fill up naturally. The only difference for number 5 is thst it will span over 2 columns.
You actually dont need to use grid-template-areas at all. You can just define the grid-column in the childs.
ok I will look into grid in details.
can you please answer the specificity problem that I'm having?
ah yes, you have a space in the selector. you need to combine the 2
.story.story-3
The space is a decendant-selector. It looks for a class within the element not the element itself
but if i may suggest, this might be easier
Another specificity hack is taking your element with one class name "container" and if having specificity issues using the selector
.container.container"
There is also @layers where you can define groups and decide who gets highest specificity.
Also the :where() pseudoclass has zero specificity so you could use it on all your selectors , then if you need to override one, put that into an :is() or just its normal class selector .container{...}`. Whatever you do don't use am ID selector like this #container. Put it into a :where() or use it as an attribute [id=container]Thanks a lot for helping, both of my problems are sorted 🙌
will try it out ✌️