:nth-child(odd), :nth-child(even)
See image.
So the idea is that the - becomes the color red on hover and the + the color green
which should be simple bc the - is the odd child, the + is the even child
but all of them return as odd... When I added it under only 1 image it worked just as intended, but when I added it to the other images, it no longer worked as intended... What am I doing wrong?
53 Replies
because they are on 1st and 3rd positions, and both are odd
also, the buttons don't have a value or anything
set a value and use the value to target them in css
oh, I see, for some reason I was thinking its looking at the amount of this specific child (so
.blabla button) instead of its position in according to its parent elementno, it's looking at the position of every single child
haven't really used the :nth-child that often yet, so that's why I was thinking itd look at it this way
thanks for the information!
the
of <selector> version does what you want, but it's not the tool you need
as i said, set a value on the buttons and target the buttons by the value
not their position in the htmlyeh I'll do it that way, thanks for the information
you're welcome
by the way, consider using scss
your styles are starting to get really messy
ill take a look into that then
I also think im overcomplicating the namings of my classes just a bit
an maybe I should nest some instead
it's very overcomplicated
your class name takes 25% the width of your screenshot
I agree on that one :p
was thinking of making it more simple eventually
but ill take a look into that scss
if you use a bundler already, like vite, you probably have half the work done
"eventually" will never happen
nahh, eventually will happen, trust me xd
Ive rewritten several other projects a few times bc I wasn't satisfied with how complicated it looked
it actually even got me learning new things sometimes
Anyway, css can nest as well, right?
I just looked on the website of sass and it claims css cant do that yet but i would swear its already able to do so
yes, css can nest, but it works differently in some aspects
oh? how so
&_class <-- this is invalid in css, valid in scssoh, but you can nest without using classes right?
like
& p and stuff? isnt that enough then?there are other details
yes, you can do that in css and scss
ill take a deeper look into it, thanks !
you're welcome
what i was refering to is, for example, you have
.card as the parent style
you then can do &_title to create .card_title
you can also use actual variables in selectorsah I see, yeh that would be quite useful to simplify it indeed
for example:
I take it such things wouldn't work in regular css xd
alright, time to take a llook at scss then
what's the vite thing about by the way? you said its a bundler, do you mean that it would automatically do this for me or how am I meant to understand that
yeah, those things dont exist in css
and vite is a bundler
it helps pack all the js nice and tight
and the css too
it can automatically compile typescript and scss for you
I see, ill take a look into that as well then
you should, it may help you too
I mean, no doubt it would help out :p
clean code is easier to read
I say that while my classnames are a whole screen long lmao
lol could be worse
at least it's indented
true, but that's also because I have prettier css extention, it helps out with that when im too lazy to do it myself
some people dont even do that
fair fair, im currently simplifying the names
Im not sure what I was even thinking when I did
actionCard__card__container
like, what purpose does the second card have, makes no sense, should just be actionCard__container
or this giftcards__cards__actions__container
why did I put twice cards lol, can just do giftcard__actions__containermaybe
.giftcard--containeryeh that works too, still figuring out what style works best, underline or just a -
or
.giftcard--actions
you know, simple names
plural for containers, singular for elements
not quite BEM-like, but gets closeyeh that's the idea behind it i heard somewhere xd
I mean, even if its not bem, it sure as hell is a whole lot better than what I did with my names
oh, yeah, it's leagues and bounds better
geez :((
anyway, ill get going now with fixing up the names and looking into scss & vite
once again, thanks for the help!
it's what i use the most, personally
it keeps names short
but hey, saying it's better doesn't mean you had it bad before
yeh thats true
Im not sure what my idea was with making them so long n complicated
literally wrote them wrong a fewtimes
when writing them down again
lmao
well, you need a dictionary and autocorrect?
true true, it couldve been worse
it could, but luckly it isnt
no.. I sometimes just put only 1 _
or like I forget I put cardS instead of card, why I made those plural as well Im not certain
well, it's a container, and there's many containers
so
yeh but, theyre not always containers, yet I put for everything cardS
even if its just talking about the actual card
and not the container
like
actionCards__cards is something I had, luckily I changed them nowhey, we all do things we don't get
trueeee xd right well ill get to it now!
i do write a lot of crappy code myself
esp if youre tired
good luck
:')
I once wrote a code in the middle of the night, the next day I told myself yeh never again at night
that's when i write the best code
3am code is something else
I couldn't understand nomore what on earth I wroote down
wouldve needed 5 dictionaries I think
lol i know the pain