I have the following declaration that is not editable (platform restriction):
*{list-style:none;}
And I want to make a list with dots.
This does not work:
#id{
list-style-type:circle !important;
}
Can someone tell me how to override the first declaration?
I was under the impression that in css * is overwritten by #id and that !important overwrites everything. Why this does not work?
I made a jsfiddle at: http://jsfiddle.net/7AcA9/1/
Thanks!
change the rule to #id li.
The list-style property applies to list-items <li>, not the container <ul>, so the * rule overrides it. The reason that #id works normally is because the property is inherited.
You can also remove the !important modifier too.
Add li after the ID selector,
#id li {
list-style-type:circle;
}
#mam (or #id per your question) does not select li. It only selects ul. * selects the li and the list-style-type property is overridden. You could use #mam li.
Related
I need to override the height of all the child of a parent except a child and his child's. how can i do that ?
I use the id of the parent and the not option #parent *:not(here i want to select a child which is a parent of another).
Please can anyone help me thanks a lot <3.
CSS doesn't have parent selectors, so there's no way to say :not(any child which is itself a parent) automatically unfortunately. I believe you'll have to apply a class to every child which is itself a parent. And then you'll need a second selector to catch the grandchild. So:
#parent > *:not(.haschildren),
#parent > *:not(.haschildren) > * {
}
Or just give the same class to every tag involved. But this is probably more typing overall than just using two selectors:
#parent *:not(.tagswewanttoignore) {
}
i try to hide several polymer elements on a certain element condition. I'm aware that there are several possibilities. In my opinon the easiest way to do this is to introduce a new CSS class
.invisible {
display: none;
}
and add it to the class list of the polymer elements
this.$.icon.classList.add('invisible');
this.$.text.classList.add('invisible');
this.$.button.classList.add('invisible');
But this has no effect on the elements. The elements are still visible. A look into the elment inspector shows, that the class was added:
class="style-scope parent-elem invisible"
Where parent-elem is the name of the parent element.
Can anyone explain me why the element will not be hidden?
Thank you
Best Regards,
Meisenmann
you can easly manipulate on your elements with parent property. Try in your element properties add property
properties: {
...
elementsVisible: {
type: Boolean,
value: true
}
...
}
then in your method manipulate this property and in html component set
<element hidden="[[!elementsVisible]]" ></element>
ps. if this wont work you can add in parent css
[hidden] {
display: none;
}
sometimes polymer elements need special mixins to customize their css, but hidden usually works :)
I'm working on some CSS from a tutorial, a div has this class:
<div class="related products">
How can I reference it in the stylesheet?
The div actually has two classes, related and products. You can reference it in your stylesheet with either .related or .products, and it will pick up the styles from both of those rules. For example, with the following CSS, the text in the div in your question would appear red with font size 12:
.related { color:#ff0000 }
.products { font-size:12px }
If you want to select elements with both classes, use .related.products in your stylesheet. For example, add the following to the above example:
.related.products { font-weight:bold }
And the text in your div will receive all three rules, because it matches all 3 selectors. Here's a working example.
div.related.products is the general method
You reference it by div.related.products which literaly translates to "a div with class of related and class of products".
Or, you could reference it by using either class names, since it will catch both.
jsFiddle Example.
In the css, just put the name class of the div by doing this:
.related products {
/*styling to go here*/
}
Now any styling within the related products class will be applied to that div.
I'm wondering how can I apply a style to EVERY h2 that DOES have ANY any class attached to it, thus having the effect that the style will NOT be applied on a plain h2..eg..
<h2 class="1"></h2>
<h2 class="2"></h2>
<h2 class="3"></h2>
<h2 class="a"></h2>
<h2></h2>
All the ones with a class should have a style - and just plain h2 should not, (This is a huge site with hundreds of styles)...so any easy way to do this?
There is a method to do it but it's only possible with browsers that support CSS3 :not pseudo class.
h2[class] {
/* Styles for <h2> with a class, regardless of the value */
}
h2:not([class]) {
/* Styles for <h2> without classes */
}
I hope it works!
[Edit] I've made a simple demo for you here - http://jsfiddle.net/fL2sT/
What you're asking for is how CSS works by default.
The correct way to style elements which have no specific class assigned to them is to style the base element, as Ahsan demonstrated above. I don't know why he got downvoted.
h2 { property: value; }
Note that if H2 elements do have classes assigned to them, then that styling may override your base style.
So if you have: h2 { color:#333; font-size:2em; } as your base style, and then apply class="myClass" to it where: .class { color: #000; }, then the base style's color will be overriden (but not the font size). This is the cascade in Cascading Style Sheets.
Another way is to target them conditionally:
div#nav h2:first-child { property:value; }
which gives you contextual control, but again, class assignment will always override base styling, and may also override context targeting if the class application has higher specificity.
Why not simply use
h2[class] { ... }
How do I do a CSS selector that selects a div that has the class of someButton AND current?
.someButton .current { /* select current with the parent div of .someButton, correct? */
Please help me figure this out!
You need to concatenate it: .someButton.current.
With a space, it will be seen as "apply on any element with class .current which is nested in a parent element with class .someButton".
Remove the whitespace
.someButton.current
div.someButton.current { ... }