Why does putting a space in this code affect the output in CSS?

Question

I have the following code in CSS:

a{
    margin: 10px;
    padding: 10px;
    background-color: black;
    color: white;
    font-family: Cambria;
    text-decoration: none;
}

a:hover {
    background-color: grey;
}

You see, the code here works fine. The desired result of my link being turned grey upon hovering is achieved. The question here is wondering as to why the code stops to change the background-color property to grey when I add a space between a and/or :hover.

Here is my HTML code just for reference

<!DOCTYPE html>
<html>
    <head>
        <title>Crescive</title>
        <link rel="stylesheet" href="./style.css" />
        <meta charset="utf-8>
    </head>

    <body>
       <main> <!-- I want people to click this -->
           <header>
               <h1>Crescive</h1>
               <p>A customs forms service!</p>
               <a href="./create.html">Try it out!</a>
           </header>
       </main>
    </body>
</html>

PS On a side note, if anyone could tell me if I am making good use of the sectioning tags, that would be greatly appreciated!

Anybody else think this question is out of place, it's basically a syntax thing. — Rainbow, Jun 10 '18 at 20:48
Because a space is the [descendant combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors). — Sebastian Simon, Jun 10 '18 at 20:53

score 1 · Accepted Answer · answered Jun 10 '18 at 20:38

1

Because if you put a space between a and :hover, it no longer matches the link, but it is looking for a hovered element inside it.

Example: https://jsfiddle.net/ze2g56v4/

The selector with the added space is equal to this:

a *:hover {
    ...
}

answered Jun 10 '18 at 20:38

Iter Ator

8,226
20
73
164

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

The :hover selector is used to select elements when you mouse over them. Reference https://www.w3schools.com/cssref/sel_hover.asp

Putting a space between the 'a' and the ':hover' means that all hovered descendants (not only child elements) of the 'a' element(not itself) will take on the style defined.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 10 '18 at 20:53

Aleu

73
6

score -2 · Answer 3 · answered Jun 10 '18 at 20:38

-2

:hover is called a Pseudo class.

Pseudo classes represent the state of an element, there are additional ones like :active, :focus, :after, :before amongst others.

They need to be beside your CSS selector without a space in order to work because once again it is referencing the STATE of the element

example

a:hover says on the :hover state of the anchor

answered Jun 10 '18 at 20:38

Jason McFarlane

2,048
3
18
30

2

"They need to be beside your CSS selector without a space in order to work" — Not true. – Quentin Jun 10 '18 at 20:57

Why does putting a space in this code affect the output in CSS?

3 Answers3