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>
Related
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.
I need to add a CSS/HTML 'fragment' to a page to change the text in the following:
<div>
<h3 class="category-heading">Keep this text:</h3>
</div>
<div>
<h3 class="category-heading">**Change this text**:</h3>
</div>
I have tried the following:
<style>
h3.category-heading {
text-indent: -9999px;
}
h3.category-heading::after {
content: “New and Featured Products”;
text-indent: 0;
display: block;
line –height: 120%;
}
</style>
But this changed both instances of the text.
Is it possible to specify the second instance of the css class to be changed? or is it possible to select and change the wording in the second css class by adding a html fragment?
Supposing you can use Javascript by including it an HTML fragment :
Depending on the inclusion mecanism (we need to know more about the tools you use), something containing :
<script>
window.onload = function(){
document.getElementsByClassName("category-heading")[1].innerHTML = "New and Featured Products";
}
</script>
If the first solution breaks some features of your website (because It could override defined behaviour), you should use :
<script>
document.getElementsByClassName("category-heading")[1].innerHTML = "New and Featured Products";
</script>
Why not to use an id attribute?
<h3 class="category-heading" id="itemThatShouldBeChanged">**Change this text**:</h3>
and than just
#itemThatShouldBeChanged {content:"other text"}
You should take a look at nth-child
Be aware that this is CSS3
this will give you the following css selector :
div:nth-child(2) h3.category-heading::after
This question already has answers here:
Can I use a :before or :after pseudo-element on an input field?
(22 answers)
Closed 7 years ago.
In Firefox 3 and Google Chrome 8.0 the following works as expected:
<style type="text/css">
span:before { content: 'span: '; }
</style>
<span>Test</span> <!-- produces: "span: Test" -->
But it doesn't when the element is <input>:
<style type="text/css">
input:before { content: 'input: '; }
</style>
<input type="text"></input> <!-- produces only the textbox; the generated content
is nowhere to be seen in both FF3 and Chrome 8 -->
Why is it not working like I expected?
With :before and :after you specify which content should be inserted before (or after) the content inside of that element. input elements have no content.
E.g. if you write <input type="text">Test</input> (which is wrong) the browser will correct this and put the text after the input element.
The only thing you could do is to wrap every input element in a span or div and apply the CSS on these.
See the examples in the specification:
For example, the following document fragment and style sheet:
<h2> Header </h2> h2 { display: run-in; }
<p> Text </p> p:before { display: block; content: 'Some'; }
...would render in exactly the same way as the following document fragment and style sheet:
<h2> Header </h2> h2 { display: run-in; }
<p><span>Some</span> Text </p> span { display: block }
This is the same reason why it does not work for <br>, <img>, etc. (<textarea> seems to be special).
This is not due to input tags not having any content per-se, but that their content is outside the scope of CSS.
input elements are a special type called replaced elements, these do not support :pseudo selectors like :before and :after.
In CSS, a replaced element is an element whose representation is
outside the scope of CSS. These are kind of external objects whose
representation is independent of the CSS. Typical replaced elements
are <img>, <object>, <video> or form elements like <textarea>
and <input>. Some elements, like <audio> or <canvas> are replaced
elements only in specific cases. Objects inserted using the CSS
content properties are anonymous replaced elements.
Note that this is even referred to in the spec:
This specification does not fully define the interaction of :before
and :after with replaced elements (such as IMG in HTML).
And more explicitly:
Replaced elements do not have ::before and ::after
pseudo-elements
Something like this works:
input + label::after {
content: 'click my input';
color: black;
}
input:focus + label::after {
content: 'not valid yet';
color: red;
}
input:valid + label::after {
content: 'looks good';
color: green;
}
<input id="input" type="number" required />
<label for="input"></label>
Then add some floats or positioning to order stuff.
fyi <form> supports :before / :after as well, might be of help if you wrap your <input> element with it... (got myself a design issue with that too)
Use tags label and our method for =, is bound to input.
If follow the rules of the form, and avoid confusion with tags, use the following:
<style type="text/css">
label.lab:before { content: 'input: '; }
</style>
or compare (short code):
<style type="text/css">
div label { content: 'input: '; color: red; }
</style>
form....
<label class="lab" for="single"></label><input name="n" id="single" ...><label for="single"> - simle</label>
or compare (short code):
<div><label></label><input name="n" ...></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;
}