I need to hide all but the first one h3 in a list of containers. They only contain classes.
<div class="preview">
--content
</div>
<div class="preview evaluation">
<h3>Heading</h3> <!-- should stay -->
</div>
<div class="preview evaluation">
<h3>Heading</h3> <!-- should hide -->
</div>
<div class="preview evaluation">
<h3>Heading</h3> <!-- should hide -->
</div>
I need to do this only with css.
If it's always going to have the structure in your example:
.evaluation + .evaluation h3 {display:none}
Updated answer according to the edited question...
If you want to hide only the <h3> elements, then:
.evaluation>h3 { display: none; }
.evaluation:nth-of-type(2)>h3 { display: block; }
If you want to hide the <div> elements containing <h3> elements, then:
.evaluation { display: none; }
.evaluation:nth-of-type(2) { display: block; }
Alternatively you can do...
.evaluation:not(:nth-of-type(2))>h3 { display: none; }
or...
.evaluation:not(:nth-of-type(2)) { display: none; }
Related
I am trying to display a div (.mydiv3) when another is hovered, but the div I want to display...
.mydiv1, .mydiv2, .mydiv3 {
display:none;
}
.trigger {
text-align:center;
padding:10px;
color:teal;
}
.trigger:hover{
background:red;
}
<div class="trigger">
Hover Trigger
</div>
<div class="mydiv1">
Text Content 1
</div>
<div class="mydiv2">
Text Content 2
</div>
<div class="mydiv3">
Text Content 3
</div>
Is there a way to do this with CSS or is jQuery my best bet?
You can use ~ in CSS to get the desired result. Check the snippet.
.mydiv1, .mydiv2, .mydiv3 {
display:none;
}
.trigger {
text-align:center;
padding:10px;
color:teal;
}
.trigger:hover{
background:red;
}
.trigger:hover~.mydiv3{
display: block;
}
<div class="trigger">
Hover Trigger
</div>
<div class="mydiv1">
Text Content 1
</div>
<div class="mydiv2">
Text Content 2
</div>
<div class="mydiv3">
Text Content 3
</div>
Edit : With jQuery in case elements are not siblings
$(.trigger).on('mouseenter', function(){
$('.mydiv3').show();
};
$(.trigger).on('mouseleave', function(){
$('.mydiv3').hide();
};
Hope this helps
You can use the general sibling selector for this.
.mydiv1,
.mydiv2,
.mydiv3 {
display: none;
}
.trigger {
text-align: center;
padding: 10px;
color: teal;
}
.trigger:hover {
background: red;
}
.trigger:hover~.mydiv3 {
display: block;
}
<div class="trigger">
Hover Trigger
</div>
<div class="mydiv1">
Text Content 1
</div>
<div class="mydiv2">
Text Content 2
</div>
<div class="mydiv3">
Text Content 3
</div>
With JQuery:
$(".trigger").mouseout(function() {
$(".mydiv3").hide();
})
.mouseover(function() {
$(".mydiv3").show();
});
I'm trying to put my 2 paginations at the same vertical distance of my table.
This works for the bottom part but the top part appears to be in my table-container for some reason.
CSS:
.table {
width: 100%;
max-width: none;
clear: both;
}
.table-container {
margin-top: 20px;
margin-bottom: 20px;
}
section {
margin-top: 20px;
margin-bottom: 20px;
}
.pagination {
display: inline;
}
To fix the spacing issue, change
.pagination {
display:inline-block;
}
to
.pagination {
display:inline; //or block
}
You should also wrap your .pagination in a .col-xs-12 .col-md-12 div like this. Always include the xs classes as Bootstrap is mobile first.
<div class="row>
<div class="col-xs-12 col-md-12">
<ul class="pagination">
//code
</ul>
//rest of code
</div>
</div>
Also, this
<section>
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-8 col-md-8">
//code
</div>
</section>
should be
<section>
<div class="row>
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-8 col-md-8">
//code
</div>
</div>
</section>
As the docs state
Content should be placed within columns, and only columns may be
immediate children of rows.
You have no margins on your rows. Other things are affecting it that are inside the rows. For example, you have a <div class="pagination"> is display:inline-block. If you remove that, the bottom 5px margin goes away.
I'm using a CSS layout on both html page.
I want to use the same style except I want to hide/disable other classes made for it for the second html page and still use the others on the first html page.
Situation:
class="firstClass" has the fonts and style I wanted with it but has other classes and styles that shows when I use that class.
I tried getting the other classes by adding a secondClass on the same level of the first class, then did this:
.firstClass .secondClass, .dontWant1 .dontWant2 {
display:none;
}
Problem is it also hides on the first html.
You can have multiple classes on one element. That said, you add classes on one page that you dont add on the other page, to show elements on page 1 and hide them on page 2.
You can have that one class show or dontshow to define what elements are visible.
Then you add a class to define your styles.
HTML/CSS:
.greenbox {
background-color: green;
width: 100px;
height: 100px;
}
.redbox {
background-color: red;
width: 20px;
height: 20px;
}
.show {
display: block;
}
.dontshow {
display: none;
}
<div class="greenbox">
<div class="show">
<div class="redbox">
<!-- red box visible -->
</div>
</div>
<div class="dontshow">
<div class="redbox">
<!-- red box not visible -->
</div>
</div>
<div class="dontshow redbox">
<!-- red box not visible -->
<!-- exactly the same outcome as the above without the wrapping div -->
</div>
</div>
You can try this:
html:
<div class="main">
content goes here.
</div>
<div class="main active">
content goes here.
</div>
css:
.main {
background-color:yellow;
display:none;
}
.active {
display:block; OR display:block !important;
}
I want to create a grid with two columns whose width will be equal. My base HTML code looks like this:
<div class="linkgrid">
<div class="gridentry">
Loooooooooooooong
</div>
<div class="gridentry">
Short
</div>
<div class="gridentry">
Meeeedium
</div>
</div>
In this example, the first and the second gridentry should lie in the the first row. The thrid gridentry should lie in the second row. All gridentrys should have the same width.
~~~
I came up with a solution that uses a CSS table. However, to make sure the row "breaks" after every second cell, it currently requires non-semantic elements to force these "row breaks":
.linkgrid {
display: table;
border-spacing: 2px;
table-layout: fixed;
width: 50%;
}
.gridentry {
display: table-cell;
background-color: red;
padding: 5px;
text-align: center;
}
.gridentry a {
color: white;
}
.THIS-SHOULD-BE-A-PSEUDO-ELEMENT-BEFORE-EVERY-ODD-CHILD {
/* I imagine a selector that looks somewhat like this:
.linkgrid .gridentry:nth-child(odd):outsidebefore {
*/
display: table-row;
}
<div class="linkgrid">
<span class="THIS-SHOULD-BE-A-PSEUDO-ELEMENT-BEFORE-EVERY-ODD-CHILD"></span>
<div class="gridentry">
Loooooooooooooong
</div>
<div class="gridentry">
Short
</div>
<span class="THIS-SHOULD-BE-A-PSEUDO-ELEMENT-BEFORE-EVERY-ODD-CHILD"></span>
<div class="gridentry">
Meeeedium
</div>
</div>
Is there a way to remove my <span>s from my HTML (because they do not have any semantics) and use a clever CSS selector that adds them as pseudo elements at the right positions instead?
I do know that :before will "create" a pseudo-element within the selected element. Is there a non-JavaScript, CSS-only way to add a pseudo-element outside of the selected element like required in this example?
Another edit: For all those familiar with the Chrome developer tools, I want my result to look somewhat like this in the DOM tree:
<div class="linkgrid">
::outsidebefore
<div class="gridentry">
Loooooooooooooong
</div>
<div class="gridentry">
Short
</div>
::outsidebefore
<div class="gridentry">
Meeeedium
</div>
</div>
...where the ::outsidebefore pseudo-elements should have the CSS property display: table-row;.
Update 2016-01-04: While this specific question remains unanswered, my original problem was solved another way: https://stackoverflow.com/a/34588007/1560865
So please only post replies to this question that answer precisely the given question.
Display Level 3 introduces display: contents:
The element itself does not generate any boxes, but its children and
pseudo-elements still generate boxes as normal. For the purposes of
box generation and layout, the element must be treated as if it had
been replaced with its children and pseudo-elements in the document
tree.
Then, you can:
Wrap each cell in a container element
Set display: contents to those containers
Add ::before or ::after pseudo-elements to those containers
The result will look like as if the pseudo-elements were added to the cell, but outside it.
.wrapper {
display: contents;
}
.wrapper:nth-child(odd)::before {
content: '';
display: table-row;
}
.linkgrid {
display: table;
border-spacing: 2px;
table-layout: fixed;
width: 50%;
}
.wrapper {
display: contents;
}
.wrapper:nth-child(odd)::before {
content: '';
display: table-row;
}
.gridentry {
display: table-cell;
background-color: red;
padding: 5px;
text-align: center;
}
.gridentry a {
color: white;
}
<div class="linkgrid">
<div class="wrapper">
<div class="gridentry">
Loooooooooooooong
</div>
</div>
<div class="wrapper">
<div class="gridentry">
Short
</div>
</div>
<div class="wrapper">
<div class="gridentry">
Meeeedium
</div>
</div>
</div>
Note display: contents is not widely supported yet, but works on Firefox.
The most straightforward way is using an actual table structure. That is, one table divided into rows, in which the entries sit.
Also, you had width:50% on the table, but I believe from the question text that you meant every table cell to be 50% wide, rather than the table taking up 50% of the window width; so I corrected that.
.linkgrid {
display: table;
border-spacing: 2px;
}
.gridrow { /* new */
display: table-row;
}
.gridentry {
display: table-cell;
background-color: red;
padding: 5px;
text-align: center;
width: 50%; /* moved */
}
.gridentry a {
color: white;
}
<div class="linkgrid">
<div class="gridrow">
<div class="gridentry">
Loooooooooooooong
</div>
<div class="gridentry">
Short
</div>
</div>
<div class="gridrow">
<div class="gridentry">
Meeeedium
</div>
</div>
</div>
Would it be possible, with css only, that if I hover over the .post element the options show. If not I want it to be hidden.
<div class="post">
<div class="author">
Yxvasznalskje
</div>
<div class="options" style="display:none;">
Report - Delete
</div>
<p>Message</p>
</div>
Remove the inline display:none; and use .post:hover .options to select the inner div when the parent div is hovered:
.options {
display: none;
}
.post:hover .options {
display: block;
}
See DEMO.