Last active
October 11, 2016 12:18
-
-
Save 2ndkauboy/3139cc88ee9f5a95d47d040eced9a1ba to your computer and use it in GitHub Desktop.
:not
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/********Link-Klasse****/ | |
a.download-button { | |
color: #fff !important; | |
background: #c8504b; | |
padding: 10px 20px; | |
border-radius: 2px; | |
margin: 5px; | |
} | |
/****** angewendeter Code auf alle Links, die nicht .fy-button als Klasse haben ***/ | |
.fy-page-content a:not(.fy-button):hover, .fy-post-content a:not(.fy-button):hover, .fy-comment-content a:not(.fy-button):hover { | |
color: #c8504b; | |
border-color: #c8504b; | |
} | |
/****** Code für alle Download-Button ***/ | |
.fy-page-content a.download-button:hover, .fy-post-content a.download-button:hover, .fy-comment-content a.download-button:hover { | |
background: black; | |
} | |
/****** Falls der Code oben noch nicht funktioniert ***/ | |
.fy-page-content a.download-button:not(.fy-button):hover, .fy-post-content a.download-button:not(.fy-button):hover, .fy-comment-content a.download-button:not(.fy-button):hover { | |
background: black; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Zeile 2 selektiert alle Links mit der Klasse
download-button
Zeile 11 selektiert alle Links, die nicht die Klasse
fyi-button
haben UND den Hover-State haben UND sich infy-[page|post|comment}-content
befindenZeile 17 selektiert alle Link mit der Klasse
download-button
UND sich infy-[page|post|comment}-content
befindenEs gewinnt bei CSS immer die genaueste Selektion wobei:
.download-button
ist genauer alsa
a.download-button
ist genauer als.download-button
.fy-page-content a.download-button
ist genauer alsa.download-button
a.download-button
ist genauer alsa:not(.fy-button)
somit ist auch
.fy-page-content a.download-button:hover
genauer als.fy-page-content a:not(.fy-button):hover
und gewinnt daher ;)