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/
Related
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);
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
I have a very long text and I need to hide everything except the first two paragraphs.
For various reasons I'd rather not use jquery for this site. Can this be done with css only?
I know nth-child most likely will do the trick but I'm having troubles coming up with a specific rule.
<div class="text">
<p>display</p>
<p>display</p>
<p>hide from this point</p>
<p>...</p>
</div>
This code will give you the desired result:
div.text > p:nth-child(n+3){
display:none;
}
Use
.text p {
display:none;
}
.text p:nth-child(-n+3) {
display:block;
}
The above will hide any paragraphs after the second. More on CSS nth-child here.
Yes this can be done with CSS
div p:nth-child(3){ }
div p:nth-child(4){ }
div p:nth-child(5){ }
Is this what you are looking for?
A more compatible way would be using + or ~ selectors (resp. adjacent and general sibling selectors, OK with IE7+):
.text p ~ p ~ p {
display: none;
}
If you're certain that there're only paragraphs, you can use + as well. If you've a list, a sub-heading, blockquote or whatever between 2 paragraphs then only ~ will match the paragraph that follow that non-p element.
First two paragraphs aren't preceded by two paragraphs so it doesn't match the selector rule and they're still displayed. The next ones are all preceded by two paragraphs (at least) so they'll be hidden.
edit: :nth-child() is a perfectly valid answer but it won't work with IE8.
I discovered the <details> element for html5, and that made me want to determine whether it was possible to implement a simple and reusable show/hide via css alone.
I have created a show/hide mechanism in the past for showing and hiding content by giving two elements relative positioning and one a negative z-index, and then decreasing the z-index of the front element on hover (and increasing the z-index of the back element on hover).
However, that method only works for elements that are in the same location. Are there other techniques for simulating show/hide on non-overlapping elements? e.g. a title that causes a section of descriptive text to display.
Trivial example code that I would like to be able to apply a show/hide to:
<div id='container'>
<h3 id='show-hide-trigger'>summary</h3>
<p id='show-hide-text'>Paragraph of detail text paragraph Paragraph of detail text paragraph Paragraph of detail text paragraph Paragraph of detail text paragraph</p>
</div>
And yes, I do know that jQuery exists.
there is a plethora of options based on the structure (for modern browsers).
Have a look at the
selector + selector adjacent sibling selector
selector ~ selector general sibling selector
selector selector descendant selector
selector > selector child selector
These can be combined with classes / ids / pseudo-selectors like :hover etc, and create a big list of options.
here is a small demo i made to showcase them : http://jsfiddle.net/gaby/8v9Yz/
Try this using nested divs and targets.
I'm not a CSS guru, so there may be all kinds of flaws with this, but it seems to work.
http://jsfiddle.net/NmdxC/6/
#show {display:none ; }
#hide {display:block;}
#show:target {display: block; }
#hide:target {display: none; }
CSS without the exact code is hard to visualize, but what is wrong with changing the display or visibility declarations dangling from a :hover?
a #myelement{display:none;}
a:hover #myelement{display:block;}
I problably misunderstood the question...care to add code?
First thing that springs to mind is something like:
<a class="blah" href="#">Hello<span>Test</span></a>
a.blah {position:relative}
a.blah span {position:absolute;top:50px;left:50px;display:none;}
a.blah:hover span {display:block;}
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.