This question already has answers here:
Is there a CSS selector for elements containing certain text?
(20 answers)
Closed 7 years ago.
Is it possible to set a conditional for the h2 text of a class? the h2 does not have a unique class or id to it, and multiple h2's with a dynamic changing order. So i can't target say the 3rd h2 because its always shifting.
h2.arker.fun.header {
// some statement If h2 text = "Gamer" then set text-transform: lowercase
}
There was once proposed one pseudo class known as :contains to handle this situation. But they haven't added it yet in the current draft of CSS3.
However you may use some Javascript. For Example to deal with this problem
for (var i= document.links.length; i-->0;){
if (/\bSpecificWord\b/i.test(document.links[i].innerHTML)
document.links[i].style.color= 'red'; }
Hope you are not restrained from using Javascript.
As others (#Paulie_D, #Mia Marks, #YourFriend) have already pointed out, there is no CSS < 4 selector based on content and the closest you can get is the attribute selector.
Just a crazy idea:
h2.arker.fun.header:before {
content: attr(data-text);
}
h2.arker.fun.header[data-text="Gamer"] {
text-transform: lowercase;
}
<h2 class="arker fun header" data-text="Gamer"></h2>
don't do it at home...
u can add attribute in that h2 tag
and put the condition like:
h2[if='mytype']{text-transform:lowercase;}
Related
This question already has answers here:
Select elements by attribute in CSS
(6 answers)
Closed 2 years ago.
How can I reference a html element like <h1 anyname>Text</h1> in CSS, if there is no class or id specified within it? Is there an option?
.h1 {...} is of course valid for all, but I only want to style "h1 anyname".
Thanks in advance!
You can use an attribute selector — square brackets with the attribute name.
h1[anyname] {
/* ... */
}
You can use attribute selector https://www.w3schools.com/css/css_attribute_selectors.asp
h1[anyname] { /*** your style ***/ }
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 2 years ago.
I found there is no official parent selector, but there are pseudo-classes like :has, so I was wondering how one would go about applying CSS to the following kind of paragraph:
<p><em>[11] Source Text</em></p>
I'd need to apply CSS to this type of paragraph, which is one in a list of several, and the only thing they have in common (besides the structure) is the '_ftn' part of the name attribute. Unfortunately, these paragraphs are also not wrapped in another element I could build the CSS on - that's how it comes out of a plugin...
Thanks for any inputs from you CSS gurus!
The :has() CSS selector is currently not supported by any browser (reference).
However, if you want to target anchor elements which are placed within a p > em tag, you can do something like this:
Note the attribute selector [name^="_ftn"] on the a element.
p em a[name^="_ftn"] {
color: green;
font-size: 18px;
text-decoration: none;
font-weight: 700;
}
<p><em>[11] Source Text</em></p>
This question already has answers here:
Specifying a list of arbitrary children (no pattern) for nth-child and nth-of-type
(2 answers)
Closed 6 years ago.
How can I sum these css selectors together?
td:nth-child(1), td:nth-child(4), td:nth-child(5) {
font-size: 25px;
}
I thought of something like
td:nth-child(1,4,5) {
font-size: 25px;
}
but this doesnt work. Is there a way to condense this?
If you can't use a an+b formula to target them (which is the case in your particular example), then the code you wrote is the shortest version.
If you wish to simplify the CSS code, you could switch to classes... that however will make your HTML less clean.
This question already has answers here:
First lowercase the text then capitalize it. Is it possible with CSS?
(4 answers)
Closed 8 years ago.
I saw this topic here: First lowercase the text then capitalize it. Is it possible with CSS?
But it wasn't pure CSS. I have a div that contains this text:
<div>
RaWr rAwR
</div>
I want to use css to make it look like "Rawr Rawr". Cut if I just to text-transform capitalize it makes it "RaWr RAwR", the already uppercase letters remain upper case. So I need to lower case it all first then capitalize, is the solution to wrap it in a div?
I tried wrapping it in another div but it didnt work:
<style>
#test3 { text-transform: lowercase; }
#test3 div { text-transform: capitalize; }
</style>
<div id="test3"><div>RaWr rAwR</div></div>
This should do it when you have the single words in different div's
#test3 { text-transform: lowercase; }
#test3::first-letter { text-transform: uppercase; }
<div id="test3">haLLo</div>
Sadly, you cannot do this with pure CSS. For now your best hope is to either rewrite text to avoid medial/final capitals or use JavaScript. (Yes, my eyes are rolling too.)
Your suggested approach doesn't work because only one text-transform property value applies to an element at a time. When you specify something like…
#parent { text-transform: lowercase; }
#parent #child { text-transform: capitalize; }
…the value of text-transform on the child element is now capitalize, and nothing else. This is the only transformation applied to that element.
There is a draft proposal to allow authors to define custom mapping tables with an #text-transform rule, but as it stands I doubt it would work for this scenario. The problem is that the scope descriptor (where in a word the transformation applies) only takes one value—you could define a transformation on the whole word or some combination of the start, end or middle parts of a word, but it's not obvious if you could have different transformations for each part.
This seems to be acknowledged in Issue 8 on the wiki draft proposal, and multiple transforms were discussed a couple of years back on www-style. In that thread it is suggested that only a single text-transform value should be allowed on an element, and that combining should be done in the #text-transform rule; however, the draft spec notes:
If the text-transforms referred to have a different scope than the scope specified
in the text-transform that refers to them, they apply at the intersection of the
two scopes.
So a rule like this wouldn't work:
#text-transform lowercase-then-capitalize {
transformation: lowercase, "a-z" to "A-Z" single;
scope: initial;
}
I can see three obvious solutions:
allow multiple scope values to be specified in the #text-transform rule;
add a descriptor to inherit a previous transformation without overriding its scope value; or
permit multiple text-transform values for a selector.
The www-style mailing list might be a good place to take this if you ever want to see a pure CSS solution to this question.
You are using nested div,
So #test3 { text-transform: lowercase; } is applied for Parent div so it applies for Both Parent and Child Divs
when you override the #test3 div { text-transform: capitalize; } to the Child Div the first style text-transform: lowercase; is ignored
Unfortunately, until CSS 3 there is no way to do this in pure CSS way, as per this document there are only 5 possible values to text-transform and none of them will solve this requirement!
But in future there might be provision for custom rule for text transform similar to Counter Sytle
This question already has answers here:
Nesting CSS classes
(8 answers)
Closed 4 years ago.
Some time ago I saw an example of a css file, where the css rules/selectors where specified in a nested way, e.g. something like this:
div.a {
color: red;
div.b {
font-weight: bold;
}
}
I'm not sure where I saw that (probably in a SO question), or whether it was exactly as shown above.
My questions: Is the above CSS correct/valid? Is it a standard way to specify CSS rules or is this a browser-dependent hack?
That is not valid standard CSS, but it's an example of nesting class declarations using Sass/SCSS or LESS and I believe other CSS extensions out there, which expand it to something like this (which is valid CSS), before serving it to the browser to use:
div.a {
color: red;
}
div.a div.b {
/* Inherits color from div.a */
font-weight: bold;
}
What you are probably referring to is LESS.
The example, you gave is not valid CSS, but is valid with LESS. LESS will "compile" the nested CSS and convert it to something which is valid CSS.
You can nest rules with SASS, http://sass-lang.com/
Maybe that was it?
Seems there is a proposal over at https://tabatkins.github.io/specs/css-nesting/
but I can't find the status of it