I have some style that is supposed to be applied on all pages except three of them. It work fine for one page when I use
body:not(.home) #menu-footer{
color:green;
}
but how does it work for my other two pages (page-id-6 and page-id-7)? I tried this
body:not(.home) #menu-footer, body:not(.page-id-6) #menu-footer, body:not(.page-id-7) #menu-footer{
color:green;
}
but its not working.
body:not(.home) #menu-footer,
body:not(.page-id-6) #menu-footer,
body:not(.page-id-7) #menu-footer { … }
This doesn’t work, because when the body does have the class page-id-6, the other parts become true - you have a body that matches body:not(.home) now*, so the first part of this selector applies.
Apply all your “nots” at the same time instead:
body:not(.home):not(.page-id-6):not(.page-id-7) #menu-footer
This only applies when the body has neither of those three classes.
* Assuming of course, that only one of those classes is ever going to be set, but I guess that can be implied from the context of your question here.
Why not use a class for those pages you want to apply same styling to, in this case page ids 6 & 7, then apply a style. Here I'm using common_pages;
common_pages{
Color: green;
}
Related
First - sorry for the title - if you have a better suggestion as to what it should be named then please let me know.
I'm not sure if this is possible in the CSS hierarchy.
I have multiple elements and each one can have a .show class added to it, to show the the content.
I'd like to set a rule, so if the .show class has been added - any of the same element without (.show) it are then hidden.
My current not working attempt is to use:
.team_item {
display: grid;
&.show {
&:not(.show){
display: none;
}
}
So the logic would be:
element - should be visible
element + show class - element & inner content visible
element + show class - all elements without the show class should be hidden (display: none).
But I think I am trying to go back up the hierarchy in the CSS (scss).
Any help would be great.
Note: I'm fully aware that I can write JS to tackle this issue but was looking for a css (scss) solution.
I believe it needs to be along those lines:
$team-item-display:'block';
.wrapper {
#function hideElement() {
$team-item-display:'none';
#return 0;
}
&.show{
hideElement()
}
&:not(.show){
display:$team-item-display;
}
}
The direction of the solution is in calling a function that will set a different value of a variable that elements with no .show class use.
I havent tested the code. Hopefully it works.
I would like to use logic in my CSS. Styles need to be applied only if a product ID is higher than a specific number, e.g:
if (data-product-id > 25) {
padding: 50px;
}
Is this possible with CSS?
No, it isn't. Attribute selectors are based on simple string matching. There is no provision for less than / greater than numerical comparisons.
The closest you could get with CSS itself would be something like:
[data-product-id="25"],
[data-product-id="26"],
[data-product-id="27"],
/* etc */
This sort of thing is better handled with JS or server-side code which adds classes to elements.
You can apply some limited logic of the like you were asking about in CSS, but I advise against it. Nevertheless, the answer below is an answer, it's better to implement your logic in Javascript.
Assuming that you have a class called data-product for all your data products, you can create this rule:
.data-product {
padding: 50px;
}
.data-product[data-product-id="1"],
.data-product[data-product-id="2"],
.data-product[data-product-id="3"],
.data-product[data-product-id="4"],
.data-product[data-product-id="5"],
.data-product[data-product-id="6"],
.data-product[data-product-id="7"],
.data-product[data-product-id="8"],
.data-product[data-product-id="9"],
.data-product[data-product-id="10"],
.data-product[data-product-id="11"],
.data-product[data-product-id="12"],
.data-product[data-product-id="13"],
.data-product[data-product-id="14"],
.data-product[data-product-id="15"],
.data-product[data-product-id="16"],
.data-product[data-product-id="17"],
.data-product[data-product-id="18"],
.data-product[data-product-id="19"],
.data-product[data-product-id="20"],
.data-product[data-product-id="21"],
.data-product[data-product-id="22"],
.data-product[data-product-id="23"],
.data-product[data-product-id="24"],
.data-product[data-product-id="25"] {
padding: 25px;
}
I need to add more page name values beyond, "details". What are my options?
:host([page=details]) .menu-btn {
display: none;
}
:host(:not([page=details])) .back-btn {
display: none;
}
I should add that the "page" variable is a js property in my html file. I'm asking here because I don't even know what terms to use in my google search.
Thank you Greg McMullen, for pointing me to the documentation on attribute selectors.
Below is the solution that worked for all page values beginning with "details-". (Notice the vertical pipe in front of the equals and no trailing hyphen after"details".) For example, values including, "details-1", "details-2", and "details-3".
:host([page|=details]) .menu-btn {
display: none;
}
:host(:not([page|=details])) .back-btn {
display: none;
}
Technically, in my case, the "page" variable is not a html element attribute, in the strict definition.
The , CSS "combinator" allows you to set up multiple selectors and acts as an "and"/"or" operator so that you can specify several selectors that should all share the same rule:
:host([page=details]), :host([page=details2]), :host([page=details3]) { . . .}
And, you can just specify the attribute itself (no value) to match all elements that simply have the attribute (regardless of the value):
:host([page])
I would like to override setting that already defined with selecting
parent selector but I don't know how.
Say, there are 2 pages on a website like the following...
-Home page-
<body><h1 class="sifr">Home</h1></body>
-About page-
<body class="about"><h1 class="sifr">About</h1></body>
then, I have these in sirf-config.js...
sIFR.replace(fontname, {
selector: 'h1.sifr',
css: '.sIFR-root { color: #666666; font-size:29px; }'
});
sIFR.replace(fontname, {
selector: 'body.about h1.sifr',
css: '.sIFR-root { color: #FFFFFF; font-size:29px; }'
});
but it doesn't work...
If anybody help me I would appreciate.
Run the replacements for body.about h1.sifr before h1.sifr. sIFR doesn't calculate specificity but executes the replacements in-order. Replacing h1.sifr replaces all such elements, so body.about h1.sifr only finds elements that have already been replaced.
Check the order your loading CSS vs issuing the replace commands ...
I don't use Sifr, so I don't know exactly how it works. I assume that the code creates CSS code like this:
h1.sifr { color: #666666; font-size: 29px; }
body.about h1.sifr { color: #FFFFFF; font-size: 29px; }
If it does, that will override the color style for the heading in the about page, as the selector for the second line is more specific than the selector in the first line.
You can read more about specificity here.
If it doesn't work, it's because there is something in your code that doesn't look like you think it does, and it may very well be something in some other part of your code that you haven't shown here that is causing the problem.
You can use the Firebug plugin in Firefox to inspect the elements in the page to see exactly which css is affecting each element.
I have the following
<p class="main yellow">Hello World</p>
I would like to write a css element that refers to only elements with main and yellow. Is there a way to do this?
Eg. the following doesn't work, but would be what I'm after
.main + .yellow { color:green }
This should grab it:
.main.yellow { color:yellow; }
Though you may get differing results in different browsers. I use QuirksMode to get an idea of what will/won't work cross browser.
You just need to specify them as
.main.yellow { color: green; }
No space between the two classes.
does this work for you?
.main.yellow{
color:green;
}
As others have already said, what you want is:
.main.yellow { color:green; }
However, let me quickly explain why your first attempt didn't work. The + keyword refers to a following element, i.e. the element after.
Your example would have matched the following HTML...
<p class="main">Hello</p>
<p class="yellow">World</p>
...and styled the second paragraph (.yellow) green. So ".main + .yellow" means "select a .yellow that is immediately after a .main".