Can you apply the ccs rule content to child elements?
css :
a:link:before, a:visited:before{
content: " "attr(href)" ";
}
html :
Home
Result :
-------------
| /home |
| Home |
-------------
However I would like to do the following:
html :
<span>home</span>
With the previous css the href value would appear before the span.
Is it possible to make it appear in the span?
I've tried this. It's for a sitemap.
No, that's not possible.
To make generated content render inside the span, you need a:link span:before.
Unfortunately, in that case, content: " "attr(href)" "; will no longer work, because the a element is no longer the subject of the selector - the span is, and the span does not have the href attribute.
It is not possible because attr(...) works only for the element itself but you actually need something like this:
a:link > span:before { content: " "parent.attr(href)" "; }
But no such thing as parent.attr() in CSS.
Related
Hello all you smart CSS people... I've got a Doozey!
https://tritonmedicine.com/services is the page in question
It's the title down the page a bit, next to the picture
How do I style ONLY the ::before pseudo-class/id for the "preventative care" title? I'm trying to add the word "ADULT" in front of it, but if I use the id#1506, it won't work. If I only use the class (.tab-pane.active), it puts "ADULT" in front of every active title. What am I doing wrong here?
This DOESN'T work:
#1506.tab-pane.active > div:nth-child(2) > div > h3::before {
content: 'ADULT';
}
This DOES work (but styles them all, which I don't want):
.tab-pane.active > div:nth-child(2) > div > h3::before {
content: 'ADULT';
}
Any assistance is much appreciated :)
You can't select id that start with number in CSS selectors
For more CSS-Tricks
Solution
try somthing like these tab1506 or tabPane1506 or tp1506
But there is another solution of your problem, you can use
Attribute selector:
[id="1506"].tab-pane.active > div:nth-child(2) > div > h3::before {
content: 'ADULT';
}
For more read here
I have the following in my css file:
md-menu-content.md-menu-bar-menu.md-dense .md-menu > .md-button:after{
display:none;
}
And here's my HTML:
<md-menu-content class="ZZZ">
Hello
</md-menu-content>
I have some Javascript (material design) that adds lots of stuff to the <md-menu-content> elements.
I would like to apply the above CSS to certain <md-menu-content> elements (only if they have the ZZZ class) and leave all others behaving as normal. I'm very stuck. Is this possible in CSS?
To apply the css that you want to all items of the ZZZ class, you should use code like this:
.ZZZ {
//your code here
}
The . before the ZZZ signifies that it applies to items with the class ZZZ. This can be done with any class, as all you have to do is put a . (period) before the class name.
I think you are over thinking this, just use the css styling like you would any other time, and it works just fine. See fiddle: https://jsfiddle.net/pyexm7us/3/
HTML
<md-menu-content class="ZZZ">
Hello
</md-menu-content>
<md-menu-content>
World
</md-menu-content>
CSS
md-menu-content{background-color: red; color: white;}
.ZZZ{background-color: blue; color: white;}
This is absolutely possible with CSS
To apply styling to elements with the same class simply use the prefix .
.ZZZ {
//styling for elements with class ZZZ
}
If you want to work with id's then use the prefix #
#ZZZ {
//styling for elements with the ID ZZZ
}
I have this html code here:
<div default_name="RandomName1">
<div name="RandomName1">RandomName1</div>
<div name="RandomName2">RandomName2</div>
<div name="RandomName3">RandomName3</div>
</div>
The property default_name on parent div changes from time to time. I would like to set the child div which has name matching default_name to background-color:red.
Like:
<style>
div > div[name=default_name_of_parent] { background-color: red }
</style>
I have no control over what the name values are, users set it. Is this possible via style sheet?
Thanks
This can be done, if you make a rule containing a selector for each possible “combination”, like so:
div[default_name=RandomName1] > div[name=RandomName1],
div[default_name=RandomName2] > div[name=RandomName2],
div[default_name=RandomName3] > div[name=RandomName3]
{ background-color: red }
http://jsfiddle.net/wc5whfwa/
But j08691 is totally right with their comment – this should be avoided at all cost if possible, data- attributes would be the way to go.
How to change the color only from text except everything is between tags ?
Sample text:
<b>A7</b> <b>D</b>
this is a test
<b>A7+</b> <b>G9</b>
this is a test
Assuming that all of that text is wrapped in a parent element (I've used <div>, but almost any other element would suffice), as such:
<div>
<b>A7</b>
<b>D</b>
this is a test
<b>A7+</b>
<b>G9</b>
this is a test
</div>
Then you can't change "all the text except the <b> tags", because CSS won't allow you to style the text without affecting the colour of the the <b> elements, you can, however, style the div and then 'unstyle' the b elements:
div {
color: #f00;
}
div b {
color: #000;
}
JS Fiddle demo.
To do this with jQuery (and, honestly, from the information you've posted jQuery seems unnecessary), you'd have to create wrapping elements for each of the strings of characters that are not wrapped in b elements and then directly style, or add a class to, those elements:
$('body').contents().filter(function(){
return this.nodeType === 3 && this.nodeValue.trim().length > 0;
}).wrap('<span />').parent().css('color','red');
JS Fiddle demo.
References:
contents().
filter().
parent().
wrap().
Try:
body{color:red;}
b{color:black;}
Fiddle here.
You could use jQuery like this:
$('body').css('color', '#FFCCFF');
$('b').css('color', '#000000');
But if you can do it in CSS it would be better:
body {
color: #FFCCFF;
}
b {
#000000;
}
Since you tagged this as jquery, I just provided a solution for this with jquery, You may wrap the html which was written by you in a paragraph tag like below. And then you have to use the .addClass function of Jquery to set different classes with different colours for that both paragraph and bold tag.
HTML
<p><b>A7</b><b>D</b>
this is a test
<b>A7+</b><b>G9</b>
this is a test</p>
CSS
.Paragraph{
color:red;
}
.boldtext{
color:black;
}
JQUERY
$('p').addClass('Paragraph');
$('p > b').addClass("boldtext");
DEMONSTRATION
I'm using the following css to display a step counter:
:before {
content: "step " counter(fieldsets);
counter-increment: fieldsets;
/* Some more css */
}
But I was wondered if it was possible to display the total number of elements as well, like so:
:before {
content: "step " counter(fieldsets) " of " total_number_of_fieldsets;
counter-increment: fieldsets
/* Some more css */
}
I would love it to be a pure css solution, is that possible?
Unless you have something else that calculate the total_number_of_fieldsets count in the CSS, it is not possible.
See this fiddle: http://jsfiddle.net/EawLA/
You can show the total :after
Note that this will not work in IE<9 as pseudo elements are not supported
CSS cannot inspect the DOM or use variables, therefore it cannot pull up this inforamtion.