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);
Related
I would like to apply margin-bottom, only if there is another paragraph directly after the other one. I know there is a way to select the first paragraph if the next one is also a paragraph, but I unfortunately forgot how.
I thought with the plus symbol: #blog .blog-post .entry p+p.
But this will result in add margin-bottom to the last paragraph.
You can use nth-child. For more details see here: https://css-tricks.com/how-nth-child-works/
To add more detail, badically you would do something like this:
p:nth-child(2) { }
Or apply it to a div if the 2nd p is a child of div. More details on child selection
When E+F selector used. The target is F. Just add margin-top instead of margin-buttom
I would use :first-child with the sibling selector +. Optionally use :not() if you want to prevent the last paragraph from being selected: :not(:last-child). Most of these CSS features fall under CSS3 Selectors, and the only browser that you might have issues with is IE8 (if you're even supporting it).
Here's an example:
<section>
<p>One</p>
<p>Two</p>
<p>Three</p>
</section>
section p:first-child + p {
background-color: lime;
}
https://jsfiddle.net/wo26k1vb/
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
How to target only the first and the last match of a selector in CSS?
Example (This is only an example, general solution needed) to illustrate my requirement:
<style>
main>article p:first { /* to select the first p anywhere under article */ }
main>article p:last { /* to select the last p anywhere under article */ }
</style>
<main>
<article>
<section>
<p>SHOULD be selected as first element</p>
<p>SHOULD NOT be selected</p>
</section>
<ul>
<li><p>SHOULD NOT be selected</p></li>
<li><p>SHOULD NOT be selected</p></li>
</ul>
<p>SHOULD be selected as last element</p>
</article>
</main>
The DOM under <article> might have <p> as children. <p>s (including the first and the last ones) are not required to be direct children of <article> though and can have any set of parents. Are there any not-necessarily-elegant CSS rule to select only the first and the last <p>?
JavaScript as indicated by tags of this question is not allowed, but for means of demonstration purposes… following code does exactly what I want to achieve:
var els = document.querySelectorAll('main>article p'),
first = els[0],
last = els[els.length - 1];
Now what I've already tried using and what did not work out for me:
any selector combination with :first-child, :last-child
There's no guarantee of any structure which one could use to make a fail-proof selector which would select only the first and the last p which is a (not-necessarily-direct) chilren of <article>.
any selector combination with :first-of-type, :last-of-type
Because this would also select first/last article *>p
In particular I've tried main>article p:first-of-type and main>article p:first-of-type.
overriding with ~ and/or +
EDITS
The DOM will not necessarily will be the same as given in example – it's just an example after all.
Both first and last <p> is a children of article, but not always a direct children. That means there may be other elements between thne first/last <p> and parent <article>.
Just remembered jQuery. $('main>article p:first') and $('main>article p:last') from jQuery would do exactly what I want, but I'm restricted to CSS.
You can use the first-of-type/last-of type you can select the first/last child of a parent with an element type
p:first-of-type
or
p:last-of-type
That will select the first or last paragraph element of that is a child of the parent element
p:first-child
or
p:last-child
Similar to last-of-type
W3 schools has some good information on this also
http://www.w3schools.com/cssref/css_selectors.asp
Unfortunately it is not possible to do what you want without using JavaScript (as shown in your original question). There is currently no global nth-of-class selector available. I believe it is because the styles for elements are calculated in one pass. There's no real way for the selectors to be aware of elements in other branches of the DOM tree.
Much like how you can use the adjacent sibling (+) and general sibling (~) combinators to apply styles that come after a certain selector, but not before it.
this solve the issue:
article section > p:first-child {
color: red;
}
article > p:last-child{
color: red;
}
FIDDLE
or this:
main p:first-child {
color: red;
}
main article > p:last-child{
color: red;
}
article > ul p{color:black !important;}
FIDDLE
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
I have a div#content with many div.item inside it.
When using :last-child to make the last div.item with no border-bottom, it's OK.
But, as the content is dynamically appended using php and mysql results I'm using a conditional pagination table that will be appended after the last div.item which means at the bottom of the div#content. Here will be the problem as the CSS :last-child will not recognize the last div.item as the last-child.
my CSS looks like:
div#content div.item:last-child {
border-bottom: none;
}
as you can see I'm defining that the last child id such a div.item
Any suggestions please. thanks in advance.
!!!!! Please note that the problem is not in the fact that the content is dynamic but in the fact that the CSS :last-child doesn't recognize the div.item as the last child but the last element in the div#content despite telling the CSS that it's:
div#content div.item:last-child
One possibility I can think of is that you're appending elements that aren't <div>s and/or don't have the item class. Check the output of your PHP/MySQL script and see if there are any non-div.item elements beside (in DOM terms) the div.item elements.
Such elements will not match the selector:
div#content div.item:last-child
That selector finds only <div>s with item class, that are the last child of div#content.
Here's an example.
Before appending
<div id="content">
<div class="item"></div> <!-- [1] Selected -->
</div>
After appending
<div id="content">
<div class="item"></div> <!-- [2] Not selected -->
<div></div> <!-- [3] Not selected -->
</div>
What's being selected, what's not, and why?
Selected
This <div> element has the item class, and it's the last child of div#content.
It exactly matches the above selector.
Not selected
This <div> element has the item class, but is not the last child of div#content.
It doesn't exactly match the above selector; however, it can possibly match either one of these selectors:
/* Any div.item inside div#content */
div#content div.item
/* The last div.item child of its parent only */
div#content div.item:last-of-type
Not selected
Although this <div> element is the last child, it does not have the item class.
It doesn't exactly match the above selector; however, it can possibly match this:
/* Any div that happens to be the last child of its parent */
div#content div:last-child
It seems appending items dinamically does not make the layout engine re-run some CSS rules like :last-child.
I think you can re-read/reload CSS file making the rule apply. Don't know, it's a guess.
Another possibility is dinamically set the styles.
EDIT: It seems you have a CSS x Browser problem.
Check this out: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Selectors
you could use javascript to refresh the CSS only. See here: http://paulirish.com/2008/how-to-iterate-quickly-when-debugging-css/
Another approach would be to use a library like jQuery and fire this line of script every time you add new divs. (or maybe you're using another js library, as you say that you are dynamically adding divs to the page)
$('div#content div.item:last-child').css('borderBottom','none');
you might need to reset borders before you do the above though. i.e. the previous 'last' div may still not have the border bottom. so reset all borders then fire the script to remove the border for the last one.