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
Related
Firefox 89 includes many changes to the web browser's UI.
One of the benefits of the new UI is that tabs can show a secondary information row to indicate, for example, if media is playing in a tab.
Unfortunately, when the highly-desirable compact mode is used, these secondary info rows disappear.
I went through the Firefox source code, and determined that this issue is created by this line of CSS code:
:root[uidensity="compact"] .tab-secondary-label, .tab-secondary-label:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]), .tab-secondary-label:not([activemedia-blocked]) > .tab-icon-sound-blocked-label, .tab-secondary-label[muted][activemedia-blocked] > .tab-icon-sound-blocked-label, .tab-secondary-label[activemedia-blocked] > .tab-icon-sound-playing-label, .tab-secondary-label[muted] > .tab-icon-sound-playing-label, .tab-secondary-label[pictureinpicture] > .tab-icon-sound-playing-label, .tab-secondary-label[pictureinpicture] > .tab-icon-sound-muted-label, .tab-secondary-label:not([pictureinpicture]) > .tab-icon-sound-pip-label, .tab-secondary-label:not([muted]) > .tab-icon-sound-muted-label, .tab-secondary-label:not([showtooltip]) > .tab-icon-sound-tooltip-label, .tab-secondary-label[showtooltip] > .tab-icon-sound-label:not(.tab-icon-sound-tooltip-label) {
display: none;
}
As you can see, the selector :root[uidensity="compact"] .tab-secondary-label at the beginning of this ruleset is causing this issue.
I would like to add to the userChrome.css overlay a CSS ruleset to overcome this issue, but I'm not exactly sure how. Yes, I could just change this ruleset in the Firefox source code, and recompile the browser, but I would prefer not to go through that hassle for every Firefox update.
Within userChrome.css, for obvious reasons, something like:
:root[uidensity="compact"] .tab-secondary-label {
display: revert !important;
}
or
:root[uidensity="compact"] .tab-secondary-label {
display: unset !important;
}
will not quite work.
What is a good CSS technique to use to accomplish this goal?
I figured out a solution.
I don't love it, but it does work.
.tab-secondary-label {
display: -moz-box !important;
}
.tab-secondary-label:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]), .tab-secondary-label:not([activemedia-blocked]) > .tab-icon-sound-blocked-label, .tab-secondary-label[muted][activemedia-blocked] > .tab-icon-sound-blocked-label, .tab-secondary-label[activemedia-blocked] > .tab-icon-sound-playing-label, .tab-secondary-label[muted] > .tab-icon-sound-playing-label, .tab-secondary-label[pictureinpicture] > .tab-icon-sound-playing-label, .tab-secondary-label[pictureinpicture] > .tab-icon-sound-muted-label, .tab-secondary-label:not([pictureinpicture]) > .tab-icon-sound-pip-label, .tab-secondary-label:not([muted]) > .tab-icon-sound-muted-label, .tab-secondary-label:not([showtooltip]) > .tab-icon-sound-tooltip-label, .tab-secondary-label[showtooltip] > .tab-icon-sound-label:not(.tab-icon-sound-tooltip-label) {
display: none !important;
}
If anyone can propose different techniques, I'm interested in reading your answer(s).
I want to do the following:
.feed > :not(:nth-child(n+5):nth-child(-n+10))
But apparently that's not available in css. Is there any way around this?
You can use
.feed > :not(:nth-child(n+5)), .feed > :not(:nth-child(-n+10)) {
background: red;
}
Demo
Explanation
That's because :nth-child(n+5):nth-child(-n+10) means :nth-child(n+5) AND nth-child(-n+10).
But according to de Morgan's laws,
not(A AND B) = not(A) OR not(B)
Then, if you want to negate it, instead of :not(:nth-child(n+5):nth-child(-n+10)), you need the OR operator ,:
:not(:nth-child(n+5)), :not(:nth-child(-n+10))
It seems like you're trying to select all elements that aren't the 5th - 10th child of .feed. Another way to do that would be to select the 1st-4th child elements, and then the 11th+ child elements.
This will do it:
.feed > :nth-child(-n+4), .feed > :nth-child(n+11) {
...
}
http://jsfiddle.net/9ZSeZ/1/
is there a way with pure css to Have a link that might say "New! Watch Video" and then once someone has clicked the link have it remove the "New" portion of the link. I'm assuming this can be done w/ Jquery but I'd like to see if there is an way to remove it with just css.
Rather than removing words, add the word "New" if the link hasn't been visited yet
a:before {
content: "New! ";
}
a:visited:before {
content: "";
}
No extra markup, and you don't need to put the word "New" everywhere.
Wrap the "New!" in a span inside the anchor:
<a class="newText" href="somepage.html"><span>New! </span>Watch video</a>
and in your CSS, set:
a.newText:visited span { display: none; }
I would recommend using a class on the anchor (like "newText" above) so that this formatting will only be applied to the links you want it on. And keep in mind that the "New!" text will reappear if the user clears their browser history.
Assuming the anchor will take you to a new page you can use the following technique:
a:before {
content: "New! ";
}
On any page you wish to remove or change it, you can add a body class
body.blah a:before {
content: "";
}
I have a link that is in a div, and the div has an id of sidebar-left. I want to make it a different color when the link has the class current_page_item. I have other links on the page (that are not in the div) that I do not want this formatting to apply to.
I have tried several different versions of the following code with no luck:
#sidebar-left.current_page_item a {
color: #00b0f0;
}
Does anyone know what I am doing wrong?
Thanks.
Try:
#sidebar-left .current_page_item a {
color: #00b0f0;
}
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.