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
Related
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
This question already has answers here:
How can I select the last element with a specific class, not last child inside of parent?
(8 answers)
Closed 8 years ago.
I'm trying to target the div with class "text" inside the last div with class "done".
For example:
<div class="installSteps">
<div class="insProgress done">
<div class="icon">Img</div>
<div class="text">Prep</div>
</div>
<div class="insProgress done">
<div class="icon">Img</div>
<div class="text">Check</div> < trying to target this
</div>
<div class="insProgress upcoming">
<div class="icon">Img</div>
<div class="text">Configure</div>
</div>
<div class="insProgress upcoming">
<div class="icon">Img</div>
<div class="text">Go!</div>
</div>
</div>
I tried all kinds of combinations of last-child and last-of-type to no avail. I really thought this would work:
.installSteps .done:last-child .text
Any way to do it?
EDIT: Adding some additional details...
The "done" class replaces the "upcoming" class as the processes complete. So it starts with all "upcoming" and then the first one gets "done" then the second one also has "done", then the third, then the fourth... (so I can't target a specific nth child)
So Im looking for a way of targeting the last instance of "done" wherever that may be...
Sorry for not specifying this earlier. i wish I could add an additional class but for now I am unable to...
Provided the hierarchy doesn't change, this works for me:
.installSteps div:nth-child(2) :last-child {
color:red;
}
jsFiddle example
If the hierarchy will change, then you're probably going to have to use JavaScript as you can't target classes of elements with CSS pseudo-classes, only elements.
You could do this
.installSteps .done:not(:first-child) .text {
color: red;
}
Will affect anything after first one.
JS Fiddle Demo
Try nth-child() applied to the .done class.
Example
.done:nth-child(2) .text{
background:red;
}
DEMO
http://jsfiddle.net/a_incarnati/ntzj5wte/
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 have this html code:
<div id="mydiv">
[other divs]
<div data-day="1">content</div>
[other divs with data-day attribute]
<div data-day="random">content</div>
[other divs]
</div>
I wanna select the last element in the mydiv that has data-day attribute. How can I do this?
#mydiv div[data-day]:last-child
I tried this, but it didn't work.
There is no real css-only solution to your question. With Javascript you could do this, I guess.
last-child doesn't work, because it only works for the last element of its parent.
In your case: Only if it was the last element with no other element following it.
last-of-type doesn't work, because it only selects by types, not attributes or classes.
Workaround:
Add a class to the last element with a certain attribute by hand:
<div id="mydiv">
<div></div>
<div data-day="1">content</div>
<div></div>
<div data-day="random" class="last-data-day">content</div>
<div></div>
</div>
I have done a quick google search and found the following links useful:
CSS Tricks
Stack Overflow (User with same issue)
The answer is:
:last-child only works when the element in question is the last child of the container, not the last of a specific type of element. For that, you want :last-of-type
http://jsfiddle.net/C23g6/3/
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