In my Wordpress CSS I have added a few extra classes. Depending on screen widht I want to override these. This works fine, except for one class. I am at the end of my wits what could be the cause. Here's the code excerpt (class "field-space" is being successfully overriden, class "formflex" is not)
.formflex {
display: flex;
background-color:yellow;
}
.field-space {
padding-right: 20px;
background-color:lightgrey
}
#media only screen and (max-width: 767px) {
.formflex {
! flex-direction : column;
background-color:blue;
}
.field-space {
padding-right: 60px;
background-color:green;
}
}
The background-color specification is there for testing whether things work. The color of elements with a field-space dev are changing, the ones for formflex are not. Am I missing some typo (checked a thousand times)?
Tested with Firefox and Chrome.
https://developer.mozilla.org/en-US/docs/Web/CSS/important
A ! delimiter followed by the important keyword marks the declaration
as important. The !important flag alters the rules selecting
declarations inside the cascade. A declaration that is not important
is called normal.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Specificity is the algorithm used by browsers to determine the CSS
declaration that is the most relevant to an element, which in turn,
determines the property value to apply to the element. The specificity
algorithm calculates the weight of a CSS selector to determine which
rule from competing CSS declarations gets applied to an element.
Just to make it clear because your words showed some confusion, you are overriding the specificity of a single css attribute and not the whole class. Those are ruleset applied to elements responding to a given selector. By the way you were doing it wrong...
...and since here you don't need to override any specificity, the !important clause is not needed.
As a side note, .field-space element needs the height set when displayed vertically.
.formflex {
display: flex;
background-color: yellow;
}
.field-space {
padding-right: 20px;
background-color: lightgrey
}
#media only screen and (max-width: 767px) {
.formflex {
flex-direction: column;
background-color: blue;
}
.field-space {
padding-right: 60px;
background-color: green;
line-height: 1em;
height: 1em;
}
}
.formflex > *:not(.field-space){
border: solid 1px gray;
}
<div class="formflex">
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div class="field-space"></div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>
Related
I'm having trouble with the main menu in the header of my Wordpress site here: http://eptestdev.us/qa
The only way I can get it to fill the entire box is by declaring it to have a width of 950px. However, I want it to disappear when the user is on a mobile device leaving just the mobile menu.
My CSS looks like this, but it is not working:
#media screen and (max-width: 900px){#access {display:none;}}
Not sure how I can get it to collapse otherwise. Any help would be appreciated.
You just need to add the !important tag to your css, so that it overrides everything else. Like this:
display: none !important;
I tested this on your site and it worked.
In general it's good to avoid using !important - and instead use CSS's natural way of determining which rule is used.
Earlier rules (at the top of the stylesheet) are overruled by later ones:
.box { width: 200px; border: 1px solid black }
.box { width: 500px; }
The second rule will override the previous width declaration, giving you a 500px box with a black border.
In your case, the reason your media query rule isn't working is because it occurs before the 'normal' one. If you switch:
#media screen and (max-width: 900px){#access, #copyright, .menu-footer-menu-container {display: none;}}
/* ... other rules ... */
#access, #access-footer {
background:#000000;
clear:both;
display:block;
float:left;
margin:0 auto 2px;
width:100%;
max-height:20px;
}
with
/* ... other rules ... */
#access, #access-footer {
background:#000000;
clear:both;
display:block;
float:left;
margin:0 auto 2px;
width:100%;
max-height:20px;
}
#media screen and (max-width: 900px){#access, #copyright, .menu-footer-menu-container {display: none;}}
This rule will work without needing to use !important.
There are other ways to make rules keep: for instance, a more specific rule will be used before one that is more generic:
#menu .submenu-item { color: green; }
.submenu-item { color: red; }
As long as your .submenu-item divs are within a '#menu' div, they'll be green, because the subsequentcolor: red` declaration doesn't have the same level of specificity.
You can read more on this here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I have some elements inside a DIV which get reordered depending on the size of the screen. I want to style each of these elements differently depending on their flex-box order. Because the media queries are inside a framework, I'd rather not write my own media queries to do this, because I don't want to have to remember to change my media queries if the framework changes the break points for their media queries. I tried using the + sibling selector, but apparently this only applies to the order of elements in the original markup, not the flex box rendering order. Is there any way to style an element based on the order in which it appears in the rendered DOM?
As mention in the comments, you wont be able to use nth-child, as the styles will apply to the order of the actual DOM, not the rendered DOM.
You will have to add extra classes to the markup in order to do this.
So rather than re-order using nth-child, re-order using the extra classes.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.flexGrid {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.flexGrid__item {
border: 1px solid pink;
width: 50%;
height: 100px;
}
.flexGrid__item--alpha {
background: pink;
order: 1;
}
.flexGrid__item--bravo {
order: 2;
}
.flexGrid__item--charlie {
order: 3;
}
.flexGrid__item--delta {
order: 4;
}
#media screen and (min-width: 500px) {
.flexGrid__item {
width: 25%;
}
.flexGrid__item--alpha {
order: 5;
}
}
<div class="flexGrid">
<div class="flexGrid__item flexGrid__item--alpha"></div>
<div class="flexGrid__item flexGrid__item--bravo"></div>
<div class="flexGrid__item flexGrid__item--charlie"></div>
<div class="flexGrid__item flexGrid__item--delta"></div>
</div>
More detail in this fiddle:
https://jsfiddle.net/pua5u8a4/1/
Is there any advantage or disadvantage in using :not() over an inverted selector logic? May it be in performance, safety or browser support, which approach is recommended?
Either:
.imageSlider img:not(:first-child) {
display: none;
}
Or:
.imageSlider img {
display: none;
}
.imageSlider img:first-child {
display: block;
}
Sometimes it's could be better to use :not.
<p class="my-paragraph">
<div class="something"></div>
<div class="something-else"></div>
<div class="an-other-thing"></div>
<div class="an-other-thing"></div>
<div class="last-one"></div>
</p>
In this case, if you want to hide everything except div .an-other-thing it will be quicker to write :
.my-paragraph div:not(.an-other-thing) {
display: none;
}
Instead of:
.my-paragraph div {
display: none;
}
.my-paragraph div.an-other-thing {
display: block;
}
In most of cases, a longer CSS means longer time to execute it
As of January 2017, the :not selector is currently only supported by Safari browsers with a mere 11% global browser support. I would stay away from using it in production code.
First of all, sorry for yet another post about this topic but I couldn't see anything that makes sense to me in polymer documentation and on stackoverflow.
I just want to attach style to my element.
From the documentation (https://www.polymer-project.org/0.5/articles/styling-elements.html and https://www.polymer-project.org/0.5/docs/polymer/styling.html#including-stylesheets-in-an-element)it should be straight forward.
<polymer-element name="x-foo">
<template>
<style>
x-foo div { ... }
</style>
...
But it doesn't work as expected. If we define the style for an element, inside the element, it is not applied.
Here is the code:
<polymer-element name="x-button" noscript>
<template>
<style>
/* not working */
x-button {
background-color: green;
}
/* not working */
x-button .hithere{
display: block;
min-height: 50px;
background-color: red;
margin: 20px;
}
/* not working */
x-button .hitheretoo{
display: block;
min-height: 50px;
background-color: blue;
margin: 20px;
}
</style>
<div class="hithere"></div>
<template>
<div class="hitheretoo"></div>
</template>
</template>
</polymer-element>
And a live demo:
http://codepen.io/anon/pen/yyZqMN
Thanks
ssorallen explained the css issue very well and there is more. I couldn't get :host to work on it's own and depending on the browsers you will need to shim the Shadow DOM & add polyfill-next-selector styles.
Additionally, The element never gets registered because you have not used the Polymer() function inside the custom element (unless you chose not to add it in your code example). Here is a codepen of what I found to be one possible solution.
The one thing I am still trying to figure out is the nested <template> issue. I can't pierce the shadow boundary with ::shadow or /deep/. Might be a bug. I'll take a look when I get a few minutes.
Use the :host selector when styling an element from inside itself
<style>
:host {
background-color: green;
}
.hithere {
display: block;
min-height: 50px;
background-color: red;
margin: 20px;
}
.hitheretoo {
display: block;
min-height: 50px;
background-color: blue;
margin: 20px;
}
</style>
When you're styling from inside a custom element all selectors are already scoped to the element. By selecting x-button you are selecting any x-buttons that are descendants of this element, not the element itself. That also means you don't need to prefix selectors with the tag name to scope them; the shadow DOM provides scoping.
So I have the following at the top of bootstrap.css
.scrollable-table {
height: 800px;
overflow: scroll;
}
.top-buffer { margin-top:20px; height:150px;}
.cat-title { background-color:gray; margin-top:0px; }
scrollable-table changes the look of some of my other html while doing what I need it to do. Specifically from what I can tell the height in .top-buffer is whats being changed. When I move it under those first two it works as expected without causing any issues. So this
.top-buffer { margin-top:20px; height:150px;}
.cat-title { background-color:gray; margin-top:0px; }
.scrollable-table {
height: 800px;
overflow: scroll;
}
Where I use scrollable-table is here
<div class="span4 scrollable-table" style="background-color:white">
scrollable-table is also only ever used there!
For good measure I'll also show where top-buffer is used
<div class="span3 top-buffer" style="background-color:#DBDBDB">
I just don't understand how a completely unrelated class to the other two can change things so drastically. I understand that CSS cascades the styles, but in this case it makes no sense because they are not related. I should mention this is Twitter Bootstrap, and is at the very top over what CSS was already there. I'm hoping someone coud shed some light on why this.
The order of the classes in the stylesheet (but not in the HTML) matters because the stylesheet is read top to bottom. If you have two classes in this order:
.a { color: blue; }
.b { color: red; }
Both of these elements will be red:
<div class="a b">Test 1</div>
<div class="b a">Test 2</div>
But if you swap them around, both will be blue:
.b { color: red; }
.a { color: blue; }