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.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I'm trying to make the second paragraph after a h1 have a dropcap (the first is author and date).
This works but doesn't do what I want (it makes the first paragraph have a dropcap):
h1 + p::first-letter {}
This doesn't work:
h1 + p + p::first-letter {}
h1 + p:nth-child(2)::first-letter {}
But why not? Can you not combine css selectors like this?
This other question does not apply and as such is not a dupe.
Looking at the two you say don't work, consider this structure:
h1+p+p::first-letter {
color: red;
}
h1+p:nth-child(2)::first-letter {
color: blue;
}
<body>
<h1>H1</h1>
<p>P1</p>
<p>P2</p>
</body>
This gives:
The first P is blue because we've told it to select the p element which is the second child of its parent - and h1 is the first child (of body as the parent in this example) so the first p element is selected. If you want it to select the child of a certain type then you'd have to use child-of-type rather than nth child.
The second P is red because we've told it to select the immediate sibling of a p element which is itself the immediate sibling of an h1 element.
That is, this setting works to select the second p element.
You state that it does not work which must mean there is something interfering with that selection - another element in between perhaps?
What you might want to do is, if it's possible in your situation, add a relevant class to the <p> element. The class could be named main-content, for example. Then style it as required: .main-content::first-letter { ... }
.main-content::first-letter {
color: red;
}
<h1>Hello World</h1>
<p>Stuff in here.</p>
<p class="main-content">Wow look at this!</p>
If you really can't add a class, then you can write it like this. This is not recommended though:
p:nth-of-type(2)::first-letter {
color: red;
}
<h1>Hello World</h1>
<p>Stuff in here.</p>
<p>Wow look at this!</p>
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 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:
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?