I want to select the first child of a parent div, but I have some constraints: the div I want to select has a very general class name, and I don't have access to the markup to give it another class. Since it has such a general class name, if I use first-child, my changes will apply to unrelated elements on the page. It also has a sibling with the same type and class name:
<div class="parent-div">
<div class="extremely-general-class">I want to change this one</div>
<div class="extremely-general-class">And not change this one</div>
</div>
Is there a way to select only the first child of a parent div, but without using first-child? If I use
parent-div > general-class
then it will apply to both sibling divs.
Answer would be nesting, like:
grand-grand-parent-div > grandparent-div > parent-div > general-class:first-child
and so on, as long as the structure does not repeat.
Another idea which came to my mind was using :not() selector, but that's the case only if other divs u don't want to style have something in common that to-be-styled doesn't.
You can select the first child using
general-class:nth-child(1)
that is, as you asked, not using first-child
Related
I have two carousels on a page and need to style them differently. So I have this css combinator to style a child bootstrap element inside an id element...
#menuCarousel .carousel { ...
Which doesn't work as I expected. However, if I close the space like this...
#menuCarousel.carousel { ...
the styles are applied. According to W3Schools, there is meant to be a space so I'm thinking I'm doing something else wrong.
What's happening here y'all?
Thanks.
Just in case the html is important:
<div id="menuCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
First off in this case the .carousel shouldn't be necessary at all, because IDs must be unique and that alone would be sufficient to select the div.
But to get down to your question, a space between CSS selectors will select a descandant element. Removing the space means to select the element with that class.
So #menuCarousel .carousel { ... says select all elements with the class carousel that are descendants of the element with the ID #menuCarousel.
#menuCarousel.carousel { ... means select the element that has the ID menuCarousel AND the class carousel.
(And on a side note, don't use w3schools to learn CSS. Use https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors)
The id= (#) and class= (.) are applying to the same element, so I would think they would have to be combined as #menuCarousel.carousel. Otherwise it would be looking for a .carousel under a #menuCarousel, wouldn't it?
So a space indicates a nested element like this
<div id="parent" class="parent">
<div class="child"></div>
</div>
#parent .child{background-color:blue;}
The above example would make the child element blue.
However two selectors without a space is used to select an element using two different selectors on the same element. So
#parent.parent{background-color:blue;}
Would make the parent element blue in the same way as just #parent
I would like to know how to select first-child in actual scope, let me give you an example so you could understand my question correctly:
HTML:
<div class="comment commentCompany">
<div class="commentTop"></div>
<div class="commentMiddle">
Text of comment level two comment.
<div class="comment">
<div class="commentTop"></div>
<div class="commentMiddle">
Text of comment level three.
</div>
<div class="commentBottom"></div>
</div>
</div>
<div class="commentBottom"></div>
</div>
CSS that first came to my mind to affect classes commentTop, commentMiddle, commentBottom inside the commentCompany class but only in a direct scope was this:
.commentCompany .commentTop:first-child{/*affect company's .commentTop*/}
.commentCompany .commentMiddle:first-child{/*affect company's .commentMiddle*/}
.commentCompany .commentBottom:first-child{/*affect company's .commentBottom*/}
But there are two problems: :first-child is more like first class's element's type(not really a first-child of class) (would have to use nth-child), and the main problem : it affects also the nested comment - which is not company's comment - so how to get only the direct scope of commentCompany?
I would like to know CSS2 && CSS3 solution if there is any difference. Thanks! :)
You want the child combinator >, not the :first-child or :nth-child() pseudo-classes:
.commentCompany > .commentTop
.commentCompany > .commentMiddle
.commentCompany > .commentBottom
This only selects .commentTop, .commentMiddle and .commentBottom that are directly nested within .commentCompany (within your so-called "actual scope"). See this answer for an illustration.
Using the space, the descendant combinator, means you're trying to get every first child of its parent that is nested within .commentCompany. Combine that with your class selectors and you get all kinds of unexpected results.
The child combinator is part of CSS2; there is no CSS3-only solution.
I am trying to match all elements with a class of span1, span2, span3, span4 and so on.
I am using the following code, but it does not match the last child of these classes:
[class*="span"]:last-child{
margin-left:0;
}
For example if I have:
<div>
<div class="span3"></div>
<div class="span9"></div>
<div class="clearfix"></div>
</div>
The rule does not apply to the .span9 element.
last-child works on whatever the last child of the parent is. In your example, it's looking at the last div and seeing that its class is clearfix - not something with span in it - and failing to match.
If you're always clearfixing at the end and you only want to target the second-to-last child, then you could use.
nth-last-child(2)
which would, as its name suggests, target the 2nd-to-last element, regardless of what it is. View on JSFiddle.
If you're always working with divs, you could also use this code to get the same effect:
nth-last-of-type(2)
View that one on JSFiddle.
The IE support for all of these patterns (last-child, nth-last-child, and nth-last-of-type) is the same, IE9 or later.
Though, of course, you can simply get rid of the :last-child bit to target all of your span class divs, regardless of where they are within the parent:
[class*="span"]
View on JSFiddle
I would like to use css3 features to hiding previous element.
Basically,
I want to use a checkbox to hide previous sibling element without using javascript.
I have prepared a sample for entry point.
http://cssdesk.com/5zccy
Thanks
Edit:
I have changed sample.
My usecase: I want to have collapsible sections at my site. Two area separated by a simple checkbox and checking it will beautifully hide previous sibling.
I believe that using pure css will let me to reduce using javascript for this task.
You can not hide the previous elements - just the following ones with the general sibling selector
DEMO
Then you might be able to position the elements, so on the actual page the checkbox will appear after the .parent div.
There's no css selector to select the previous tag of a matched element. The closest you can get using only css it's doing that for the next element:
<input class="hider" type="checkbox" /> child
<div class="parent">
Parent
</div>
.hider:checked + * {
display:none;
}
I'm trying to have some css applied for the first div with id=div1. When I do .alldivs:first, it doesn't work. What am I doing wrong?
<div class="alldivs">
<div class="onediv" id="div1">
</div>
<div class="onediv" id="div2">
</div>
<div class="onediv" id="div3">
</div>
</div>
If you want to select the first child: .alldivs>:first-child should do the trick.
Edit:
Su edited my post to say .alldivs:first-child. This actually isn't right and I've restored it to what I originally put. The :first-child syntax selects the first child of its parent that matches the selector immediately previous to the colon. Therefore, p:first-child would match any paragraph that was the first child of its parent. Thus, .alldivs> matches any child of .alldivs and :first-child matches the first one. Please make sure you're correct before editing others posts.
What you want is:
.alldivs div:first-child
If the div has an id already, just select it by id.
#div1 {
/* yes that's all you need */
}
There's no such thing as two elements with the same id (if you're paying attention to the rules), so it doesn't matter if it's first or thirty-first.
If you're looking for the first div no matter what the id, use .alldivs :first-child
Here's some reference for further understanding:
http://www.w3.org/TR/CSS2/selector.html#first-child
.alldivs is not a selector, if you wanted to select the first div in the dom it would be div:first-child or if you wanted to select the first div with the class onediv it would be .onediv:first-child
I hope this helps you