I can't get my head round why this first-child selector isn't working.
I've created a jsFiddle to show my code: http://jsfiddle.net/wDTvV/
Basically the following CSS rule isn't working:
.form-item-products:first-child {
display: none;
}
Does anyone know why? Have I screwed up my syntax for using pseudo selectors?
Thanks guys,
Rick
The first child is not a .form-item-products, but rather #product-guide-wrapper, so your selector won't match.
As SLaks has mentioned, there isn't a :first selector in CSS like jQuery's. Given your structure, however, you should be able to use #product-guide-wrapper + .form-item-products instead.
:first-child can only match the first child element of its parent.
In your example, that's #product-guide-wrapper.
Unlike jQuery, CSS does not have a :first selector.
Related
Is it possible to hide an element via css from HTML markup "data-post-id="226""? I'm in wordpress and on the portfolio I need to hide an element on several posts, but since it's automated I can't do it manually.
I tried .data-post-226 { display:none; } since that works for page and post id's, but this is a little different since the id is in quotes.
.classname only works for classes, not for other attributes. You can select by attribute with square brackets, though.
[data-post-id="226"] will work as a selector to style the element that das data-post-id="226" as an attribute.
You want to use the attribute selector here (More info: https://css-tricks.com/attribute-selectors/)
In your case, this is what you need:
[data-post-id="226"] {
display: none;
}
What you are looking for is attribute selector.
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
If you are new to this, I would recommend you reading about various ways you can select your elements using CSS selectors - https://www.w3schools.com/cssref/css_selectors.asp
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.
Does anyone know if it's possible to define a CSS selector that selects the first image within a div, but only if it's the first child within the div.
In jQuery I would use a comparison something like this...
if ($('#div img:first-child') == $('#div>*:first-child')) {
...
}
By definition of "first-child", the selector (assuming your div had an id of div)
#div img:first-child
already does that. First image of any div is
div img:first-child
However, as BoltClock's answer points out, the child selector is needed if you may have img elements nested deeper in the div.
You don't need to do a comparison in jQuery if all you want to do is select that img. Just combine your two selectors like so:
#div > img:first-child
This works in both jQuery and CSS.
It's a simple CSS selector:
#div:first-child img:first-child
What I want to do is something like:
#div_id > .some_class
{
}
I don't want to change the class everywhere. I only want to change the class if it in that particular div.
Is ther some other way to do that same thing?
You've already stumbled upon the answer yourself:
#div_id > .class {
/* CSS magic */
}
This selects .class if it is the direct descendant of #div_id. For all descendants regardless of depth, use the selector #div_id .class instead.
See also this JSFiddle.
Your question already contains the child combinator CSS selector and will target the elements with class .some_class that are children of the element with id div_id, so if you have only one <div> with an id of div_id then it will only target the child elements with the class some_class. So it should work as already expected, except in IE6 of course which does not support that selector natively.
If you want to select grandchildren, use the descendant combinator.
Child combinator body > p
Descendant combinator body p
You essentially have the answer there. If you want to modify all classes with in a div then the selector would be div#id .this_class. If it's just one instance of the class inside the div (say you have a div called 'test' with three divs with a class of 'test_class' then you could either use the :nth-child() selector or the :first-of-type selector.
Your code looks fine to me. Note that the > operator will only affect the children of the DIV not any lower decendants (i.e. grandchildren). Remove the > to affect everything inside the DIV with the class .some_class.
I was wondering if its possible to "embed" pseudo-classes inside of each other. I have a hunch that you can't, but I just want to make sure I don't just have syntax wrong.
Here's an example of what I'm trying to do:
p.description { margin-bottom: 20px; }
Given that style, if you only want that to happen on matches that aren't the LAST p.description, is there anyway to do the following?
p.description:not(p.description:last-child)
Naturally, I'd have two styles, like so:
p.description { margin-bottom: 20px; }
p.description:last-child { margin-bottom: 0; }
...but that seems wasteful if it can be done in a single line.
Thanks a lot!
Yes, to the title of your question:
p.description:not(:last-child)
No, to the CSS example in the body of your question
p.description:not(p.description:last-child)
The spec says:
The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument.
A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
Yes, p.description:not(:last-child).
Yes you can, in webkit it works fine. I use this for example:
.middlenav:not(:nth-last-child(1))
Works great.
so p.description:not(:last-child).
should too