I need to target the content of the span but not nested h1 content
Does anyone has an idea of how is that possible?
-down is a simple example:
Thanks
<html>
<div>
<h1>MainTitle <span>SubTitle </span> </h1>
</div>
</html>
If you want to select with CSS, use h1 span {} like this:
h1 span {
color: blue;
font-size: 20px;
}
<html>
<div>
<h1>MainTitle <span>SubTitle </span> </h1>
</div>
</html>
With javascript, I guess you have to add an ID to your span tag. I don't know any other way of doing it. Here is the code to show:
document.getElementById("h1span").style.color = "blue";
document.getElementById("h1span").style.fontSize = "20px";
<html>
<div>
<h1>MainTitle <span id="h1span">SubTitle </span> </h1>
</div>
</html>
Related
I will let the code speak. I even try to add important! to the css value but still fail to remove line.
Tested in Chrome and Safari.
.no-decoration {
text-decoration: none;
}
<h1> ins tag</h1>
<ins>
<a class="no-decoration" href="">Some link</a>
</ins>
<h1>no ins tag</h1>
<div>
<a class="no-decoration" href="">Some link</a>
</div>
You should add the style for <ins> tag also.
update your CSS with the below code,
.no-decoration, ins {
text-decoration: none;
}
Please check the link https://jsfiddle.net/c1jp3pev/
It's because the <ins /> tag is decorating it, not the anchor.
.no-decoration {
text-decoration: none;
}
<h1> ins tag</h1>
<ins>
<a class="no-decoration" href="">Some link</a>
<p>Paragraph of text.</p>
</ins>
<h1>no ins tag</h1>
<div>
<a class="no-decoration" href="">Some link</a>
</div>
Since, is used to insert something inside, and it works only with text. But it is possible by using some other tags like and many more......
<!DOCTYPE html>
<html>
<head>
<style>
.ins {
text-decoration: none;
}
</style>
</head>
<body>
<ins class="ins">Some inserted text.</ins> <br>
<ins>Some inserted text.</ins>
<div>Some inserted text.</div>
</body>
</html>
You need to put the class in a tag and ins tag because both tags produce linked text!
See this for more info! https://www.w3schools.com/tags/tag_ins.asp
I want to increase C and I . I also use ::first-text{}. It works Now, how can i increase I.
<p>Creating and Implementing</p>
<center>
<p style="font-size: 32px;color: #424242;margin-top: 15px;font-family:Rockwell; ">
<style>
p::first-letter{
font-size:40px;
}
</style>
<span class="a">Creating</span> <span>and</span> <span>Implementing</span>
</p>
</center>
Its very simple, You have to change you p tags like
<p>
<span class="highlight-first-letter"><b style="font-size:20px;">C</b>reating</span> <span>and</span> <span class="highlight-first-letter"><b style="font-size:20px;">I</b>mplementing</span>
</p>
your output is look like
I'm not sure about first-text, but first-letter should work for the C.
For the I, you would have to wrap it in a span and give it a class unfortunately.
https://caniuse.com/#feat=css-first-letter
--Update--
I'm not sure if you aware, but style tags are not 'scoped'. This means that all <p> tags will have their first letters increased, is this what you want?
Also, the center tag is deprecated and should not be used.
<style>
p{
text-align: center;
font-size: 32px;
color: #424242;
margin-top: 15px;
font-family:Rockwell;
}
.highlight-first-letter::first-letter{
font-size:40px;
display: inline-block;
}
</style>
<p>
<span class="highlight-first-letter">Creating</span> <span>and</span> <span class="highlight-first-letter">Implementing</span>
</p>
i have done it with jquery it can be achieved also in javascript bydocument.getelementbyid
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=o>c js isj kl</div>
<script>
var txt = $('#o').text();
var new_text = txt.replace(/i/gi, 'I') ;
$('#o').text(new_text.replace(/c/gi,'C'));
</script>
after your update i havev found that in css
introduce span in between your text
<p>Creating and Implementing</p>
<center>
<p style="font-size: 32px;color: #424242;margin-top: 15px;font-family:Rockwell; ">
<style>
p::first-letter{
font-size:40px;
}
.l::first-letter{
font-size:40px
}
</style>
<span class="a">Creating</span> <span>and</span> <span class=l>Implementing</span>
</p>
</center>
I don't know how to explain this very well but...
I want to select an element but it's like "far" from other one
Like this:
<div class="image-div">
<img src="forest.png" class="image forest">
</div>
<p>
I want to change the color of this text if the image there ^ is "forest", which I'll change with JS
</p>
.image.forest [some selector idk] p {
color: red;
}
.image.train [some selector idk] p {
color: blue;
}
You could re-write it like this if it works for you.
<div class="image-div forest">
<img src="forest.png" class="image">
</div>
<p>I want to change the color of this text if the image there ^ is "forest", which I'll change with JS</p>
<style>
.forest + p {
color: red;
}
.train + p {
color: blue;
}
</style>
Why dont you just add a class to the p tag right after the forest image.
<div class="image-div">
<img src="forest.png" class="image forest">
</div>
<p class="forest-paragraph"></p>
.forest-paragraph {
color: #000;
}
You'd need to go from <img> to <div> to <p>, but going from <img> to <div> presents a problem: there is no CSS selector that allows one to reference an element that is higher up in the DOM tree, i.e. no child-to-parent selector.
Instead, you can apply the .forest class to the <div>.
HTML:
<div class="image-div forest">
<img src="forest.png" class="image">
</div>
<p>
I want to change the color of this text if the image there ^ is "forest", which I'll change with JS
</p>
CSS:
.forest + p {
color: red;
}
I have an issue right now and i am curious if there is a possible way to solve this. I have 2 div's enclosed in href elements. The problem is that i want to exclude the <p> element. Is there a way to do this despite it being inside the href element? Thanks.
<a href= "sample.com">
<div class="1">
<p>Hello</p>
</div>
</a>
<a href= "test.com">
<div class="2">
<p>Hello</p>
</div>
</a>
Yes you can but I wouldn't advocate for it.
You could use CSS to remove the appearance of a link:
a{
text-decoration: none;
}
p{
cursor: default;
color: #000;
}
Then you could use preventDefault() to prevent the p from triggering the action on click:
$("p").click(function(e){
e.preventDefault();
});
FIDDLE
What you really should do is add another wrapper to contain your elements and then wrap your div with an a like so:
<div class="wrapper">
<a href="http://www.google.com" target="_blank">
<div class="1"></div>
</a>
<p>Hello</p>
</div>
$(function(){
$('p').click(function(){
alert($(this).attr('href'));
// or alert($(this).hash();
});
});
<html>
<body>
<font color="#FF0000">Red</font>
<BR>
<font color=green>Green</font>
<BR>
<font color= rgb(255,255,0)>Gold</font>
</body>
</html>
From the code above I am trying to use different ways to change the font color. The first 2 ways work perfectly (in hex and the actual name); but the third one in RGB format is not displayed correct. What is the error in there?
style="color:rgb(255,255,0)". The font tag is deprecated and inline style should also be avoided. Don't forget your double quotes on attribute names: attr="value" not attr=value
This would be best done in CSS using a target class:
<p class="my-class">Some text</p>
In your css file:
.my-class {
color: rgb(255,255,0);
}
The tag is also not to be used for layout. It should only be used for new-lines in text. Instead, use display: block on the elements that should be on a new line.
Here's a complete sample: (note that <p> tags have display: block by default)
<p class="red-text">Red</p>
<p class="green-text">Green</p>
<p class="gold-text">Gold</p>
CSS:
.red-text {
color: #FF0000;
}
.green-text {
color: green;
}
.gold-text {
color: rgb(255,255,0);
}
Live demo (click).
How about this?
<style>
.red{
color: #FF0000;
}
</style>
HTML Tag:
<div class="red" >Red</div>
<html>
<head>
<title>webpage name</title>
</head>
<body>
<font color="#FF0000">Red</font> (it's look right).
<BR>
<font color=green>Green</font>(wrong).
<BR>
<font color= rgb(255,255,0)>Gold</font>(wrong).
</body>
</html>
modified
<html>
<head>
<title>webpage name</title>
</head>
<body>
<font color="#FF0000">Red</font>
<BR>
<font color="green">Green</font>
<BR>
<font color="rgb(255,255,0)">Gold</font>
</body>
</html>