FAQ Database Discussion Community


add 2 :before's :after's on same div to create 2 triangles

html,css,css3,pseudo-class
I have the following, where I am creating a triangle (that looks like it has a border) with css. I want to create another triangle, exactly the same, but about 50px to the right of the 1st one. How would you do these 2 :before's :after's ??? JSfiddle Here HTML...

Is there an opposite CSS pseudo-class to :hover?

css,css3,css-selectors,pseudo-class
Is there a pseudo-class in CSS to specify :not(:hover) Or is that the only way to specify an item that is not being hovered? I went through several CSS3 references, and I see no mention of a CSS pseudo-class to specify the opposite of :hover....

Using CSS Pseudo-Selectors to achieve a ribbon shape

html,css,pseudo-element,css-shapes,pseudo-class
i have the following structure where multiple elements within a carousel have a numbered badge, the white part above works fine when using white background, but in some situations an image gets behind the badge. Is it possible to make the same effect but with a transparent white space below?...

What is the expected behavior when “!important” is used with the pseudo-class “:not”

css,pseudo-class
I'm cleaning up someone else's code and it basically looks like this: a {color:red;} #contentdiv :not(h4) > a {color:green!important} So all links are green, except for those under an h4 which are red. Suppose all links under "li"s need to be red too. Better yet, suppose the links under "li"s...

Why does sometimes the pseudo class is a:active and sometimes a.active?

pseudo-class
I see that in some templates the a:active pseudoclass is written a.active (with a Dot instead of Colon... Is it a class? Why would someone make a pseudocalls a class?... Is it really a good-practice? I'm sorry if this question is too simple to you, it's just the literature I...

CSS Hamburger menu icon not displaying properly in ie9

css,css3,internet-explorer-9,pseudo-class,hamburger-menu
I have inserted a 'hamburger' menu icon into my website's header using only CSS3 code obtained from codrops website. The icon uses the pseudoclasses :before and :after and it works perfectly in the latest version of Chrome and in IE11. However, using IE9 (which our organization uses at work), the...

Proper CSS syntax for assigning style attributes to a pseudo-class for multiple classes'?

css,css-selectors,placeholder,pseudo-class
I am trying to set the color (font-color) attribute for the placholder pseudo class for a multiple classes of inputs. (So I want all inputs with class .red-va or .blue-va to have placeholder text of a given color) I can (and have) done this: .red-va::-webkit-input-placeholder { color: white; } .red-va:-moz-placeholder...

Button Toggle using :before :after with Font Awesome Icons

jquery,css,button,font-awesome,pseudo-class
I have a toggle button that uses the bars Font Awesome icon and I'm using the :after pseudo class to add a left caret to the left side of the bars. When I click the button, I want the left caret to go away and a right caret on the...

CSS Pseudo Class Selection not working

html,css,css-selectors,pseudo-class
I have the following HTML structure: <ol> <li><a id="a" href="#">Not this</a></li> <li><a id="b" href="#">Not this</a></li> <li><a id="c" href="#">This one</a></li> <li class="active"><span>Not this</span></li> </ol> I want to select #c via CSS. I have tried: ol > li:not(.active):last-child > a { border: 1px solid green; } As I understand it li:not(.active) selects...

Is a dynamic pseudo-class evaluated before the rest of the selector?

css,performance,css-selectors,pseudo-class
As far as I know CSS selectors get evaluated from right to left, so body div * would select every item, than look which has a parent of type div and of those which has a parent of type body. What I am uncertain about is how dynamic pseudo-classes get...

CSS :hover issue

html,css,css-animations,pseudo-class,keyframe
I got this problem with my pseudo classes, i have a dropdownlist with anchor taggs in it, like so: <div class="btn-group" id="dropdown-wrapper"> <a href="" data-toggle="dropdown" id="toggle-dropdown">Het 10-stappenplan <i class="fa fa-caret-down"></i></span></a> <ul class="dropdown-menu"> <li><a class="menulink" href="?p=stap1">Stap 1 - Een oriënterend gesprek</a></li> <li><a class="menulink" href="?p=stap2">Stap 2 - De AirAware Quickscan</a></li>...

SCSS Mixins: How to pass in a pseudo class via a variable?

sass,mixins,pseudo-class
I have the following mixin. It only returns code if the global $legacy variable is true. $legacy: true !default; @mixin legacy($element: "body", $legacy: $legacy) { @if $legacy == true { #{$element} { @content; } } } I want to use pass in a pseudo-class for the $element variable. E.g. .ad...

Pseudo class ::before - create css circle

html,css,pseudo-class
I'm trying to create the circle with css, but wan't to use pseudo class ::before This should be like that (for list of subway stations): .subway-item{ // css for text item going after circle } .subway-item::before{ width:15px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; background-color:#69b6d5; } I know that it can...