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) {
}
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'm trying to apply CSS to any immediate child of a parent container element. How do I use CSS's descendant < selector to select any immediate child regardless of type (div / span / etc).
I assume you mean the child selector. It's >, not <.
.parent > *
That will select any element. You can of course use any other selector as the child (an element, class, id, etc.)
If you are in SCSS then
.parent {
& > * {
}
}
ok I know how to do both these things separately:
#elemID { } /* selects only one element */
#elemID * { } /* selects all its children elements but not the element itself */
And I know I can do it like this:
#elemID, #elemID * { }
But is there a way to avoid this repeating ?
No, there is nothing shorter than that.
Note that if you really only want all the children of #elemID, and not all the descendants, you need to use the child combinator:
#elemID, #elemID > *
And as Šime Vidas has commented, some properties like color are automatically inherited by descendant elements by default. If you're trying to give text color to #elemID, you should not need to apply it explicitly and recursively to the elements inside it. See the SitePoint Reference on inheritance in CSS for details.
No. But you could select its parent if an equivalent selector exists:
.parent * { ... }
#contentpage div
Does this mean select the div that has id #contentpage?
I am getting some bad layout. I am trying to select the div with the id #contentpage.
Could somebody also please tell me what the following css mean:
#myid div a
.myid a h
div #myid a
#myid div a
<anytag id="myid"><div><a rel="match">...
.myid a h
<anytag class="myid"><a><h rel="match">...
div #myid a
<div><anytag id="myid"><a rel="match">...
If you would like to match a div with id #myid, then either ignore the fact that it's a div (ids are unique anyway) or match it as follows:
div#myid
#myid div a
This will match an a within a div within an element with the id of myid. When I say "within" I mean anywhere within at any nesting level. The others are all the same but with different elements in different orders.
If you want an element with the id of contentpage you simply use #contentpage. If for some reason you wanted to specify that it was a div it would be div#contentpage.
if you want to modify the styling of the div with the id of contentpage then you would do the following
div#contentpage { //input styling here }
OR
#contentpage { //input styling here }
it also looks like you are trying to get at elements under the div these can be accessed in a number of ways but this is usually what I do
<div id="contentpage"><div><a></a></div></div>
#contentpage a { //stying }
#contentpage div a { //styling }
#contentpage {color:red} will select whichever element with id contentPage
#myid div a will select <a> elements that are inside <div> that are inside an element with id myid
.myid a h as far as I know there is no <h> element ? Without the h, it would select all links within any elements with the class myid (in this case myid is a dubious name, then, since its not an id per se)
div #myid a will select links inside of an element with id myid, but only if this element is within a <div>. It won't work if the element myid is a direct children of <body> for example
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 { ... }