Skip to content

Instantly share code, notes, and snippets.

@2ndkauboy
Last active October 11, 2016 12:18
Show Gist options
  • Save 2ndkauboy/3139cc88ee9f5a95d47d040eced9a1ba to your computer and use it in GitHub Desktop.
Save 2ndkauboy/3139cc88ee9f5a95d47d040eced9a1ba to your computer and use it in GitHub Desktop.
:not
/********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;
}
@2ndkauboy
Copy link
Author

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 in fy-[page|post|comment}-contentbefinden
Zeile 17 selektiert alle Link mit der Klasse download-button UND sich in fy-[page|post|comment}-contentbefinden

Es gewinnt bei CSS immer die genaueste Selektion wobei:
.download-button ist genauer als a
a.download-button ist genauer als .download-button
.fy-page-content a.download-button ist genauer als a.download-button
a.download-button ist genauer als a: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 ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment