Wildcard overwrites all other settings

Question

Wildcard overwrites all other settings

188 Views Asked by Christian At 19 October 2024 at 16:31

I'm new to CSS. The tutorials taught me, that settings defined in the upper part of the css file are overwritten by the settings defined below. Now I try to create a custom cursor for my whole page, which is animated while clicking on a link. My code looks like this:

* {
    cursor:    url("../dartpfeil.cur"), auto;
}

...

.menu a:active {
    cursor:    url("../dartpfeil_steckt.cur"), auto;
}

But this doesn't work. The cursor defined in the * section works, but if I click on the menu link, the cursor doesn't change. If I delete the * section and add the following code:

.menu a:hover {
    cursor:    url("../dartpfeil.cur"), auto;
}

it works, but the "dartpfeil.cur" cursor is only shown by hovering the links. I also tried

*:hover {
    cursor:    url("../dartpfeil.cur"), auto;
}

but then the cursor is also only shown by hovering a link. I want to use the "dartpfeil.cur" on the whole page as if it is defined in *, but i want also the "dartpfeil_steckt.cur" while link is active. Is there any possible solution for this problem?

Thanks and a happy new year to all!

EDIT: Error in code fixed
EDIT2: As asked, the html code below:

<html>
    <head>
        <title>Dartverein XY</title>        

        <link rel="stylesheet" href="style.css" />
    </head> 
    <body>
        <a href="index.php" id="headerLink">
            <section id="header">
                <div id="title">Steeldartverein<br>M&uuml;hldorf e.V.</div>     
            </section>
        </a>

        <div class="horizontalBorder"></div>

        <section class="menu">
            <p class="verticalBorder"></p>
            <a href=""><div class="menuElementRed">News</div></a>
            <p class="verticalBorder"></p>
            <a href=""><div class="menuElementGreen">&Uuml;ber uns</div></a>
            <p class="verticalBorder"></p>
            <a href=""><div class="menuElementRed">Weiteres</div></a>
            <p class="verticalBorder"></p>
            <a href=""><div class="menuElementGreen">Login</div></a>
            <p class="verticalBorder"></p>
            <p class="lastVerticalBorder"></p>
        </section>

        <div class="horizontalBorder"></div>


    </body>
</html>

Original Q&A

There are 2 best solutions below

**KAS** · Answer 1

KAS On 01 January 2017 at 21:02

Does "dartpfeil_steckt.cur" work for *? Your code looks fine, and it should override the wildcard because it's more specific. My best guess is that you have misplaced the file, or misspelled the filename.

**Asons** · Answer 2

Why it does not work is because it is your div that is the active element and for a div to respond to the :active class it need tabindex.

I added tabindex (and an extra CSS rule) to/for the News link div so you see how that work, and I also removed the div on the Über uns link and now that one work too

* {
    cursor:    url("../dartpfeil.cur"), auto;
  color: lime;
}
.menu a:active {
    cursor:    url("../dartpfeil_steckt.cur"), auto;
  color: red;
}
.menu a div:active {
  cursor:    url("../dartpfeil_steckt.cur"), auto;
  color: red;
}

<html>
    <head>
        <title>Dartverein XY</title>        

        <link rel="stylesheet" href="style.css" />
    </head> 
    <body>
        <a href="index.php" id="headerLink">
            <section id="header">
                <div id="title">Steeldartverein<br>M&uuml;hldorf e.V.</div>     
            </section>
        </a>

        <div class="horizontalBorder"></div>

        <section class="menu">
            <p class="verticalBorder"></p>
            <a href=""><div tabindex="0" class="menuElementRed">News</div></a>
            <p class="verticalBorder"></p>
            <a href="">&Uuml;ber uns</a>
            <p class="verticalBorder"></p>
            <a href=""><div class="menuElementRed">Weiteres</div></a>
            <p class="verticalBorder"></p>
            <a href=""><div class="menuElementGreen">Login</div></a>
            <p class="verticalBorder"></p>
            <p class="lastVerticalBorder"></p>
        </section>

        <div class="horizontalBorder"></div>


    </body>
</html>

Wildcard overwrites all other settings

There are 2 best solutions below

Related Questions in CSS

Related Questions in WILDCARD

Related Questions in OVERWRITE

Trending Questions

Popular # Hahtags

Popular Questions