This question already has answers here:
Using regular expression in css?
(6 answers)
Css target just class name starts with and Ends with string
(1 answer)
Closed 11 months ago.
The code is
<p class="blue-example">Blue</p>
<p class="red-example">Red</p>
<p class="Yellow-example">Yellow</p>
Is there a way to select all three classes with single line something like:
.&-example { height: 200px; }
I'm looking for a feature like when you go to a library and look for, let's say, all authors whose family name is Smith. You'd put in search box "* Smith" or "? Smith".
You could use $ to select className end with specific string.
p[class$='-example']{
color:blue;
height:200px;
}
<p class="blue-example">Blue</p>
<p class="red-example">Red</p>
<p class="Yellow-example">Yellow</p>
Use *= to macth any className contain this string.
The [attribute*=value] selector matches every element whose attribute
value containing a specified value.
You could use *= to select className end with specific string.
p[class*='-example']{
color:blue;
height:200px;
}
<p class="blue-example">Blue</p>
<p class="red-example-no">Red</p>
<p class="Yellow-example-yo">Yellow</p>
Related
This question already has answers here:
Is there a CSS selector for elements containing certain text?
(20 answers)
Closed last year.
I've searched all over the internet for this answer and I'm still clueless, maybe one of you will know. Basically I'm wondering if in a .css file could you theoredically change the css of an object based off of its text
for example:
h1[innerText="some text thats in the h1"] {
/*styles oh what wonderful styles*/
}
yeah you can use JavaScript with if and else statement as if condition satisfies. it will be executed to change inner HTML. Give me 2 mins to attach code. I can only do this by using js. Further properties can be introduce as here first the color was nothing but after that I introduced pink color as background.
x = document.getElementById('text')
y = x.innerHTML
if (y=="her") {
x.innerHTML = "Paragraph changed!";
document.getElementById("p2").style.backgroundColor = "pink";
}else{
console.log('lol')
}
#p2{
width:200px;
height:100px;
padding-left: 10px;
}
<div class="p2" id="p2">
<h1 id='text'>her</h1>
</div>
This question already has an answer here:
Matching the first/nth element of a certain type in the entire document
(1 answer)
Closed 5 years ago.
I want to use first-child on the result of concatenating multiple css selectors.
Example: how to select first-child of the result of the css selectors body .foo, body .bar? In words: select all elements that has class foo that exists in the body element AND select all elements that has class bar that exists in the body element. Now take the first element in the collection of returned elements.
body > p:nth-of-type(1) {
font-size:20px;
}
<body>
<p class="foo">Hello</p>
<p class="bar">Hello</p>
<p class="foo">Hello</p>
<p class="bar">Hello</p>
</body>
You can try this:
DEMO HERE
For the first .foo
body p:nth-child(1){...}
For the first .bar
body p:nth-child(2){...}
First of all <p>
body > p:first-child{...}
This question already has answers here:
CSS selector for attribute names based on a wildcard
(3 answers)
Closed 6 years ago.
Is it possible to target all the data-attributes within an element that starts with data-am? The thing is that the .container can contain different types of data-attributes. Something like this below.
Note, I'm trying to target the data element itself, not one that contains value.
<div class="container">
<div data-am-content>...</div>
</div>
.container {
[data-am-*] {
...
}
}
I know about targeting with a value
<div class="container">
<div data-am-content="value">...</div>
</div>
.container {
[data-am-content~="value"] {
...
}
}
create more classes for your div elements and refer to them
<div class="container am-foo am-bar"></div>
you can refer to them in css as either
.container
.am-foo
.am-bar
Does not have to be on container just add classes to element
Sorry but there is no way to select partial data attribute however you can style for every possible data attributes separately like
[data-rm-content] {
/* Some Styles */
}
[data-rm-type] {
/* Some Styles */
}
https://jsfiddle.net/w0a29rxu/3/
Edit: You can easily do with javascript see this Question How can I select an element with jQuery by matching a partial attribute?
Suppose I have two elements with multiple classes:
<p class="fruit-apple something">First</p>
<p class="whatever fruit-banana">Second</p>
How can I use the “pipe” selector (|=) to select the fruit- classes?
I have tried something like the following but this seems not to work.
p[class|=fruit] {
color: red;
}
<p class="fruit-apple something">First</p>
<p class="whatever fruit-banana">Second</p>
This is clearly because in the second case, the class string does not begin with fruit-, and the selector is matching naively.
The |= selector only selects the starting portion of the specified attribute.
You'll want the *= operator instead.
p[class*=fruit-]
It will search for classes that contain the phrase fruit-x where x is anything you want.
p[class*=fruit-] {
color: red;
}
<p class="fruit-apple something">First</p>
<p class="whatever fruit-banana">Second</p>
<p class="whatever fruit">Third (No selection)</p>
<p class="fruit noselect">Fourth (No selection)</p>
This question already has answers here:
Is there a CSS selector by class prefix?
(4 answers)
Closed 7 years ago.
So I was wondering if there was a way to throw a wildcard into my CSS?
I have several classes that are .button-0, .button-1, .button-2, .button-3, etc. within a button element. I want to get all the .button-* classes to define.
Is it possible to do something like:
button .button-[=*] {
margin-right: 2rem;
}
Use an attribute selector:
button [class*="button-"] {
margin-right: 2rem;
}
Example Here
From MDN:
[attr*=value] - Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.
button [class*="button-"] {
color: red;
}
<button>
<span class="button-0">text</span>
<span class="button-1">text</span>
<span class="button-2">text</span>
</button>
As Chad points out, it is entirely possible that an element can contain a class such as this-is-my-button-class. In which case, that undesired element would be selected. In order to prevent this, you could use a combination of two selectors:
Example Here
button [class^="button-"],
button [class*=" button-"] {
margin-right: 2rem;
}
The selector button [class^="button-"] ensures that the element will be selected if it starts with button-. Since it's possible the element's first class doesn't start with button-, the selector [class*=" button-"] (note the whitespace), ensures that it will be selected.
You can do like this
button[id|=button]{
color:red;
}
All buttons whose id contain the word button will get affected. For example http://jsfiddle.net/czp28jpb/