Using a GWT web app, Firebug says that the following HTML
<table class="drop-zone drop-zone-column-66 multi-zone">
...
</table>
is using this CSS.
.maximized-gadget .drop-zone.multi-zone, .configure-tab a {
display: block;
}
What CSS do I need to write so that this <table> will have style, display: none?
I made 2 attempts: [EDIT - updated .multi-zone and display:none]
.drop-zone .drop-zone-column-66 .multi-zone {
display: none;
}
and
.maximized-gadget .drop-zone.multi-zone, .configure-tab a {
display: none;
}
but Firebug still gives me the CSS shown at the top.
Please advise me.
Strictly speaking, all you should need is:
.maximized-gadget .drop-zone.multi-zone {
display: none;
}
provided that that rule comes after the original rule you gave above:
.maximized-gadget .drop-zone.multi-zone, .configure-tab a {
display: block;
}
Depending on what the structure of the rest of your document is and what you're trying to do, you may need to add some specificity to that rule.
The problem with your first attempt is that your rule would apply to an element with a class of multi-zone which is a descendant of an element of class drop-zone-column-66, which in turn is a descendant of an element of class drop-zone. What you want is to target an element that has all three of those classes set on it, which you can do by chaining those selectors:
.drop-zone.drop-zone-column-66.multi-zone {
display: none;
}
which should set you right (though if I remember correctly this won't work in older versions of IE).
Related
I have some code in my WP CSS that shows a link-symbol before links on pages and articles. Here is section of the styles for styling anchors:
.entry-container .entry-content a::before {
display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
padding-right: 4px;
font: var(--fa-font-solid);
content: "\f0c1";
}
Problem: The symbol shows before anchors too.
On one page I managed to hide them successfully using this chunk of CSS:
#mpm.wpsal-anchor::before {
display: none;
}
This works fine.
But on the other page, I have several anchors and I want to use a css code, that hides all of them without typing each anchor! I tried
[class$="wpsal-anchor::before"] {
display: none !important;
}
but without success.
Do anyone have a suggestion or solution?
Thanks in advance!
So based on your reply of not wanting the before to show on any anchor element there are a few things you can try
You can use the * in CCS to target all elements and follow it with an anchor. The CSS below says that for all elements that have an anchor tag to not display the before pseudo element. Give that a try. I would put it at the top of your CSS just in case other elements use before. You could also try it without the ( and just use a::before
* a::before { display: none; }
I have a div within a webpage I am trying to target with the following code to create a flexbox:
div.my-div-class {
display: flex;
flex-wrap: wrap;
}
div.my-div-class > label {
fl
Originally I had a problem with the User Agent Styles overriding the div and causing it to automatically display block. I fix that per this question by adding the following code:
div {
display: inherit;
}
Which I assumed, perhaps naively, that this would cause the div to "inherit" the styles of what I set to the class.
I check the console, and sure enough see:
div { display: inherit; }
instead of what was there before for the User Agent which was:
div {display: block;}
Which is what I assumed was messing with my style originally.
I tried !important to see if that would at least cause a change and it didn't.
So I'm thinking I don't fully understand the behavior of inherit or how to target this particular div correctly.
Can someone explain this a little bit? I should mention this div is wrapped in a form, and the HTML of that form is like below:
<div id="form-container">
<form id="form">
<div class="my-div-class" id ="the-target-div">
/*Rest of the HTML*/
</div>
</form></div>
Generally you don't really need to target the div tag, you should instead use a class.
If you are creating your own CSS and not using some library, such as bootstrap, it's a good idea to use a CSS reset to make sure you are writing CSS on a clean slate. This is a popular one.
To answer your question, the inherit property sets a css property to inherit the value from its parent. A div tag by default is a block level element, so setting anything to inherit below it will also set it to display: block.
Just target whatever you need to be flex with the class name, such as:
.my-div-class {
display: flex
}
It seems that you didn't copy all of your html code, cos it looks like it's broken in the middle.
If you want to target this particular div you should do it by refering to it's class or id. Property value "inherit" inherits ONLY the property from its parent element that it is set as a value to.
For example:
.parentElement {
display: flex;
background: yellow;
height: 200px;
width: 100%;
}
.childElement {
display: flex;
height: 100px;
width: 70%;
background: blue;
}
.childElement:hover {
height: inherit;
}
<div class="parentElement">
<div class="childElement">
</div>
</div>
In this example when we hover over the child element we are setting height value to "inherit" which inherits the value ONLY for height property, but the width for example doesn't change.
In short: if you want your div to inherit all styles his parents has you should set "inherit" as a value for every property it's parent has.
Unset css property in css. Is it possible?
Let me explain the problem with the css code.
We have two classes at hand: .whenRolledUp and .whenRolledDown.
I want my element to comply with the following rules:
1 When an element with .whenRolledUp class is positioned in DOM hierarchy and have an element with a class .rolledDown somewhere above itself in the hierarchy I would like to disable the element. Otherwise, I would like to do nothing to the display of the element. I am able to satisfy this with the help of this css:
.rolledDown .whenRolledUp {
display: none;
}
2 When an element with .whenRolledDown class is positioned in DOM hierarchy and have an element with a class .rolledDown somewhere above itself in the hierarchy I would like to do nothing to the display of element. Otherwise, I would like to have display: none for the element. I am able to satisfy the second part using this:
.whenRolledDown {
display: none;
}
But here is the catch. I can not satisfy the first part by just using this:
.rolledDown .whenRolledDown {
display: block;
}
Because here I am actually setting the display to block, while it may have a different value without this css.
It seems like the problem is impossible to solve with only css. Is it so?
You can use display: unset:
The unset CSS keyword resets a property to its inherited value if it
inherits from its parent, and to its initial value if not.
function add() {
document.querySelector('.target').classList.add('rolledDown');
}
.whenRolledUp {
display: none;
}
.rolledDown .whenRolledUp {
display: unset;
}
<div class="target">
<div class="whenRolledUp">whenRolledDown</div>
</div>
<button onClick="add()">Add rolledDown</button>
I have a horizontal menu built using a <ul> element. I'm trying to get it to evenly spread out each <li> across the width of the menu. Based on several answers here on SO, I used the following CSS:
ul {
display: table;
width: 100%;
}
ul li {
display: table-cell;
}
However, no matter what I try, the <li> elements still end up with a calculated display of block, with this contradictory information from the debugger (tested in FF and Chrome):
I didn't know what is going on here, and (more importantly) how do I get my list items to display as table-cell?
In photo is showed that your style.css is really big (min.1835 lines) and because of that styles to ul could be overvritten somewhere.
To make your rule more important than existing rule, use !important keyword after rule like so:
ul {
display: table!important;
width: 100%!important;
}
ul li {
display: table-cell!important;
}
CSS has a trait called importance, it chooses which rules are the most specific and thus should override more loose rules. As you seem to use a CSS framework, your own rules don't override the framework's generic rules. Turns out that you have two options to increase the importance of your rules at main.css:
Add !important after your rules:
ul li {
display: table cell !important;
}
Make your selectors more specific:
#menu ul li.menu-list-item { ... }
Your question also looks very strange and you may be subject to a browser rendering bug, have you tried it out with other browsers?
Apparantly IE11 doesn't have a User Agent Style for <main> and therefor no display: block; on it. Why is there no User Agent Style? Is this a bug or on purpose?
Adding display: block; to the main element is enough, tho.
The main element is indeed not fully supported by IE11. Adding main { display: block; } to your CSS is the best solution for IE9+. You don't need to make conditional comments - since display: block; is the default behavior for main elements, it won't mess up anything.