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?
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 answers here:
Is there a CSS parent selector?
(33 answers)
Closed 5 years ago.
I have html like this
<div class="node-inner">
...
test
...
</div>
I want to use usercss to remove the content of <div class="node-inner"> if it contains href="/test/profile".
My approach
.node-inner[class='node-inner'] {
display: none;
}
filters everything. How do I remove the content of a div with class node-inner only if it contains href="/test/profile"?
You can do it via JS
here's a quick example of doing that through jQuery:
$('.node-inner > [href="/test/profile"]').css('display', 'none')
Fiddle (With jQuery)
And here how you can do it with vanilla javascript:
document.querySelectorAll('.node-inner > [href="/test/profile"]').forEach(function(el) {
el.style.display = "none";
})
Fiddle (With Javascript)
This question already has answers here:
CSS select elements with partial id
(2 answers)
Closed 6 years ago.
The html page contains div ID s like q1r1, q1r2, q1r3,q2r1,q2r2,q2r3,.... How to select these ID in CSS to apply styles at once? If ID's were just q1,q2, q3.., it could be done as id^="q".
You can do [id^q]:
JS Fiddle
[id^=q] {
// common styles
}
And if there is a certain id you would like to omit you can use [id^=q]:not(#idname):
JS Fiddle
OR if you want to exclude ids that start with a certain pattern, combined the two like:
JS Fiddle
/* All ids that start with "q" but not "qr" */
[id^=q]:not([id^=qr]) {
// Styles here
}
BUT I would absolutely recommend adding a common class since that is for what they are designed. If an id can be added via python, I would think a class could be added as well.
By using '^' selector the styles can be applied
<!DOCTYPE html>
<html>
<head>
<style>
div[id^="q"] {
background: #ffff00;
}
</style>
</head>
<body>
<div id="q1r1">The first div element.</div>
<div id="q1r2">The second div element.</div>
<div id="q2r2">The third div element.</div>
<p id="q2r1">This is some text in a paragraph.</p>
</body>
</html>
This question already has answers here:
Is there a CSS selector by class prefix?
(4 answers)
Closed 8 years ago.
Twitter Bootstrap's different column selectors have different CSS properties. Col-md-1 has a smaller width than col-md-2. However, they all have some properties in common.
How can one rule be created that applies to multiple classes who all share the same prefix?
I imagine something like this:
.col*{
margin:0,2%;
}
.col-md-1{
width:4.3333333333%;
}
.col-md-2{
width:6.33333333%;
}
In the example above, both of .col-md-1 and .col-md-2 would have a margin of 0,2%. What is the correct way (if any) of doing this?
You can use :
[class^=col] {margin:0.2%;}
div {
height: 50px;
margin: 10px;
}
[class^=col] {
background: red;
}
<div class="col-md-1"></div>
<div></div>
<div class="col-md-2"></div>
This ^= means "begins with". You could also use the [class*=col] or [class*=md] for more info, see the specs on substring matching attribute selectors.
(Note that you should be using a dot instead of a comma or a white space in the margin value declaration)
You can either use a ^= operator (starts with), or a |= operator (is on a dash-separated list):
[class^=col] {
/* this will work just for prefixes */
}
[class|=col] {
/* this will work for any dash-separated segment... */
}
[class|=md] {
/* ...such as "md" in your case */
}
A word of warning, though - these aren't the best selectors in terms of performance. Try not to use them extensively.
I have a slider that's marked up like so:
<div class="slider wide">
//slider html in here
</div>
And another marked up like so:
<div class="slider narrow">
//slider html in here
</div>
Is it possible to reference each of these like this in my CSS file by in a way concatenating the class names:
.slider.wide { //css specific to the wide slider goes here }
.slider.narrow { //css specific to the wide slider goes here }
No, you make three classes .slider, where you put common slider css, and .narrow where you put narrow slider specific css, and .wide where you put wide slider specific css.
.slider { //css common among all sliders goes here }
.wide { //css specific to the wide slider goes here }
.narrow { //css specific to the narrow slider goes here }
Yes, .slider.narrow is valid. It's not exactly concatenating the class names, it's making two different class selectors and applying them to the same element. So .narrow.slider is also valid and will match the same elements.
The problem with using multiple class selectors against a single element is that is doesn't work in IE6. This browser will ignore all but the last class selector. So to support that browser you typically end up using something like class="slider wide-slider".