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?
No description
7 Replies
MarkBoots
MarkBoots9mo ago
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
.story-5 { grid-area: story-5}
.story-5 { grid-area: story-5}
Depayan M
Depayan M9mo ago
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?
MarkBoots
MarkBoots9mo ago
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.
.navigation { grid-column: 1 / -1; }
.story-5 { grid-column-end: span 2; }
.navigation { grid-column: 1 / -1; }
.story-5 { grid-column-end: span 2; }
Depayan M
Depayan M9mo ago
ok I will look into grid in details. can you please answer the specificity problem that I'm having?
MarkBoots
MarkBoots9mo ago
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
section { border: 1.5px solid black }
section > * { border: inherit }
section { border: 1.5px solid black }
section > * { border: inherit }
clevermissfox
clevermissfox9mo ago
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]
Depayan M
Depayan M9mo ago
Thanks a lot for helping, both of my problems are sorted 🙌 will try it out ✌️
Want results from more Discord servers?
Add your server