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>
Related
I’m working with a HTML file where empty lines are made using: <p><br/></p>. How do I target paragraph elements after this empty lines? I have tried br + p with no result.
[Note: It is not evident for everybody that this is a parent’s selector problem, for it is not about targeting the (parent) paragraph element that contain the line break, but the one following it.]
Note: I generally do not support javascript solutions to CSS questions. However, a pure CSS solution would probably require a relational pseudo class. Currently (as per january 2018) :has() is a part of the CSS Selectors Level 4 Working Draft, but unfortunately it's not (yet?) supported by any browsers.
What you are asking can be achieved with a combination of javascript and CSS. You may use javascript to find paragraphs that contain only linebreaks, and then add a class to these paragraphs (e.g. a class named linebreak). Then use CSS to style the paragraphs immediately following the ones containing line breaks using the CSS adjacent sibling selector (+).
// Find all <br> elements that are children of a <p> element
for(let br of document.querySelectorAll('p > br')) {
// Climb one level up the DOM to select the parent <p>
let p = br.parentNode
// Use regex to check if the <p> contains only linebreaks
if( p.innerHTML.match(/^(<br\s?\/?>)+$/gi)) {
// If so, add the class 'linebreak'
p.classList.add('linebreak')
}
}
/* Select the <p> following the one containing linebreaks */
p.linebreak + p {
color: red
}
<p>Paragraph</p>
<p>Paragraph</p>
<p><br></p>
<p>Paragraph after linebreak (Should be red)</p>
<p>Paragraph</p>
<p><br><br></p>
<p>Paragraph after double linebreak (Should be red)</p>
<p>Paragraph</p>
<p>Paragraph</p>
I do not know a way in CSS, but using jQuery, you can do that.
This is the HTML file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="s.css">
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="sh.js"> </script>
</head>
<body>
<p>LILI</p>
<br>
<p>Dina</p>
<p>ADEM</p>
</body>
</html>
Just use this jQuery:
$( document ).ready(function() {
$( "br" ).nextAll().css( "font-size", "35px" );
});
So it will apply to all paragraph elements after this empty line.
Using that, Dina and ADEM will have font-weight: 35px, while LiLi still normal. If you want to use more than one style you can do:
$("br").nextAll().css({"color":“beige","font-size":“35px",....});
If you want to only target one paragraph after <br> use the jQuery closest() method.
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?
This question already has answers here:
CSS 3 nth of type restricted to class [duplicate]
(2 answers)
Closed 7 years ago.
I have a list of elements to wich I want to add a different color depending on the even/odd BUT only elements with a special class.
<!DOCTYPE html>
<html>
<head>
<style>
p.class:nth-of-type(odd) {
background: #ff0000 ;
}
p.class:nth-of-type(even) {
background: #0000ff ;
}
</style>
</head>
<body>
<p class="class">The first paragraph.</p>
<p>The second paragraph.</p>
<p class="class">The third paragraph.</p>
<p class="class">The fourth paragraph.</p>
</body>
</html>
The result I expect is :
red
normal
blue
red
But the real result is :
red
normal
red
blue
Thanks for your answers.
This is because the odd/even is based off of what position it is relative to its parent, not relative to its "like" divs. It would be most efficient just to give the divs individual classes.
It doesn't appear that you can target classes, so regardless of what the class is it uses the p tag as the type (see the below link):
css3 nth of type restricted to class
If you allowed to use jQuery I would suggest the following snippet to set odd/even classes. You can't do it with pure CSS anyway as it was discussed here: css3 nth of type restricted to class
Here is the snippet: http://jsfiddle.net/webyourway/wsfxxcn9/11/
$(document).ready(function () {
$('.class').each(function(i){
if (i % 2 == 0) {
$(this).addClass('even');
} else {
$(this).addClass('odd');
}
});
})
You can use any version of jQuery.
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.