How to show the first N elements of a block and hide the others in css?
You have a
.notarowas the first child, so you have to account for that in your:nth-child()formula. Because of that.notarow, your first.rowbecomes the second child overall of the parent, so you have to count starting from the second to the fourth:.row:nth-child(-n+4) {
display: block;
}Updated fiddle
.row {
display: none;
}
.row:nth-child(-n+4) {
display: block;
}<div class="content">
<div class="notarow">I'm not a row and I must remain visible</div>
<div class="row">Row 1</div>
<div class="row">Row 2</div>
<div class="row">Row 3</div>
<div class="row">Row 4</div>
<div class="row">Row 5</div>
<div class="row">Row 6</div>
</div>How to display the first 3 list items and hide the rest with CSS nth-child?
I do not know which browser supports this, but you can pass a formula to :nth-of-type():
ul li:nth-of-type(1n+4) {display: none;} /* should match your case */Further details on: http://www.w3schools.com/cssref/sel_nth-of-type.asp
Edit
I altered it from (n+4) to (1n+4) since the first version works but isn't valid. I use this in media queries to hide cut-down items on smaller screens.
Example:
b:nth-of-type(1n+4){ opacity:.3; }<b>1</b><b>2</b><b>3</b><b>4</b><b>5</b>Hide all except first child of an element using pure css
If you want to support IE8, then your only option is general sibling selector:
div.classa ~ .classa { display: none;}<div class="content"> <h3>abc</h3> <div class="classa">some content</div> <h3>xyz</h3> <div class="classa">more content</div> <h3>header3</h3> <div class="classa">another content</div></div>How to display and hide a div with CSS?
You need
.abc,.ab {
display: none;
}
#f:hover ~ .ab {
display: block;
}
#s:hover ~ .abc {
display: block;
}
#s:hover ~ .a,
#f:hover ~ .a{
display: none;
}Updated demo at http://jsfiddle.net/gaby/n5fzB/2/
The problem in your original CSS was that the
,in css selectors starts a completely new selector. it is not combined.. so#f:hover ~ .abc,.ameans#f:hover ~ .abcand.a. You set that todisplay:noneso it was always set to be hidden for all.aelements.Hide all div element but show first two
You can do it easily with CSS (no need of Javascript)
span:nth-child(n+4) {
display:none; // hide all spans starting from 4th child
}
ul:nth-child(n+5) {
display:none; // hide all uls starting from 5th child
}How does it work:
div // parent
|-- span // 1st span - 1st child of parent
|-- ul // 1st ul - 2nd child of parent
|-- span // 2nd span - 3rd child of parent
|-- ul // 2nd ul - 4th child of parent
|-- span // 3rd span - 5th child of parent
|-- ul // 3rd ul - 6th child of parent
|-- span // 4th span - 7th child of parent
|-- ul // 4th ul - 8th child of parent
|-- span // 5th span - 9th child of parent
|-- ul // 5th ul - 10th child of parent
...Displaying N elements hidden when hiding consequtive DOM elements
I would personally use Javascript for this. However, if you really want to stick to only CSS you can accomplish it with a few tricks:
.hide {
counter-increment: hiddenElements;
visibility: hidden;
font-size: 0px;
}counter-increment: hiddenElements;will autoincrease the value every hidden element. The catch is that this does not work with display: none; Hence, I am usingvisibility: hidden;andfont-size: 0px;as a workaround to accomplish the same or close enough..hide + div:not(.hide):before {
content: counter(hiddenElements) " element(s) hidden \A";
white-space: pre;
}This piece is writing the number of elements hidden when it encounters a hidden element followed by not hidden element. This means that there should always be a last (empty?)
<div></div>to ensure this fires..hide + div:not(.hide) + div {
counter-reset: hiddenElements;
}This resets the counter on the div after writing the number of elements.
You can see a demo below.
.hide { counter-increment: hiddenElements; visibility: hidden; font-size: 0px; }
.hide + div:not(.hide):before { content: counter(hiddenElements) " element(s) hidden \A"; white-space: pre;}
.hide + div:not(.hide) + div { counter-reset: hiddenElements;}<div id="root"> <div> 1</div> <div class="hide"> 2</div> <div class="hide"> 3</div> <div class="hide"> 4</div> <div> 5</div> <div> 6</div> <div class="hide"> 7</div> <div> 8</div> <div class="hide"> 9</div> <div class="hide"> 10</div> <div></div></div>Hide first n elements by jQuery
UPDATE
All
$ (".card").hide();does is: it sets the inline style todisplay: none;. To overwriteinline-stylesyou can use the CSSimportant!keyword and use :nth-child(-n+6) like:.card:nth-child(-n+6){ /* (-n+6) => will show the first 5 items */
display:block !important;
}See full running working code snippet
$ (".card").hide();.card {
width: 100px;
height: 100px;
background-color: orange;
margin: 5px;
}
.card:nth-child(-n+6){
display:block !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
<div class="card">7</div>
<div class="card">8</div>
<div class="card">9</div>
Related Topics
CSS - First Child Without Certain Class
CSS Specificity or Inheritance
How to Fix Unexpected Column Order in Bootstrap 4
Shorten Verbose CSS That Repeats Combinations of Elements and Pseudo-Classes
Apply CSS Style to Child Elements
How to Keep CSS Floats in One Line
How to Center a Bootstrap Div with a 'Spanx' Class
How to Add a Margin to a Table Row <Tr>
How to Have a Position: Fixed; Behaviour for a Flexbox Sized Element
Shrinking Navigation Bar When Scrolling Down (Bootstrap3)
Where Do CSS and JavaScript Files Go in a Maven Web App Project
How to Find Out When I Can Safely Drop Vendor Prefixes for a CSS3 Property
How to Style a Specific Word with CSS in an HTML Element
Object-Fit, Object-Positioning and Absolute Positioning
Using Static Files with the Django Virtual Server
Issues with "Background-Position" in "Background" Shorthand Property
Why Does This Calc() Function Not Work in Transform Scale
Highcharts Graph Width Is Incorrect When Scrollbar Is Present, in Bootstrap Fluid Span