I want to be able to use the CSS hover element on each specific element within the div to affect each respective span element aka hovering on "something1" should reveal "text1" and so on.
Is it possible to accomplish this without adding a bunch of div's?
span {
display: none;
}
.something1:hover .text1 {
display: block;
}
<div class="container">
<i class="something1"></i>
<i class="something2"></i>
<i class="something3"></i>
<i class="something4"></i>
<span class="text1">Show 1</span>
<span class="text2">Show 2 </span>
<span class="text3">Show 3</span>
<span class="text4">Show 4</span>
</div>
You could achieve this by using the CSS ~ general sibling selectors like this:
The ~ combinator separates two selectors and matches the second
element only if it is preceded by the first, and both share a common
parent. - Mozilla MDN
span {
display: none;
}
.something1:hover ~ .text1 {
display: block;
}
<div class="container">
<i class="something1">Something 1</i>
<i class="something2"></i>
<i class="something3"></i>
<i class="something4"></i>
<span class="text1">Show 1</span>
<span class="text2">Show 2 </span>
<span class="text3">Show 3</span>
<span class="text4">Show 4</span>
</div>
Select all span tags starting with "textx" class:
span {
display: none;
}
.something1:hover ~ span[class*="text"] {
display: block;
}
<div class="container">
<i class="something1">Something 1</i>
<i class="something2"></i>
<i class="something3"></i>
<i class="something4"></i>
<span class="text1">Show 1</span>
<span class="text2">Show 2 </span>
<span class="text3">Show 3</span>
<span class="text4">Show 4</span>
</div>
Related
I want to have each text have a different color so I used a multiple span classes to set the color in css. I also want the text to have line breaks so I used div. This fiddle shows the result I want but the div tags used for the line breaks creates a large gap. Is there another way to have line breaks with multiple span classes?
Fiddle: https://jsfiddle.net/nh7vswco/
<pre id="info">
<div class = "fact-card">
<span class="animal"> animal</span>
<span class="colon"> : </span>
<span class="animal-name">tiger</span>
<span class="comma">,</span>
</div>
<div class = "fact-card">
<span class="animal"> species</span>
<span class="colon"> : </span>
<span class="animal-name">Mammal</span>
<span class="comma">,</span>
</div>
<div class = "fact-card">
<span class="animal"> type</span>
<span class="colon"> : </span>
<span class="animal-name">carnivore</span>
<span class="comma">,</span>
</div>
Result:
Each word and colon should have a different color.
animal : tiger,
species : mammal,
type : carnivore,
This fiddle has the result Fiddle: https://jsfiddle.net/nh7vswco/ but I would like to remove the gaps from the div tag.
1- There are many ways to make a line break like so: <br> or line-break CSS property.
2- To remove the gaps from the div tag. we can use the line-height: 0%;
<style>#info {
text-align: center;
padding-left: 20px;
padding-right: 20px;
}
.colon {
color: #cc7832;
}
.animal-name {
color: #2587be;
}
.animal {
color:#9473a5;
display: block;
}
.fact-card{
display: flex;
line-height: 0%;
}
.span {
font-family: Arial;
}
<pre id="info">
<div class = "fact-card">
<span class="animal"> animal</span>
<span class="colon"> : </span>
<span class="animal-name">tiger</span>
<span class="comma">,</span>
</div>
<div class = "fact-card">
<span class="animal"> species</span>
<span class="colon"> : </span>
<span class="animal-name">Mammal</span>
<span class="comma">,</span>
</div>
<div class = "fact-card">
<span class="animal"> type</span>
<span class="colon"> : </span>
<span class="animal-name">carnivore</span>
<span class="comma">,</span>
</div>
</pre>
This issue is actually due to the side-effects of using the pre tag. The additional spacing you have in between the divs inside your pre tag are being interpreted as line breaks as that is what pre is meant to do. If you do not want this extra spacing, eliminate the extra white space (line breaks, spaces, etc.) you have.
<pre id="info"><div class = "fact-card">
<span class="animal"> animal</span>
<span class="colon"> : </span>
<span class="animal-name">tiger</span>
<span class="comma">,</span>
</div><div class = "fact-card">
<span class="animal"> species</span>
<span class="colon"> : </span>
<span class="animal-name">Mammal</span>
<span class="comma">,</span>
</div><div class = "fact-card">
<span class="animal"> type</span>
<span class="colon"> : </span>
<span class="animal-name">carnivore</span>
<span class="comma">,</span>
</div>
I have a sequence of span elements. I need for them to display inline until an element is reach that should "wrap". The elements that follow the "wrapped" element should continue displaying inline from there. To put it another way, I want an element to display as if it was set to block with regard to the content that precedes it, but display as if it was inline with regard to the content that follows it. Consistent with performing a cr/lf.
The solution must be based on styles only. It is preferable that the only styling change be made to the "startWord" style in the sample code.
The sample below is what I currently have. Word 1, Word 2, and Word 3 should display inline, as they do. Word 4 should display down the page below Word1, as it does. Word 5 and Word 6 display down the page from Word4 due to Word4 display being set to block, but I want them to display immediately following Word4 as if Word4 display was inline or inline-block.
Any assistance would be appreciated.
<style>
.word {
border:1px solid steelblue;
}
.startWord {
border:1px solid red;
display:block; // I want something else here that allows content to display inline after it.
}
</style>
<div>
<span class="word">Word 1</span><span class="word">Word 2</span><span class="word">Word 3</span><span class="startWord">Word 4</span><span class="word">Word 5</span><span class="word">Word 6</span>
</div>
If you're able to edit the html, add a <br/> before <span class="startWord">.
If not, you can add a line break as a CSS psuedo element (as per https://stackoverflow.com/a/17048164/573718), for example before every span.startWord:
<style>
.word {
border: 1px solid steelblue;
}
.startWord {
background: red;
}
.startWord:before {
content: '\A';
white-space: pre;
}
</style>
<div>
<span class="word">Word 1</span>
<span class="word">Word 2</span>
<span class="word">Word 3</span>
<span class="word startWord">Word 4</span>
<span class="word">Word 5</span>
<span class="word">Word 6</span>
</div>
You could do that using float and clear, as I did below:
.word {
float: left;
}
.startWord{
border: 1px solid red;
float: left;
clear: left;
}
.startWord + .word {
/* here any styles for the element which follows the wrapped element could go*/
}
<div>
<span class="word">Word 1</span><span class="word">Word 2</span><span class="word">Word 3</span><span class="startWord">Word 4</span><span class="word">Word 5</span><span class="word">Word 6</span>
</div>
If needed, you can add width: 100% to .startWord to make it full width like a block.
With the following HTML:
<div>
<span class="something">...</span>
<span class="something">...</span>
<span class="something">...</span>
</div>
<article>
<span class="something">...</span>
</article>
I want to find the first .something. How would I do this?
You can't achieve this with only CSS. However, JavaScript's document.querySelector can be used to obtain the first element on the page matching a selector.
const first = document.querySelector('.something');
first.style.backgroundColor = "dodgerblue";
<div>
<span class="something">...</span>
<span class="something">...</span>
<span class="something">...</span>
</div>
<article>
<span class="something">...</span>
</article>
In order to affect pseudo elements, you can add a class to the element found with document.querySelector and add another style declaration in your CSS.
const first = document.querySelector('.something');
first.classList.add("first");
.something.first:after {
content: "I'm the first one!";
color: dodgerblue;
}
<div>
<span class="something">...</span>
<span class="something">...</span>
<span class="something">...</span>
</div>
<article>
<span class="something">...</span>
</article>
It's not possible to achieve this purely with CSS. It would have been possible if all the elements with the .something class would have had the same parent (see this solution). But since they are spread over multiple parents this won't work.
You can use jQuery for this which has a :first selector:
$( ".something:first" ).css( "color", "red" );
div, article {
padding: 1em;
border: 1px solid silver;
margin-bottom: 1em;
width: 100px;
}
span { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<span class="something">Something</span>
<span class="something">Something</span>
<span class="something">Something</span>
</div>
<article>
<span class="something">Something</span>
</article>
I have a problem with the following codes. I want to disable third span that display posts counter that have been viewed by users. How can i fix it?
span i.mdi.mdi-eye:display:none;
<div class="post-meta">
<span></span>
<span></span>
<span><i class="mdi mdi-eye"></i></span>
</div>
You can select every third element with the nth-child() selector. Since you don't have more elements in there it works like intended. Better would be to use the i class selector though and hide the i.
div.post-meta :nth-child(3) {
display: none;
}
<div class="post-meta">
<span></span>
<span></span>
<span><i class="mdi mdi-eye">10</i></span>
</div>
Your problem is with the css you have. You have not enclosed the styling with curly braces {}
The solution is:
span i.mdi.mid-eye {
display: none;
}
.post-meta span:not(empty) {
display: none;
}
<div class="post-meta">
<span></span>
<span></span>
<span><i class="mdi mdi-eye">10</i></span>
</div>
or
.post-meta span:last-child {
display: none;
}
<div class="post-meta">
<span></span>
<span></span>
<span><i class="mdi mdi-eye">10</i></span>
</div>
This approach as well works
.post-meta span:last-child() {
display: none;
}
I have a problem with my verified icon.
So what I actually want is that the verified Icon like on Twitter or Facebook is besides the Username and not in the next line under my username.
But it does not work.
<ul class="line">
<li>
<h3 align="center">Username</h3>
<span class="label label-info">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</span>
</li>
</ul>
Here is my CSS:
li.line {
list-style: none;
}
ul.line {
display: block;
}
h3 is a block element
change it to inline element
<ul class="line">
<li>
<span align="center">Username</span>
<span class="label label-info">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</span>
</li>
</ul>
If you don't want the list point, then I don't think li is what you'll want to use. A span or even a div could probably give you the look you're going for.
As for having them on the same line, try using the inline-block option for your css display element. It is similar to display: block, but it allows you to keep your elements on the same line.