How to target the div with the classname "from-sections"
I am trying to reduce the margin-bottom on that element.
The code pen doesn't work, but it holds the code. As you will see. I have already tried .form-sections:last-child, and I also tried :last-of-type. No luck!
https://codepen.io/bonesdupes/pen/bGZKOwj
5 Replies
not completely sure what you really need, but in your example pen, this will work
it targets the element with the attribute
[className=form-sections] that does not :not() have :has() a next sibling ~ with the attribute [className=form-sections]. So effectively it is the last oneOkay thanks. I just ended up adding an id to the element and using that in the css.
Would recommend you select your id like this [id=“my-id”] instead of #my-id so you don’t have to worry about specificity wars
Selecting it as an attribute keeps it at the same specificity score as a .class or another attribute selector. Using #my-id {…} will def come back to bite you eventually
Wait. Doesn't id have more specificity than class. So that is what causes the conflict between the two. I get it. Do you know why it didn't work?
Yes, using an id selector like this
#myID has more specificity than a class. That’s why I recommend using classes for styling or at least selecting the id through an attribute selector [id=myID] so it’s specificity ‘score’ is on par with a class selector.
Why it didn’t work ? Could be a specificity conflict or writing a selector incorrectly or html syntax is incorrect? :nth-child is tricky ! It can be helpful to give the selector a bg color or outline to see exactly what you’re getting. Sometimes you’re getting the last-child of every element inside if you don’t use the direct-child > selector. Eg >:last-child