In CSS when I use
p:hover {background-color: grey;}
it changes the whole paragraph. I want it to change a single word in that paragraph when I hover on any words in it. How can I do it ?
If you don't want to wrap every word manually, you can use jQuery to do it for you like below:
var p = $('p');
var text = p.text().split(' ');
for( var i = 0, len = text.length; i < len; i=i+1 ) {
text[i] = '<mark>' + text[i] + '</mark>';
}
p.html(text.join(' '));
Then you make your CSS as below:
p mark:hover {background:yellow}
Here's the demo: http://jsfiddle.net/zL2Yw/1/
Unfortunately, there's no pure CSS solution.
Just wrap your word with an inline element, e.g.
<p>
Lorem ipsum sit dolor amet <mark>consectetur</mark> dolor ...
</p>
And change its background color when the paragraph is hovered
p:hover mark {
background-color: grey;
}
(Feel free to use a most suitable element instead of <mark>...</mark>)
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed last month.
So I am using a rust markdown parser and it renders header_ids by placing an <a> tag with an id inside the <h> tags.
So I am getting something like:
<h3>
"TEXT"
</h3>
So I want to color the text thats in the <h3> tag by target it by the id thats on the <a> tag. So not target the directly because then I would color all the <h3> tags.
I tried some different css selectors and what not to target it, but nothing worked. Not even sure if thats possible.
you can try something like that:
h3:has(> #test) {
color: red;
}
<h3>text</h3>
<h3>text <a id="test" href="#">text</a> text</h3>
Although you can achieve that with some CSS it's not the correct way to do it.
IDs should only be used for specific cases or not at all in my opinion. It's fine to use an ID for some Javascript selectors due to performance but for CSS seems like and over kill.
If you want to have the H3 having one color and the A tags inside it just do:
h3 {
color: black;
}
h3 > a {
color: red;
}
<h3>
This is a title
</h3>
<h3>
This is a title with some anchor
</h3>
If you want only that particular A tag of that H3 to change color, then use a class instead like so:
h3 {
color: black;
}
h3 > .anchor {
color: red;
}
<h3>
This is a title
</h3>
<h3>
This is a title with some anchor
</h3>
If you are using an ID in order to create an anchor link to that ID that's fine, but you should not use CSS selectors to attribute CSS Styles to something as trivial as an A tag.
If JavaScript isn't out of scope, you can query regularly for h3 a and then use the parentElement to assign the styling:
const linksWithH3 = document.querySelectorAll("h3 a");
for(let index = 0; index < linksWithH3.length; index++) {
const parentElement = linksWithH3[index].parentElement;
parentElement.style.color = "red";
}
<h3>
"TEXT"
</h3>
Or you can introduce a class:
const linksWithH3 = document.querySelectorAll("h3 a");
for(let index = 0; index < linksWithH3.length; index++) {
const parentElement = linksWithH3[index].parentElement;
parentElement.classList.add("h3-with-a");
}
.h3-with-a {
color: red;
}
<h3>
"TEXT"
</h3>
Is it possible to select the element First but not Second?
<p> <code>first</code> </p>
<p> Text <code>second</code> Text </p>
I intend to select <code> when its child of <p> but without content (except whitespace) in <p>
I want to do it without JS, if it is not possible that would also be an answer if its explained
You can do this using a filter in jQuery:
$('p').filter(function() {
var nodetoCheck = $(this).contents()[0];
if ($(this).contents()[0].nodeValue.trim() === '') {
nodetoCheck = $(this).contents()[1];
}
if (nodetoCheck.nodeType === 1) {
return true;
}
}).addClass('selected');
JSfiddle Example: https://jsfiddle.net/jennifergoncalves/eywk7b53/1/
p:first-child > code {
color:#fff;
background:tomato;
}
<p> <code>first</code> </p>
<p> Text <code>second</code> Text </p>
Also included fiddle code if you do it with jquery
Working fiddle
ol:before {
counter-increment: section;
content: "Article " counter(section) ". ";
}
How do i add a class to content:?
if thats not possible a style will also do
Since you're inserting content, i want them to hide. If i remove the whole line it will not count
Currently it shows up like this:
Article 1: Terms of Condition
Article 1:
1.1 lorem ipsum
1.2 lorem ipsum
1.3 lorem ipsum
The 2nd "Article 1" should hide
Add a class to the ol element instead:
<ol class="... before-class">
Then style the :before pseudo-element using that:
ol.before-class:before {
display: none;
}
I am storing content in the database, for example:
Hello
This
is
Text
and when I pass that to a textarea, it stays with the new line breaks. But if I pass that text to a div with content editable, it would stay like this:
Hello This is Text
How can I fix this problem?
Set a style on the div: white-space: pre or white-space: pre-wrap
Example: http://jsfiddle.net/fPv6S/
To add some info on #Explosion Pills correct answer and extract some info from MDN:
The CSS white-space attribute is there to help:
pre:
white-space: pre
Sequences of white space are preserved. Lines are only broken at
newline characters in the source and at <br> elements.
This might result in unwanted horizontal scrollbars as shown in the example!
pre-wrap:
white-space: pre-wrap
Sequences of white space are preserved. Lines are broken at newline
characters, at <br>, and as necessary to fill line boxes.
As #ceremcem pointed out the line breaks at the end of the box will not be transferred when the text is copy-pasted, which makes sense since these line breaks are not part of the text formatting but rather of the visual appearence.
pre-line:
white-space: pre-line
Sequences of white space are collapsed. Lines are broken at newline
characters, at <br>, and as necessary to fill line boxes.
div{
border: 1px solid #000;
width:200px;
}
.pre {
white-space: pre;
}
.pre-wrap{
white-space: pre-wrap;
}
.pre-line{
white-space: pre-line;
}
.inline-block{
display:inline-block
}
<h2>
pre
</h2>
<div class="pre" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____ ____</div>
<h2>
pre-wrap
</h2>
<div class="pre-wrap" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____ ____</div>
<h2>
pre-line
</h2>
<div class="pre-line" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____ ____</div>
<h2>
Chrome FIX
</h2>
<div class="pre-line inline-block" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____ ____</div>
EDIT 08/14/2018:
In Chrome you might experience troubles: Pressing Enter will generate a new <div> inside your contenteditable. To prevent that you can either press Shift+Enter or set display: inline to the contenteditable <div> as seen in the fiddle.
Try this......
var patt2 = new RegExp("<div>","g");
var patt3= new RegExp("</div>","g");
var patt4= new RegExp("<br>","g");
var z=x.replace(patt2,"\n").replace(patt3,"").replace(patt4,"");
That will do it...
You could search and replace newlines with <br />.
http://jsfiddle.net/fPv6S/1/
I have a series of div and I would like to select all p tags with enable class except the last inside each div in order to apply a specific style in css. The content are dynamically generated and may vary depending on the user.
In the example below, I would like to apply this style to the first two p inside the first div and none inside the other. I'm sure it's pretty easy but I don't find any solution to solve it.
<div>
<p class="enable"></p>
<p class="enable"></p>
<p class="enable"></p>
<p class="disable"></p>
</div>
<div>
<p class="enable"></p>
<p class="disable"></p>
<p class="disable"></p>
<p class="disable"></p>
</div>
Thanks for your help.
If the p elements are confined to four per div you can use the nth-child pseudo selector.
p.enable:nth-child(-n+2)
{
background: #0f0;
}
p.disable
{
background: #eee;
}
http://jsfiddle.net/Kyle_Sevenoaks/vw4wQ/
I have a Javascript solution for you:
var divs = document.getElementsByTagName("div"), paras, i, j;
for(i = 0; i < divs.length; i++) {
paras = divs[i].getElementsByTagName("p");
for(j = 0; j < paras.length-1; j++) {
if(paras[j+1].className === "disable")
break;
// apply your custom code here
paras[j].style.background = "#FF0000";
}
}
Check this solution in this jsFiddle