Imagine I have a div with a bunch of paragraphs nested inside, I want to select the second, fourth and seventh paragraph element.
I know you can use nth-child to select a nested element, but works for one only. This won't work;
nth-child(2,4,7)
How do I select multiple specific elements. Is this possible?
Thanks,
How about something like this:
p:nth-child(2), p:nth-child(3), p:nth-child(8)
{
background:#000;
}
read this article i hope this will help you :- http://css-tricks.com/how-nth-child-works/
you can use this method like mentioning below css so this will select every second paragraph.
p:nth-child(2n) {
background:red;
}
http://tinkerbin.com/8KzrmwdB
Related
I can use the following to select all divs that are not the first div among their siblings.
div:not(:nth-of-type(1))
Is there anyway I can select all div's that are not the first two?
You can use sequential :not pseudos, so: div:not(:nth-of-type(1)):not(:nth-of-type(2))
http://jsfiddle.net/akm4qnds/
OR
Even better, you can use sibilings selectors... Like div:condition ~ div that will select every sibiling divs that are after the one with the condition.
So: div:nth-of-type(2) ~ div will select every div that comes after the second child.
http://jsfiddle.net/akm4qnds/1/
You can use multiple :not to exclude multiple items
Example
div:not(:nth-child(1)):not(:nth-child(2)) {
background: blue;
}
DEMO
It can even be dome more clear, without specifically writing out the not pseudo selector per element.
U can do this the get the same results:
:not(:nth-of-type(-n+2)) {
}
:not(:nth-child(-n+2)) {
}
I know its a late answer:P but maybe still usefull to somebody
I have a CSS rule that goes like this:
div#tabstripProjectSettings.tabstrip-inner-tabstrip.k-widget.k-header.k-tabstrip div#tabstripProjectSettings-1.k-content.k-state-active,
div#tabstripProjectSettings.tabstrip-inner-tabstrip.k-widget.k-header.k-tabstrip div#tabstripProjectSettings-2.k-content.k-state-active,
div#tabstripProjectSettings.tabstrip-inner-tabstrip.k-widget.k-header.k-tabstrip div#tabstripProjectSettings-3.k-content.k-state-active,
div#tabstripProjectSettings.tabstrip-inner-tabstrip.k-widget.k-header.k-tabstrip div#tabstripProjectSettings-4.k-content.k-state-active,
div#tabstripProjectSettings.tabstrip-inner-tabstrip.k-widget.k-header.k-tabstrip div#tabstripProjectSettings-5.k-content.k-state-active
{
/* CSS Properties */
}
Is it possible to make it shorter? Because I don't know how many elements with the ID #tabstripProjectSettings-x will it be there.
Here's an example for this:
http://jsfiddle.net/AVF3J/
Maybe you should try something like this:
div#tabstripProjectSettings.tabstrip-inner-tabstrip.k-widget.k-header.k-tabstrip div[id^="tabstripProjectSettings-"].k-content.k-state-active {
/* css here */
}
The part div[id^="tabstripProjectSettings-"] says: select all divs whose ids start with tabstripProjectSettings-.
Though haven't tested it on your mega huge selector (:D), it should work. Can you bundle a fiddle though?
Don't style them using an ID, style them using a class.
Using an id (e.g. id="example" in html matched with #example in the css) will only style elements with that specific ID. You can style multiple ID items using the sort of code you have above; there's nothing technically wrong with it.
However, if there are several elements that you want to all have the same style, a much easier way would be to give them a class. In html this means putting class="example" into the element, and matching it with .example in the css. Thereafter, every element you want to have that style, just give it that class.
You can also combine multiple classes and IDs.
In my wordpress site, the numbers of my div ids for "chimp-button-*" keep changing automatically. Rather than needing to add a new div id each time it changes, is there a way to use a wildcard to capture all div ids starting with chimp-button?
Here's what I have:
#chimp-button-7, #chimp-button-6, #chimp-button-5, etc... {
position:relative !important;
}
I'm wanting to do something like this...
#chimp-button-* {
position:relative !important;
}
Sorry, I'm a CSS noob.
You can select these elements with an attribute selector, so [id^="chimp-button-"] would work, however it would also be a poor approach to managing styles.
Instead of trying to select elements based on the an ID pattern, give all these elements a common class attribute, such as class="chimp-button", you can then select all the elements with .chimp-button.
This is called to attribute-selectors
Used to this
[id^="chimp-button-"],
[id*="chimp-button-"]{
// here your style
}
More info attribute-selectors/
What you need is called attribute selector. An example, using your html structure, is the following: div[class*='chimp-button-'] {color:red }
In the place of div you can add any element, and in the place of class you can add any attribute of the specified element.
See demo
See here and here for more information on CSS attribute selectors.
I am facing issues writing a slightly complex CSS selector.
I want to select a div with "class" containing 'btn-group', but not 'open'
So I have something like;
div[class*='btn-group']:not([class='open'])
Now the issue is that there are around 5-6 elements that match the above condition. But I want to select the first out of that. How do I do the same?
Would prefer doing using nth-child..
What about: div[class*='btn-group']:not(.open):first-of-type?
[Edit]: This trick does not work if you have <div class="btn-group open"></div> as the first child... (as explained by #Jukka below) a JS-based trick will work, tho:
$("div[class*='btn-group']").not(".open").first()
.css({...});
// OR add a class
// .addClass("class");
http://jsfiddle.net/teddyrised/LdDCH/
try like this
div [class*='btn-group']:not([class='open']):nth-child(1) {
color:Red;
}
Using this you can select first child
Working Fiddle
You cannot. CSS selectors can’t be used that way. But if you provide a more specific HTML context (including containers for the div elements and a description of a pattern that the markup follows), there might be a way that works under some assumptions.
In particular, :nth-child and :nth-of-type only test whether the element is the *n*th child, or the *n*th child of its kind, of its parent. It does not take e.g. classes into account; the is no “nth of a class” selector.
I have a HTML structure:
<div class="home-view">
<div class="view-header">Header</div>
<div class="view-content">Content</div>
</div>
And I would like to style the first item of home-view. In this case, it's view-header, but sometimes there is no header and the view-content will be the first item in home-view.
The first item in home-view should get some styles.
I've been trying with .home-view:first-child, but no luck there since it's children have different class-names (I think). Any advice?
.home-view > *:first-child { background-color:red; }
...will select the first sub element of any type that is a first child.
Since both elements are divs you could specify the first div within .home-view
.home-view div:first-child{
background: red;
}
Working Example: http://jsfiddle.net/7cNZS/
.home-view > div:first-of-type{ background-color:red; }
The :first-of-type selector matches every element that is the first child, of a particular type, of its parent.
More....
You responded to the previous answers that you only wanted the direct child elements to be styled, and not child elements below them.
So I'll adapt those answers and give you an answer that meets that requirement:
.home-view>div:first-child{
background: red;
}
The difference here is the > selector between .home-view and div instead of a space. This forces it to only select immediate children of .home-view, and not divs that are further down the tree, whereas a space between them would tell it to select any matching child elements down the tree.
Hope that helps.
Try this:
$('.home-view').children().eq(0);