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 { ... }
Related
Two elements have the same class name, in my case, "img"
Is it possible to style the elements differently that are children of two different classes, even if they have the same class name?
I want the img elements under class "slide-type-final" to be styled different to the img elements under "question-2"
.slide-type-final>img {
max-height: 40em;
}
.question2>img {
max-height: 40em;
display: inline-table;
}
img isn't a class name in this case, is it? Apart from the solution you already have in your question (?), ...:
1.) You can apply a second class to the parent(s), like <div class="slide-type-final up"><img scr="...">, whose img child you would address as slide-type-final.up>img { ... }
2.) You can apply different classes to the img tags, like <div class="slide-type-final"><img class="up" scr="...">, which you would address as slide-type-final>img.up { ... }
it would be helpful if you can provide html structure. and yes, css styles can be override based on parent element/class.
if styles in your code are not overriding, that means hierarchy is not correct.
'>' symbol means img tag (note not class as to catch img class you should have .img) should be direct child of element with class slide-type-final or class question2. if weight of classes are same, then whatever style come last will apply
You can use pseudo-classes like nth-child(2n)/first-child/first-of-type/last-child
Or :not(:last-child) etc.
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 want to apply css to all class that starts with for example 'abcd-' but I don't want to apply that css to class with name for example 'abcd-dontapply'. Can I do this?
What I tried
a[class |= "abcd"] :not([class = "abcd-dontapply"])
{
---define CSS
}
But this is not working, it is not applying CSS to any class that starts with 'abcd-'.
As mentioned in your question:
Don't add whitespace unnecessarily. The whitespace just before the
:not is significant, i.e. it changes the meaning of the selector.
a[class^="abcd"]:not(.abcd-dontapply)
{
/* define CSS here*/
}
You can find all attribute selectors specifications here.
You can do that with proper css selectors:
starts with selector would be like-
div[class^="abc"]:not([class="abc2"])
I have a sample jsfiddle for you:
http://jsfiddle.net/8w65ffj0/1/
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.
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.