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>
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 3 years ago.
Improve this question
I've had a lot success of applying pseudo elements to single class, but when I only want it to work when a parent class (we'll say .foo) also applies, the content is not applied before the other class specified (in this case, 'bar):
.foo .bar:before {
content: "URL: ";
}
Is there some way to achieve this?
Update
Actual example:
.metajelo-ui_resourceMDSource:before {
content: " Resource Metadata Source ";
font-weight: bold;
}
/* FIXME: this is not working for some reason: */
.metajelo-ui_resourceMDSource.metajelo-ui_url:before {
content: "URL: ";
}
The idea is that :before should be triggered on any url-bearing element that is also a resourceMDSource-bearing element (taking the .metajelo-ui_ prefix into account).
As we can see, there is a ::before for the .metajelo-ui_resourceMDSource, which corresponds to the first style posted above, however, the highlighted span with the url class has no ::before shown, and there is no "URL: " being rendered on the page.
In case this isn't descriptive enough, here is a live demo: https://labordynamicsinstitute.github.io/metajelo-ui/ (click add item for Supplementary Products) - will be happy to fill in more details later.
If you apply the class to the same element...
HTML
<div class="foo bar"></div>
Then your CSS should look like this...
.foo.bar:before { [rules here] }
If the class is on any ancestor like this...
<div class="foo">
<div class="bar"></div>
</div>
Then your CSS should look like this (space between classes)...
.foo .bar:before { [rules here] }
Just remove the space between .foo and .bar to select multiple classes (element is .foo also is .bar).
Here's the code:
.foo.bar:before {
content: "URL: ";
}
<p class="bar alo">bar without foo</p>
<p class="bar foo">bar with foo</p>
Have worked example:
.hov:hover+.next+.result {
color: red;
}
<div class="hov">hover</div>
<div class="next">next</div>
<div class="result">result</div>
jsfiddle
When hover on first element the third element have result. Any shorthen version of + + if i need more + +, something like .hov:hover+div:nth-child(2) - but this not work.
+ is Adjacent sibling selector in CSS, so it requires both selector elements to be next to each other. Instead, you can use ~ which is General Sibling selector here, which doesn't require the two elements to be next to each other.
.hov:hover ~ .result {
color: red;
}
<div class="hov">hover</div>
<div class="next">next</div>
<div class="result">result</div>
There is no way to make what you want to do shorter. This is simply the way the selector works. The solution you proposed (element + next(3) or whatever syntax you whish to use there) does not exist.
Your selector has some issues if you change the structure of your HTML (for example add a paragraph in between). What you can do to make your code more reliable is answered by Nisarg and use the ~ selector to select elements.
Why not change the HTML and make it more reliable? What you are doing here is working for you maybe, but if you make changes to your HTML this CSS breaks. Try adding classes for all items you want selected. Don't worry if you have three or four classes on elements, that is completely normal.
.hov:hover {
color: red;
}
<div class="hov">hover</div>
<div class="next hov">next</div>
<div class="result hov">result</div>
Snippet:
#Check:hover+p,
h1 {
color: yellow;
}
<button id="Check">Test Me</button>
<p>Color will be changed to yellow</p>
<h1>Color will be changed to yellow</h1>
Can you please clarify where i went wrong?
The , applies to entire simple selectors. Your selector is parsed as #Check:hover + p or h1.
You need to repeat the #Check:hover + part after the comma.
You can do it the following way:
#Check:hover+p, #Check:hover+p+h1 {
color: yellow;
}
<button id="Check">Test Me</button>
<p>Color will be changed to yellow</p>
<h1>Color will be changed to yellow</h1>
You need to add #Check:hover as well, and then, in order to find the desired h1 you need to show the code its way. If you just add #Check:hover+h1 it thinks it is the first element after the button.
So in order to do it you need to add #Check:hover+p+h1 to tell the code the path, the first element +p and then the second element +h1
Hope this helps
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{...}
I have the following
<p class="main yellow">Hello World</p>
I would like to write a css element that refers to only elements with main and yellow. Is there a way to do this?
Eg. the following doesn't work, but would be what I'm after
.main + .yellow { color:green }
This should grab it:
.main.yellow { color:yellow; }
Though you may get differing results in different browsers. I use QuirksMode to get an idea of what will/won't work cross browser.
You just need to specify them as
.main.yellow { color: green; }
No space between the two classes.
does this work for you?
.main.yellow{
color:green;
}
As others have already said, what you want is:
.main.yellow { color:green; }
However, let me quickly explain why your first attempt didn't work. The + keyword refers to a following element, i.e. the element after.
Your example would have matched the following HTML...
<p class="main">Hello</p>
<p class="yellow">World</p>
...and styled the second paragraph (.yellow) green. So ".main + .yellow" means "select a .yellow that is immediately after a .main".