Kevin Powell - Community•4mo ago

:last-child:first-letter:hover

The two photos I have attached are my issue I am trying to target the first letter of the last child when hovering to change the first letter to a different colour so you can see it.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  background-color: rgb(1, 25, 44);
  color: white;
  font-family: "Outfit", sans-serif;
}

:root {
  --header-font-size: 2rem;
  --second-color: rgb(6, 158, 125);
}

nav {
  display: flex;
  justify-content: flex-end;
  gap: 1em;
  text-wrap: nowrap;
  padding: 1rem;
}

a {
  color: white;
  text-decoration: none;
  text-align: center;
  padding: 0.2rem;
}

nav > a:first-child {
  position: absolute;
  left: 16px;
  font-size: 1.2rem;
  border: 3px solid white;
  border-radius: 50%;
  padding: 0.7rem;
  top: 10px;
}

nav > a:last-child {
  border: solid var(--second-color);
  padding: 0.2rem 0.4rem;
  border-radius: 10px;
  top: 10px;
}

nav > a:last-child:hover {
  background-color: var(--second-color);
  color: black;
}

nav > a:first-letter {
  color: var(--second-color);
}

a:hover {
  color: var(--second-color);
  text-decoration: underline;
  text-decoration-color: white;
  text-underline-offset: 1rem;
  text-decoration-thickness: 3px;
}

h1 {
  display: flex;
  justify-content: center;
  font-size: 5rem;
  padding: 5rem;
  text-wrap: balance;
  text-align: center;
}

.project-title {
  font-size: 3rem;
  background-color: rgb(2, 53, 95);
  padding: 5rem 1rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  background-color: rgb(1, 25, 44);
  color: white;
  font-family: "Outfit", sans-serif;
}

:root {
  --header-font-size: 2rem;
  --second-color: rgb(6, 158, 125);
}

nav {
  display: flex;
  justify-content: flex-end;
  gap: 1em;
  text-wrap: nowrap;
  padding: 1rem;
}

a {
  color: white;
  text-decoration: none;
  text-align: center;
  padding: 0.2rem;
}

nav > a:first-child {
  position: absolute;
  left: 16px;
  font-size: 1.2rem;
  border: 3px solid white;
  border-radius: 50%;
  padding: 0.7rem;
  top: 10px;
}

nav > a:last-child {
  border: solid var(--second-color);
  padding: 0.2rem 0.4rem;
  border-radius: 10px;
  top: 10px;
}

nav > a:last-child:hover {
  background-color: var(--second-color);
  color: black;
}

nav > a:first-letter {
  color: var(--second-color);
}

a:hover {
  color: var(--second-color);
  text-decoration: underline;
  text-decoration-color: white;
  text-underline-offset: 1rem;
  text-decoration-thickness: 3px;
}

h1 {
  display: flex;
  justify-content: center;
  font-size: 5rem;
  padding: 5rem;
  text-wrap: balance;
  text-align: center;
}

.project-title {
  font-size: 3rem;
  background-color: rgb(2, 53, 95);
  padding: 5rem 1rem;
}

So this is what i have tried:

nav>a:last-child:first-letter:hover {
color: white;
}

nav>a:last-child:first-letter:hover {
color: white;
}

It won't work because this code overrides it, I could change it here but I don't want to change the colour of all the other first letters in the navbar.

nav > a:first-letter {
  color: var(--second-color);
}

nav > a:first-letter {
  color: var(--second-color);
}

Please help me surely there is a way?

16 Replies

Stroudy•4mo ago

@cubiq If you would please my man 😄

Jochem•4mo ago

@Stroudy please don't @ people to draw them into your post if people want to help, they'll help in their own time

cubiq•4mo ago

im fine with that

Jochem•4mo ago

if you want a better chance at getting people to help, share your code in a codepen

ἔρως•4mo ago

how about you apply the styles when :not() hover? whatever the styles are, in that big hunk of text

cubiq•4mo ago

it would really help to create that codepen but my approach would be creating local variables and then on hover changing the variable colors:

[] {
  --_btn-accent: pastelgreen;
  --_btn-primary: var(--primary-color);
  --_btn-bg: rgb(1, 25, 44);
  
  background: var(--_btn-bg);
  ...
}

[]:first-letter {
  color: var(--_btn-accent);
}

[]:hover {
  --_btn-accent: var(--primary-color);
  --_btn-primary: var(--second-color);
}

[] {
  --_btn-accent: pastelgreen;
  --_btn-primary: var(--primary-color);
  --_btn-bg: rgb(1, 25, 44);
  
  background: var(--_btn-bg);
  ...
}

[]:first-letter {
  color: var(--_btn-accent);
}

[]:hover {
  --_btn-accent: var(--primary-color);
  --_btn-primary: var(--second-color);
}

you get the point.. this way you have just one place where you apply the actual color on that selector..

Stroudy•4mo ago

I do apologise if this is against the rules i only tagged cubiq because we have spoke before Ill create a codepen soon and send it 😄

Stroudy•4mo ago

https://codepen.io/Steven-Stroud/pen/GRLELrw

Steven Stroud

CodePen

GRLELrw

...

Mannix•4mo ago

this should work

nav > a:last-child:hover:first-letter {
    color: white;
}

nav > a:last-child:hover:first-letter {
    color: white;
}

Stroudy•4mo ago

This works thank you so much my dude seems like the order I did was incorrect, do you know why it has to be in that order so i can understand why it works? Your great 😄 ❤️

Mannix•4mo ago

honestly i don't know it just seem logical when i wrote it 😛

Stroudy•4mo ago

I thought :hover would be at the end

ἔρως•4mo ago

easy it's pseudo-class > pseudo-class > pseudo-element what you had was pseudo-class > pseudo-element > pseudo-class :first-child can have :hover, but :first-letter cant

Darryll•4mo ago

:first-letter:hover would imply when you hover on the first letter a:hover:first-letter would imply when you hover on the a, target the first letter

ἔρως•4mo ago

basically what i said, but less convoluted

Darryll•4mo ago

:smughamster:

Gaming

Programming

:last-child:first-letter:hover