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.
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/
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
Why does every row have a red background when I'm using nth-child(odd)?
<div id="ClientTable">
<div class="ClientTableHeaderRow"><span class="ClientTableHeaderColumn">Full Name</span></div>
<div class="ClientTableRow"><span class="ClientName">Umpa Beeson</span></div>
<div class="ClientTableRow"><span class="ClientName">Umpa Beeson</span></div>
<div class="ClientTableRow"><span class="ClientName">Umpa Beeson</span></div>
<div class="ClientTableRow"><span class="ClientName">Umpa Beeson</span></div>
</div>
#ClientTable {position: relative;
display: table;
margin-top: 20px;
width: 100%;}
#ClientTable:nth-child(odd) {background-color:#FF0000;}
.ClientTableHeaderRow, .ClientTableRow {display: table-row; }
.ClientTableHeaderRow {font-weight: bold;}
.ClientTableHeaderRow span, .ClientTableRow span {display: table-cell;}
View the jsFiddle
The expected result is every other row to be red. Instead, as you can see, every row is red.
P.S. Umpa is my cat.
You should be setting ClientTableRow class, like so:
.ClientTableRow:nth-child(odd) {background-color:#FF0000;}
Demo: http://jsfiddle.net/gMR2K/4/
EDIT
As also explained by animuson, you need to apply the :nth-childselector to the element itself, not the parent. The name of the selector can lead one to think it will apply the styling to the children of the selected element, when actually the style is applied to n-th child of the selected element, across the whole document.
Also, if you're worried about browser compatibility you can also do this with JavaScript. Here's an example using jQuery.
$(document).ready()
{
$(".ClientTableRow:nth-child(odd)").addClass("redBackground");
}
Demo: http://jsfiddle.net/gMR2K/10/
As stated here by BoltClock: jQuery "polyfills the :nth-child() selector for older browsers anyway."
nth-child applies to the actual element, not its children. #ClientTable is the 1st (and only) child of its parent. Therefore, it has a red background. You need to be applying the nth-child to the elements inside that division.
Is this the result you want?:
http://jsfiddle.net/gMR2K/6/
#ClientTable div:nth-child(odd) {background-color:#FF0000;}
and that only works in the better browsers. IE 8 and below don't get it. But, you can use jQuery to make it work everywhere or (painfully) add a class to the odd rows.
In my case I made a small mistake
.someclassA .someclassB: nth-child(odd){
You can see as above there is one space between someclassB: and nth-child. thats it.. By deleting that space it started working :)
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;}
What is the syntax for selecting the first element with a certain class? Please specify whether that method of selection is part of CSS3 or CSS2.1.
If you need the first element with a certain class among its siblings, you can use
.myclass {
/* styles of the first one */
}
.myclass ~ .myclass {
/* styles of the others (must cancel the styles of the first rule) */
}
Don't try to use .myclass:not(.myclass ~ .myclass) to do this in only one rule, it won't work since :not() only accepts simple selectors in the parentheses.
If you want the first .myclass in the whole document, there is no way to do it with CSS alone.
The :nth-of-type() or :nth-child() approaches posted are wrong, even if they coincidentally happen to match the elements you want in your page.
Browser support of sibling selector (~): IE7+ and all others.
This problem sucks as bad as the solutions. IMO you should just give the first element a class of .first{} programmatically.
Try this
.testparent .test:first-child {
color: red;
}
<div class="testparent">
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
</div>
the first div 'test' has red color only.
.class-name:first-of-type {
⋮ declarations
}