In the example below, how can I apply CSS styling on the text THIS inside of the p tag, without applying the CSS to the span tag?
<p>
<span class='x' id='1'><a href='#'>y</a>.</span>
THIS
</p>
You can target that indirectly - by first targeting the entire p, and then targetting the span and the a inside it - effectively selecting everything inside the p that has a tag.
In the following I am targetting the "TEXT" to make it red, whilst then over-riding that to target the other portions to give them different colours.s I then present a slightly longer version to demonstrate each portion as it is targetted.
p {color: red}
p span { color: black}
p span a { color: blue}
<p><span class='x' id='1'><a href='#'>y</a>.</span>THIS</p>
<p>
<span class='x' id='1'>
<a href='#'>This is a link</a>
This is text within the span</span>
This is another test
</p>
To select the text in <p></p> except the contents of <span></span> you can use the :not() selector:
p :not(span)
Though as the THIS is not wrapped in an element, it cannot be styled by CSS independently.
If it's CSS you want, then I advise wrapping the THIS in another tag with a class. Otherwise, you can use css to format the <p></p> and revert the child elements styles, see unset, inherit, and initial. e.g.:
p {color: red}
p span { color: initial }
p span a { color: initial }
<p><span class='x' id='1'><a href='#'>y</a>.</span>THIS</p>
Related
I would like to make a div or a span inside a div behave like it was only text so that the overflow goes to the next line.
I am not sure what css properties to use for this.
I already tried to use
overflow-wrap: break-word;
word-break: break-all;
This is my structure.
<div class="parent">
<span> Some text before </span>
<span class="makeItOverflow"> <div>Loooong text ...</div> </span>
<span> Some text after </span>
</div>
Expected to have something like this image: https://ibb.co/P1XcMh7.
I found the answer. For me it was a combination of display: inline and white-space: initial and word-break: break-all. The structure that I had was more complicated, but having inline to elements down the tree did the trick!
Thank you for your answers!
You can wrap the each of the span elements inside a <p> element, that is assuming that those three span elements are meant to read like one sentence/paragraph.
.parent {
width: 300px;
}
.makeItOverflow {
background-color: orange;
}
<div class="parent">
<p>
<span> Some text before </span>
<span class="makeItOverflow">Loooong text ...</span>
<span> Some text after </span>
</p>
</div>
If I am using a <h3> tag and apply css
h3 {
color:White;
}
changes the colour of all the header 3 text to white colour.
I only want to apply this to certain <h3> tags though among my many.
How can I do this please?
Give them a class:
.white-header {
color: white;
}
And in your html:
<h3 class='white-header'>I m white</h3>
JsFiddle
You can use a common class on them and use css for that.
I only want to apply this to certain tags though among my many.
Then you target parent element and apply css for that like below:
<h3>heading</h3>
<div class="foo">
<h3>some heading</h3>
<p>some paragraph</p>
</div>
h3{
color: red;
}
.foo h3{/*applied for some heading*/
color: white;
}
CSS is the way to go, but since the question is tagged javascript here is a JS solution using querySelector() to style select <h3> tags:
document.querySelector("div.someClass h3").style.color = "#FFF";
Edit: #Kitler just edited out the javascript tag from the question. This answer is for the original question. If the OP leaves it off, then I will quietly delete this. Hold off before downvoting.
CSS ::after has a nice feature in combination with content and attr(), that lets you insert any attr value as the pseudo-element content.
For general debugging purposes, I'm looking to append a little yellow label to all HTML elements with the content as name of the element.
I can do ids and classes with CSS.
But for elements (p div span etc) javascript is the only option?
Yes you have to use javascript or jQuery that makes it much easier : DEMO
HTML test
<div>
</div>
<p></p>
<form></form>
<span></span>
CSS test
[data-tag]:before {content:attr(data-tag);}
jQuery
$("body").children().each(function() {
var domel= $(this).get(0);
$(this).attr("data-tag",domel.nodeName);
})
it produces this :
<div data-tag="DIV"></div>
jQuery can select all elements of a certain type/tag, I'd recommend using that.
If I understand correctly you want to do the following and you do not need javascript.
http://jsbin.com/wepayija/3/edit
<style>
p::after {
background-color: yellow;
content: 'p'
}
.my-class::after {
background-color: green;
content: 'p'
}
div:after {
background-color: yellow;
content: 'div'
}
</style>
<p>I have no class</p>
<p class="my-class">I have a class</p>
<div></div>
I need a way to get certain CSS attributes for all HTML elements in a page and make them inline. I have a with custom CSS attributes, for example:
<style type="text/css">
h2 { color: red; }
</style>
And then:
<h2>This is my title</h2>
So, I need a script that will make the following change (and only the following):
<h2 style="color: red;">This is my title</h2>
Any thoughts?
Basics of CSS:
This will make all h2 tags have a text color of red
<style type="text/css">
h2 { color: red; }
</style>
<h2>I'm red</h2>
<h2>I'm also red</h2>
<h1>I'm not red</h1>
This will make all tags with the class of chicken be red.
<style type="text/css">
.chicken { color: red; } /* chicken is the class name*/
</style>
<h2 class = "chicken">I'm red</h2>
<div class = "chicken">I'm also red</div>
<h2>I'm not red</h2>
If you only want to give one tag a specific property you give it an id
<style type="text/css">
#chicken { color: red; }
</style>
<h2 id= "chicken">I'm red</h2>
I don't really understand what you're looking form, but the property for making something inline is:
display:inline
http://www.w3schools.com/cssref/pr_class_display.asp
If you replace the color:red with display:inline then their properties will change from being red to inline.
If you only want to do it for h2 elements and for CSS color attribute then the following should work
$('h2').each(function(){
$(this).css('color', $(this).css('color'));
});
If you want other elements/attributes then you will need to build it out.
I'm not quite sure what you mean by "get certain CSS attributes for all HTML elements in a page and make them inline." What are you trying to do?
For individual inline styling, use the span tag:
My mummy has <span style="color:blue">blue</span> eyes.
To style certain elements, as the user above has done with jQuery, use a class tag for each element that you wish to style:
CSS:
.specialStyle {color: #00d;}
HTML:
<div id="anyOldDiv" class="specialStyle">...</div>
click here
Inside the DIV Tag
<div name="layer1" style="background-color:lightblue;">
<hr>Site:Downtown DataCenter Device: 2KBS</hr>
</div>
Hi ,
I am using Inline CSS Styling .
Inside the hr tag of my Div tag i want to have the text "site" and "Device" as bold and with big font ?
How can i have it
Please advice .
Try putting your content in a p. hr is a horizontal rule which is an empty element w3c specifcation. Put the text that you want into span elements and then apply styling font-weight:bold;font-size:20px or whatever size you want.
Firstly, <hr> is not intended to contain anything, much like <img> or <br />.
Try this:
<div class="layer1">
<strong>Site:</strong> Downtown DataCenter <strong>Device:</strong> 2KBS
</div>
<hr></hr>
The CSS might look like this:
.layer1
{
background-color: lightblue;
}
.layer1 strong
{
font-size: larger;
}