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{...}
Related
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>
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>
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?
In the IUI css file, they use the following selectors:
body > *:not(.toolbar)
body > *[selected="true"]
What does the >, *:not() and *[] mean?
Thanks.
> means "is a child element of". So body > *:not(.toolbar) matches *:not(.toolbar) that is a child of body.
*:not(.toolbar) matches any element that does not have the class .toolbar.
*[selected="true"] matches any element with the selected attribute equal to true.
Keep in mind that the last two (*:not() and *[] are part of the CSS3 spec and you usually can't rely on them for cross-browser CSS compatibility. They are, however, fully supported in WebKit which is what the iPhone (and consequently iUI) use.
> means a direct child
* is a universal selector (everything)
:not() means anything except what's in the parentheses
*[] means anything that matches what's in the brackets
In your case:
body > *:not(.toolbar) // means any element immediately under the body tag that isn't of class .toolbar
body > *[selected="true"] // means any element immediately under the body tag where the selected attribute is "true"
> and * are defined in the CSS 2.1 specification. The :not pseudo class and the [] selector are defined in the CSS 3 specification.
See: http://www.w3.org/TR/CSS21/selector.html and http://www.w3.org/TR/css3-selectors/ for more info.
> - Child selector
I.e.
div > p > b {
font-size:100px;
}
This will select all b tags inside p tags inside div tags.
:not(..) - not selector
Matches any element on the page that does not meet the criteria in the parenthesis of the not statement. i.e.
div:not(.toolbar)
Will match any div that does not have the class toolbar
[attr='val'] - attribute selector
This matches any element where the attribute matches the specified value. Example if you want to make all checked check boxes red.
input[checkec='true'] {
background-color:red;
}
You should Google CSS 2.1 selectors for more information.
means child element
.cont > div {
color: #fff;
}
This would be:
<div class="cont">
<!-- NOTE: THIS NOTE IS TO TELL YOU WHICH IT AFFECTS
It only affects the below div. Not the p.
so "jabberwocky" text would be white, but "lorem ipsum" text in the p, would be the default font color. -->
<div>jabberwocky</div>
<p>lorem ipsum</p>
</div>