On a Wordpress site, I want to turn off the theme parallax effect for certain pages. I'm not sure what library is used and I'd prefer to have a go at it via CSS. Code is:
<div id="primary" class=" page-header header-small" data-parallax="active" style="transform: translate3d(0px, 0px, 0px);">...</div>
So my guess was I would be able to target the "active" the same way you override inline [style]:
.page-child #primary[data-parallax] {
content:'none';
}
This didn't work so I went for the simpler
.page-child #primary[style] {
transform: none;
}
My question for the future is – is there a css way to target data- values?
To target the div element with data-parallax attribute set to "active" specifically, and turn off translate3d transform, use the following code:
[data-parallax="active"] {
transform: translate3d(0);
}
To answer your question generally, these are the available attribute selectors you can use to target the element:
[data-value] {
/* Attribute exists. */
}
[data-value="foo"] {
/* Attribute has exact value "foo". */
}
[data-value*="foo"] {
/* Attribute value contains value "foo" somewhere in it. */
}
[data-value~="foo"] {
/* Attribute has value "foo" in a space-separated list somewhere. */
}
[data-value^="foo"] {
/* Attribute value starts with "foo". */
}
[data-value|="foo"] {
/* Attribute value starts with "foo" in a dash-separated list. */
}
[data-value$="foo"] {
/* Attribute value ends with "foo". */
}
The answer is yes
Css gave us a possibility to manipulate CSS based on a value assigned to data-attribute.
With that being said. Here is an example you could use to achieve it.
[data-parallax="foo"] //Where value is exactly foo
Related
I'm trying to select input elements of all types except radio and checkbox.
Many people have shown that you can put multiple arguments in :not, but using type doesn't seem to work anyway I try it.
form input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
Any ideas?
Why :not just use two :not:
input:not([type="radio"]):not([type="checkbox"])
Yes, it is intentional
If you're using SASS in your project, I've built this mixin to make it work the way we all want it to:
#mixin not($ignorList...) {
//if only a single value given
#if (length($ignorList) == 1){
//it is probably a list variable so set ignore list to the variable
$ignorList: nth($ignorList,1);
}
//set up an empty $notOutput variable
$notOutput: '';
//for each item in the list
#each $not in $ignorList {
//generate a :not([ignored_item]) segment for each item in the ignore list and put them back to back
$notOutput: $notOutput + ':not(#{$not})';
}
//output the full :not() rule including all ignored items
&#{$notOutput} {
#content;
}
}
it can be used in 2 ways:
Option 1: list the ignored items inline
input {
/*non-ignored styling goes here*/
#include not('[type="radio"]','[type="checkbox"]'){
/*ignored styling goes here*/
}
}
Option 2: list the ignored items in a variable first
$ignoredItems:
'[type="radio"]',
'[type="checkbox"]'
;
input {
/*non-ignored styling goes here*/
#include not($ignoredItems){
/*ignored styling goes here*/
}
}
Outputted CSS for either option
input {
/*non-ignored styling goes here*/
}
input:not([type="radio"]):not([type="checkbox"]) {
/*ignored styling goes here*/
}
Starting from CSS Selectors 4 using multiple arguments in the :not selector becomes possible (see here).
In CSS3, the :not selector only allows 1 selector as an argument. In level 4 selectors, it can take a selector list as an argument.
Example:
/* In this example, all p elements will be red, except for
the first child and the ones with the class special. */
p:not(:first-child, .special) {
color: red;
}
Unfortunately, browser support is somewhat new.
I was having some trouble with this, and the "X:not():not()" method wasn't working for me.
I ended up resorting to this strategy:
INPUT {
/* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
/* styles that reset previous styles */
}
It's not nearly as fun, but it worked for me when :not() was being pugnacious. It's not ideal, but it's solid.
If you install the "cssnext" Post CSS plugin, then you can safely start using the syntax that you want to use right now.
Using cssnext will turn this:
input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
Into this:
input:not([type="radio"]):not([type="checkbox"]) {
/* css here */
}
https://cssnext.github.io/features/#not-pseudo-class
I want to have different values of a css property (I am using SASS), based on that whether a element with a certain property's value '$additionalNavHeight' is present on the page. In some pages there is no such element, in other - there is. I wrote a SASS mixin:
#mixin top-position($navHeight, $additionalNavHeight)
{
#if $additionalNavHeight == true {
.loadingAnimation {
top: $navHeight + $additionalNavHeight;
}
}
#else {
.loadingAnimation {
top: $navHeight;
}
}
}
And I included the mixin in the selector:
#include top-position($navHeight, $additionalNavHeight);
I thought this should change the value of the property 'top' of the element with the class 'loadingAnimation', based on that if in the page already is present the element with the value of its 'top' property '$additionalNavHeight'. The compiler doesn't show any error, but the code doesn't change anything. What am I doing wrong? Any help would be very appreciated.
Тhe simplest solution. You must check with JavaScript if element exists or not
and to apply the second class to element. In the second case (element existing)
you must add adittionnal height. In this case the mixin is redundant.
.loadingAnimation {
top: $navHeight;
}
.loadingAnimation.additinnalHeight {
top: $navHeight + $additionalNavHeight;
}
Here is example jsfiffle:
https://jsfiddle.net/ra9r8rk8/
In this case element will receive class newClass when the first div exists. (the element)
Edit: This is second improved solution. In fact there is no need for regular expression. We can just use classList:
https://jsfiddle.net/ra9r8rk8/1/
I know you can select the elements if the attribute exists
[data-value] { /* rules */ }
Or that its values starts with some val
[data-value^="foo"] { /* rules */ }
But, can I check if any elements contain contains a prefixed attribute?
[^data-] { /* something like it? /*}
This question came when I was trying to query all attributes of the page that has a prefixed aria atrittube. eg. aria-hidden, aria-live...
Unfortunately it is not possible to do what you want with just CSS selectors, you would have to specify each attribute that you want to include. For example:
[aria-hidden], [aria-live]
{
}
It would be possible however to do something with javascript, so you may want to look into that if it's an option for you.
For a button I have 3 possible classes: "state-normal", "state-focus" and "state-hover".
All have the same attributes (background, border, ...), but different values for the
attributes.
If a button gets "state-focus", I do not want to remove the class "state-normal".
If a button is "state-focus" and gets "state-hover", I do not want to remove the class
"state-focus".
In the browser language specification you can give a "quality"/priority to a language:
"Accept-Language: da, en-gb;q=0.8, en;q=0.7"
It would be great to do the same also in css:
.state-normal { background-color: #aaaaaa;q=0.5 }
.state-focus { background-color: #bbbbbb;q=0.7 }
.state-hover { background-color: #eeeeee;q=0.9 }
I know that there is nothing in CSS.
But, I know in jQuery UI they have kind of this, because they don't remove "ui-state-default" when they assign "ui-state-focus" to an element. How do they do it?
Is there another way to implement this with a trick (WITHOUT !IMPORTANT).
Thanks alot in advance
You can do this using CSS.
.state-normal { background-color: #aaaaaa;q=0.5 }
.state-normal.state-focus { background-color: #bbbbbb;q=0.7 }
.state-focus.state-hover { background-color: #eeeeee;q=0.9 }
But this implies that all classes mentioned in the rule will be present, i.e. an element will have both classes present. So an element with class state-focus will not have the background-color set as per the rule.
If you want to avoid that, then you can do this instead:
.state-normal { background-color: #aaaaaa;q=0.5 }
.state-focus, .state-normal.state-focus { background-color: #bbbbbb;q=0.7 }
.state-hover, .state-focus.state-hover { background-color: #eeeeee;q=0.9 }
EDIT: As per OP's request
CSS Specificity
CSS Selectors - MDN
Similar answer
I'm trying to select input elements of all types except radio and checkbox.
Many people have shown that you can put multiple arguments in :not, but using type doesn't seem to work anyway I try it.
form input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
Any ideas?
Why :not just use two :not:
input:not([type="radio"]):not([type="checkbox"])
Yes, it is intentional
If you're using SASS in your project, I've built this mixin to make it work the way we all want it to:
#mixin not($ignorList...) {
//if only a single value given
#if (length($ignorList) == 1){
//it is probably a list variable so set ignore list to the variable
$ignorList: nth($ignorList,1);
}
//set up an empty $notOutput variable
$notOutput: '';
//for each item in the list
#each $not in $ignorList {
//generate a :not([ignored_item]) segment for each item in the ignore list and put them back to back
$notOutput: $notOutput + ':not(#{$not})';
}
//output the full :not() rule including all ignored items
&#{$notOutput} {
#content;
}
}
it can be used in 2 ways:
Option 1: list the ignored items inline
input {
/*non-ignored styling goes here*/
#include not('[type="radio"]','[type="checkbox"]'){
/*ignored styling goes here*/
}
}
Option 2: list the ignored items in a variable first
$ignoredItems:
'[type="radio"]',
'[type="checkbox"]'
;
input {
/*non-ignored styling goes here*/
#include not($ignoredItems){
/*ignored styling goes here*/
}
}
Outputted CSS for either option
input {
/*non-ignored styling goes here*/
}
input:not([type="radio"]):not([type="checkbox"]) {
/*ignored styling goes here*/
}
Starting from CSS Selectors 4 using multiple arguments in the :not selector becomes possible (see here).
In CSS3, the :not selector only allows 1 selector as an argument. In level 4 selectors, it can take a selector list as an argument.
Example:
/* In this example, all p elements will be red, except for
the first child and the ones with the class special. */
p:not(:first-child, .special) {
color: red;
}
Unfortunately, browser support is somewhat new.
I was having some trouble with this, and the "X:not():not()" method wasn't working for me.
I ended up resorting to this strategy:
INPUT {
/* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
/* styles that reset previous styles */
}
It's not nearly as fun, but it worked for me when :not() was being pugnacious. It's not ideal, but it's solid.
If you install the "cssnext" Post CSS plugin, then you can safely start using the syntax that you want to use right now.
Using cssnext will turn this:
input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
Into this:
input:not([type="radio"]):not([type="checkbox"]) {
/* css here */
}
https://cssnext.github.io/features/#not-pseudo-class