Syntax for pure css

HTML & CSS
#1

is this the right syntax for css:
&: active
&: focus

#2

Lose the ampersand as that’s part of the preprocessor language you are using.

:active,:focus {}

Or a:hover, a:active, a:focus{} ETC…

2 Likes
#3

Do you put the styles in the brackets?

#4

If you’re a complete beginner in CSS, I would suggest you start working your way through the tutorials from the beginning. It will make a lot more sense to you than jumping in and out at different points.

4 Likes
#5

Something to have in the back of your head: :slight_smile:

The anchor states carries an important info for the user and there is a rule of thumb you can remember to use the different states in the correct order, so the more current state overrides the former:
LoVe Foils HAte = :Link :Visited :Focus: Hover :Active

For all default styling it is proper to use the a element itself.

2 Likes
#6

This is the code in the codepen for the Pure CSS crossword

&:active,

 &:focus {
  background: $color-focus-item;
  border: 1px solid #000000;
  outline: 1px solid #000000;
 }
}

I have made a puzzle like this one and I cant get the active focus square to click yellow when user clicks on it as in example on this page. Everything else works, the green when it is right, the cursor moves., active square just dosen’t turn yellow. etc. I tried the way you sent earlier and it didn’t work.

#7

That is not CSS.

1 Like
#8

How would you write that in CSS?
Thanks

#9

That’s only a snippet. You can’t take a snippet of SCSS out of context and compile it to CSS.

If you’ve downloaded the code from the CodePen as has been suggested before, you should have all the CSS in one file.

4 Likes
#10

Most likely it’s on an anchor, so just to give you an example of this in compiled CSS, let’s assume the following.

  1. $color-focus-item has to equal something, so let’s say #FFFFFF (white)
  2. This is an anchor, but it could be anything (your snippet is incomplete)
a:active,
a:focus {
  background: #FFFFFF;
  border: 1px solid #000000;
  outline: 1px solid #000000;
}
4 Likes
#11

On CodePen, you can click the down arrow in the top right corner of the CSS code box to “View Compiled CSS”, which means you can see the real CSS that the browser sees. Then you will understand how the real CSS is working without the annoying “preprocessor” overlay.

1 Like
#12

Thanks!