This is a vanity question, you've been warned!
I've never been a fan of partial definitions such as
.FlexAround1 {
display:flex;
justify-content:space-around;
align-items:center;
}
.FlexAround1::before {
content:"";
}
.FlexAround1::after {
content:"";
}
Today, I was like "but what if!?!?" and tried this:
.FlexAround1 {
display:flex;
justify-content:space-around;
align-items:center;
} ::before {
content:"";
} ::after {
content:"";
}
and whaddayaknow, it actually works. Thing is though, I've never seen it written like that in any of the tutorials or reference sites. Is that proper CSS syntax or some kind of unofficial but somehow supported feature?
From MDN
A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected.
A pseudo class is a keyword added to selectors. MDN goes on to give the syntax, defining it as
selector:pseudo-class {
property: value;
}
So it appears that leaving out the selector isn't valid CSS (and kind of defeats the idea of a pseudo class in the first place anyways). Leaving out the selector appears to still work, however, the selector just defaults to *, applying your pseudo class to all elements.
Related
Can I add a class selector after a pseudo class in my CSS rule, e.g:
a:hover.my-class {
background: red;
}
So if I hover over my anchor tag, <a class="my-class">link</a>, will the background be red in all browsers? is this valid CSS?
Why I need this
I have this problem because it is generated from a mixin in SASS:
#mixin focus($classA, $classB) {
&:focus {
&#{$classA} {
background: blue;
}
&#{$classB} {
background: yellow;
}
}
}
a {
#include focus('.class-a', '.class-b')
}
There is no such thing as a "pseudo-selector".
There are two features in selectors that start with "pseudo-": pseudo-class and pseudo-element. They are completely different features with different syntax rules.
You can place a class selector after a pseudo-class such as :hover, because they are both simple selectors and order of simple selectors in a compound selector does not matter (type and universal selectors are the only exceptions to this rule — they always have to come first, such as the a in your example).
You cannot place a class selector after a pseudo-element such as ::before, because a pseudo-element is not a simple selector. Your question may not be about pseudo-elements, but this distinction has to be made because of the common use of the term "pseudo-selector", which incorrectly groups both features into a single umbrella term (and frankly makes the question more complicated than it really needs to be).
Yep, you can add a class to a pseudo class.
This css is valid and it works:
a:hover.hoverme {
background:blue;
color:white;
}
This works too:
a.hoverme:hover {
background:blue;
color:white;
}
Or you can add a pseudo class after a class.
.hoverme:hover {
background:blue;
color:white;
}
Hover me!
You can check if your CSS is valid at W3C's CSS Validator page.
I was just playing around with CSS and noticed an interesting scenario for which I couldn't really find an explanation. Maybe some of you have the answer for this.
I have a div element with an inline styling
<div id="text-sample" style="overflow:hidden;">This is a sample text to test the CSS behavior of inline styling</div>
My CSS
#text-sample {
width:200px;
white-space: nowrap;
}
#text-sample:hover {
overflow:visible
}
Here the hover effect is not applying. That is, the overflow: visible rule is not taking.
Note: Moving the overflow:hidden from inline style will fix the issue.
I'm looking for the reason why hover effect is not applying. Can anyone explain this scenario?
All else being equal, inline styles take precedence over styles applied via stylesheet rules. In your case, when hovering, the overflow: visible is invoked via the stylesheet rule, but that cannot override the inline style. If necessary, you could try !important.
#text-sample {
width: 200px;
white-space: nowrap;
}
#text-sample:hover {
overflow: visible !important;
}
<div id="text-sample" style="overflow:hidden;">
This is a sample text to test the CSS behavior of inline styling
</div>
But it would be easier simply to specify overflow: hidden in the #text-sample stylesheet rule, instead of giving it inline.
Your inline style will always override your external CSS.
You can use !important in :hover
#text-sample {
width:200px;
white-space: nowrap;
}
#text-sample:hover {
overflow:visible!important;
}
Inline styles take precedence over style sheets. There are two ways to change that: using JavaScript or using !important in the style sheet.
#text-sample:hover {
overflow:visible !important;
}
In CSS, there's something called Specificity. Simply said, something like
#id { color: red; }
would take precedence over something like
.blue { color: red; }
when having something like <div id="id" class="blue">. See example below.
This is because an ID selector (#) is interpreted as more important than a class. In the same manner, an equally specific selector with a later declaration (later in the file) takes precedence and the more specific your selector gets, the more important it is.
For your example: An inline-style takes precedence over anything written in a CSS file (unless using !important). I believe the :hover does not change anything on that fact.
For the detailed rules look my link above.
div {
width:200px;
white-space: nowrap;
}
#text-sample:hover,
#sample-2:hover {
overflow:visible;
}
#sample-2 {
overflow: hidden;
}
#foo {
color: red;
}
.blue {
color: blue;
}
<div id="text-sample" style="overflow:hidden;">This is a sample text to test the CSS behavior of inline styling</div>
<div id="sample-2">This is a sample text to test the CSS behavior of inline styling</div>
<div id="foo" class="blue">foo</div>
EDIT
As mentioned in comments, Specificity does not apply to inline styles. Nevertheless, inline styles are taking precedence over anything in a CSS declarations in files. However, as soon as you move the rule into the same CSS file (as you mentioned will work), the :hover is more important than the other rule since it is more specific in the moment you're hovering.
I am writing a stylesheet to extend a base stylesheet whose CSS has many pseudo classes applied to certain elements. I would like my stylesheet to override some of these styles with a single style that is applied to an element no matter what state it is in, whether hovered on, focussed etc.
For example, the base stylesheet might have the styles
.classname {
color:#f00;
}
.classname:hover {
color:#0f0;
}
.classname:active {
color:#00f;
}
but adding the following after these styles does not override the pseudo states...
.classname {
color:#fff;
}
The following works, but it feels a lot of code for something that seems simple.
.classname,
.classname:active,
.classname:hover,
.classname:focus,
.classname:visited,
.classname:valid{
color:#fff;
}
Likewise, I know an !important would work, but that's normally a warning sign of a poorly structured stylesheet.
Is there anything along the lines of a .classname:* that would cover every possible state, or some way to simply remove all pseudo classes?
If you are able to put the classes inside some wrapper id you can prevent the pseudo-classes to take effect due to specificity:
body {
background: black;
}
.classname {
color:#f00;
}
.classname:hover {
color:#0f0;
}
.classname:active {
color:#00f;
}
#a .classname {
color:#fff;
}
<div class="classname">all pseudo works</div>
<div id="a">
<div class="classname">none of the pseudo works</div>
</div>
I think, it could be solved with :any pseudo-class.
Google
<style>
a:link { color: blue; }
a:hover { color: red; }
a:-webkit-any(a) { color: green; }
</style>
https://jsfiddle.net/ycfokuju
Browser support is not perfect: https://developer.mozilla.org/en/docs/Web/CSS/:any
Edit:
Actually, as I discovered, this answer isn't very accurate. (Despite it was upvoted 4 times, lol).
First of all, you don't need :any fot this task. You need :any-link.
The second point is that :any itself is a former name of :matches. So, in our terminology we should use terms :any-link and :matches and don't use term :any.
Example of using :any-link: https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link
Examples of using :mathes: https://css-tricks.com/almanac/selectors/m/matches/
I haven't edited the code itself, so fix it yourself according to this new information.
I’m trying to learn a bit more about the CSS3 transitions and “cool stuff”. So I have some nifty animations on my site, and I did some google research that helped me out quite a bit.
I wanted to select an element outside of my hover element. I found out that using the + sign you can target an element that comes after the hover element. A small example (in LESS):
header{
display: inline-block;
div#bg_2{
color:#000;
}
div#container{
float:left;
&:hover{
& + nav {
ul{
opacity: 0;
}
li{
.transition(1200ms, ease-in-out);
margin-left:-100px;
}
}
}
}
nav{
height:30px;
}
}
So this example allows me to give a transition to the element after the hover element. But my question is, is it possible to do the reverse? To target the element before the hover element? In the example, the bg_2 element.
The ! subject selector in the CSS Selectors 4 draft specification would be a way to select a previous element. It proposes that instead of writing .one + .two { … } to style .two, you could write !.one + .two { … } to style .one.
However, ! is currently not implemented in any browser. And the CSS Selectors 4 specification can still change, because it is a draft. Also, the spec currently marks the ! subject selector as being in the “complete” profile, which is meant to be used by JavaScript, but not in the “fast” profile, which CSS must use.
Since you can’t use !, there is currently no way to select what you want with pure CSS.
See also this answer about there being no parent selector, which links to the CSS specifications where you can find all defined selectors.
CSS alone can't currently achieve what you're after. We have sibling selectors (+ and ~), but the element being targeted must come after the first element.*
As a simple example, check out this fiddle. Given this markup:
<p class="one">One</p>
<p class="two">Two</p>
and this CSS:
.one ~ .two { background: red; }
.two ~ .one { background: green; }
You might expect .one to end up green and .two red. In reality, only .two receives a background colour, because the second line is trying to style an element that comes earlier in the DOM.
* + is the adjacent sibling combinator, ~ the general sibling combinator. See this CSS Tricks article for details. They are very similar: + will only target an element that is directly after another specific element whereas ~ will target a sibling that appear anywhere after it.
I have several divs. One of them has class="active". I want all the divs to be hidden (display:none;) except the one with .active. What should the selector be?
Have you tried?
div { display: none; }
div.active { display: block; }
PS. I'll add explanation. When you specify a class in a selector it has higher priority in cascading logic (because of its higher specificity) than just a single div (because single div is more generic, wider). So there is no need to use !important or stuff like that.
div:not(.active){
display: none;
}
Try the :not pseudo-class.
For example:
div:not(.active) {display:none;}
As Paul commented below, this selector is not supported in IE8 and below. But considering you included the CSS3 tag and specifically asked for a selector, that might not be an issue. For a cross-browser solution, see #mkdotam answer.
use !important in with css, something like that:
.active {
display: block !important;
}
and example: http://jsfiddle.net/hNLen/