Home › Discussions › Campaign Portal Building › CSS not Selector - Campaign Portal Building Discussions on Obsidian Portal Community Forums
CSS not Selector
I just wanted to share this up here for folks to make use of it on their Campaigns if they were not aware of it. CSS features a special "not" selector that allows you to single out specific selectors to not apply an effect to. Let me show you an example of how I use this on my own Campaign to correct an issue with a link effect that I use:
/* LOOK PUSHED ON CLICK */
a:not(.corner-add-button):active {
position:relative;
top:1px;
}
What does this bit of CSS actually do? Well, it applies an effect to all anchors (links) that when they are clicked on they will push down 1px from the top to make it look like they have been depressed. Doing this, however, without adding the "not" selector causes the add buttons that are a "+" will actually bounce off to the side and not load the link properly if the user happens to click off to the edge of the actual symbol itself (which is easy and common to do). So, by adding in the :not(.corner-add-button) I have stated that any instance of an anchor with that class applied to it (which all of those buttons do) will not do what I am putting in for the effect. The end result is links on my site appearing like they depress when clicked, but on those buttons they just sit stationary and no longer cause the glaring issues for end users.
Of course this could be extrapolated in a number of creative ways while working on your Campaign pages, but it is usually a feature that people do not stumble into with CSS. So, have some fun with that and see what kind of enhanced results you can cobble together on your pages.
--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
/* LOOK PUSHED ON CLICK */
a:not(.corner-add-button):active {
position:relative;
top:1px;
}
What does this bit of CSS actually do? Well, it applies an effect to all anchors (links) that when they are clicked on they will push down 1px from the top to make it look like they have been depressed. Doing this, however, without adding the "not" selector causes the add buttons that are a "+" will actually bounce off to the side and not load the link properly if the user happens to click off to the edge of the actual symbol itself (which is easy and common to do). So, by adding in the :not(.corner-add-button) I have stated that any instance of an anchor with that class applied to it (which all of those buttons do) will not do what I am putting in for the effect. The end result is links on my site appearing like they depress when clicked, but on those buttons they just sit stationary and no longer cause the glaring issues for end users.
Of course this could be extrapolated in a number of creative ways while working on your Campaign pages, but it is usually a feature that people do not stumble into with CSS. So, have some fun with that and see what kind of enhanced results you can cobble together on your pages.
--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
-bort
"Morwindl":http://morwindl.obsidianportal.com
Campaign of the Year - 2018