Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I apply a style to all pseudo selectors in CSS or Sass?

Tags:

Is it possible apply style to all of an anchor tag's pseudo selectors with CSS or Sass?

Something like

a:* {
    color: #900;  
}

instead of

a {
    &:hover, &:link, &:active, &:visited {
        color: #900; 
    } 
}

I just want to reset standard styling. In CSS, the wildcard can be used to apply styles to all elements... but how about to all pseudo-selectors?

like image 824
Vladimir Avatar asked Jul 02 '12 10:07

Vladimir


People also ask

Can you use multiple pseudo class selectors with an element?

Pseudo-classes are allowed anywhere in selectors while pseudo-elements may only be appended after the last simple selector of the selector. This means your syntax is correct according to CSS2.

Can you combine pseudo selectors?

If you're talking about pseudo-classes, then yes, you can combine them in any order.

How do I use pseudo elements in Sass?

Pseudo Class Selectors When utilizing & in Sass, a single declaration block can be written for <a> . Then from within the block, <a> can be referenced with &:hover , &:active , and &:focus . These pseudo selectors are just the beginning though, :nth-child , :target , :checked , and many more await.

Which of the following statements are correct about the CSS pseudo-classes?

They can be used for styling visited and unvisited links differently. They can be used for styling an element when it gets focus. Answer: They can be used for styling an element when you hover mouse on it.


2 Answers

Short Answer: No, not directly


However, a mixin could be used to have a similar effect.

// Sets the style only for pseudo selectors
@mixin setLinkSelectorStyle {
  &:hover, &:link, &:active, &:visited {
        @content;
    }
}

// Sets the style to pseudo selectors AND base default anchor
@mixin setLinkStyleAll {
  &, &:hover, &:link, &:active, &:visited {
        @content;
    }
}

a {
  color:red;
  @include setLinkSelectorStyle {
    color:gold;
  }
}

a.specialLink {
  @include setLinkStyleAll {
    color:purple;
  }
}

[Example using http://sassmeister.com/ compiled SASS]

a {
  color: red;
}
a:hover, a:link, a:active, a:visited {
  color: gold;
}

a.specialLink, a.specialLink:hover, a.specialLink:link, a.specialLink:active, a.specialLink:visited {
  color: purple;
}
<a>Normal anchor, No href (:link won't work, but other selectors will)</a>
<hr />
<a href="#">Normal anchor</a>
<hr />
<a class="specialLink">Specific class (no href)</a>
<hr />
<a class="specialLink" href="#">Specific class</a>

The mixins will create a rule for all the pseudo selectors when the mixin is included on the anchor / class.


Removed old answer, look at history to see it.

like image 184
Fewfre Avatar answered Oct 28 '22 02:10

Fewfre


U can do it like that:

  &:before, &:after {
      content: 'a';
  }
like image 27
Aleksandr Zamashkin Avatar answered Oct 28 '22 03:10

Aleksandr Zamashkin