This question already has answers here:
Make the first character Uppercase in CSS
(8 answers)
Capitalize first letter of sentences CSS
(4 answers)
Closed 5 years ago.
<div class="ex1">
<div>
<p></p>
<p>Exmaple 1</p>
<p>Exmaple 2</p>
</div>
</div>
i can't select first character in "Exmaple 1" with css and i finding solution
Thanks for support
If you are talking about styling the first letter, then use :first-letter pseudo-element
.ex1 p:first-letter{
color:red;
font-size:2em;
}
<div class="ex1">
<div>
<p>Example 1</p>
<p>Example 2</p>
</div>
</div>
If you want to only apply it in the first p then also use :first-of-type
.ex1 p:first-of-type:first-letter{
color:red;
font-size:2em;
}
<div class="ex1">
<div>
<p>Example 1</p>
<p>Example 2</p>
</div>
</div>
Finally, if you just want to target the second element then use :nth-child(2) or the second p then :nth-of-type(2)
.ex1 p:nth-child(2):first-letter{
color:red;
}
.ex1 p:nth-of-type(2):first-letter{
font-size:2em;
}
<div class="ex1">
<div>
<p></p>
<p>Example 1</p>
<p>Example 2</p>
</div>
</div>
Related
I have the following html
<div class="parentt">
<p>p 1</p>
<p>p 2</p>
<p>p 3</p>
</div>
so if i want to style the second p inside my parentt class i will do
.parentt > p:nth-child(2) {
border: 1px solid red;
}
but when my html is mixed
<div class="parentt">
<p>p 1</p>
<h2>sdsd</h2>
<p>p 2</p>
<p>p 3</p>
</div>
and i put inside h2 tag, my css is not working any more because now nth-child 2 is not paragraph but it is h2.
How can i dynamically first select all p inside and after that to select the second p inside?
Because sometimes the second p inside the parrent can appear on nth-child number 8 for example.
I can't change every time my css.
In such cases you could use nth-of-type instead of nth-child
.parentt > p:nth-of-type(2) {
border: 1px solid red;
}
<div class="parentt">
<p>p 1</p>
<h2>sdsd</h2>
<p>p 2</p>
<p>p 3</p>
</div>
Use nth-of-type
.parentt > p:nth-of-type(2) {
border: 1px solid red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
You can use :nth-of-type() pseudo selector. You can read more here
.parentt p:nth-of-type(2) {
border:1px solid red;
}
<div class="parentt">
<p>p 1</p>
<h2>sdsd</h2>
<p>p 2</p>
<p>p 3</p>
</div>
Is it possible to address the first element in a div when you don't know what the first element is.
I have for example two different divs
<div class="templateOne">
<h1>Header 1</h1>
</div>
<div class="templateOne">
<h2>Header 2</h2>
</div>
That I can then say
.templateOne > * {
margin-top: 0em;
}
or something like that.
If you want to use adress the first child element, you can use the :first-child or the :nth-child(1) pseudo-selector.
.templateOne :first-child {
color: red;
}
<div class="templateOne">
<h1>Header 1</h1>
<p>Content 1</p>
</div>
<div class="templateOne">
<h2>Header 2</h2>
<p>Content 2</p>
</div>
If you want to address only the first element with a specific class name you can use :first-of-type or nth-of-type(1):
.templateOne:first-of-type {
color: red;
}
<div class="templateOne">
<h1>Header 1</h1>
<p>Content 1</p>
</div>
<div class="templateOne">
<h2>Header 2</h2>
<p>Content 2</p>
</div>
> child combinator
* universal selector
:first-child
.templateOne > *:first-child {
margin-top: 0em;
}
This question already has answers here:
Can the :not() pseudo-class have multiple arguments?
(5 answers)
Closed 1 year ago.
For eg.
I don't want that the CSS property should not be applied on the h4 tag
.abc {
color: red;
}
<div class="abc">
<h4>Hello 1</h4>
<p>Hello 2</p>
<p>Hello 3</p>
</div>
Try the :not pseudo-class
.abc :not(h4) {
color: red;
}
<div class="abc">
<h4>Hello 1</h4>
<p>Hello 2</p>
<p>Hello 3</p>
</div>
This question already has an answer here:
Why :first-child selector not working on div?
(1 answer)
Closed 5 years ago.
My HTML Code:
<article class="post" id="first">
<header>
<h1>Title</h1>
</header>
<p>First paragraph</p>
<p>Second paragraph</p>
<footer>
<p>This is a footer</p>
</footer>
</article>
My CSS code:
.post p:first-child {color: green;}
I can't understand why this paragraph stays green : <p>This is a footer</p> instead of this one: <p>First paragraph</p> since this is the first element child <p> of the class .post
Can you explain me ?
Thanks in advance.
Since you do no have a direct descendent selector (>) it will select any first-child of any descendant of .post.
To get the result you want, you must write .post > p:first-of-type, which will select the first direct child element p to appear in .post.
.post > p:first-of-type { background-color: green; }
<article class="post" id="first">
<header>
<h1>Title</h1>
</header>
<p>First paragraph</p>
<p>Second paragraph</p>
<footer>
<p>This is a footer</p>
</footer>
</article>
I have a HTML that is messed and i can not change it, it looks like this:
<div>
<h2>This is a title cat</h2>
<p>This is a message</p>
<p>One cat</p>
<p>Two cat</p>
<p>Three cat</p>
<h2>This is a title dog</h2>
<p>Dog 0</p>
<p>Dog 1</p>
<p>Dog 2</p>
<p>Dog 3</p>
</div>
Now i would like to make every odd p that comes after a h2 element bolder.
So i would like this to be in bold:
This is a message
Two cat
Dog 0
Dog 2
How to write a selector in CSS (no jQuery, no JS available) to make those texts bold?
You can do this by using the css ~ selector, followed by the nth-of-type (alternatively nth-child) selector. You can read more about it these selectors on the MDN: General Sibling Selector and :nth-of-type.
And here's how to achieve what you wanted. Essentially, you're selecting all odd <p> elements that are siblings (i.e that come after) an <h2> tag.
h2 ~ p:nth-of-type(odd) {
font-weight: 600;
}
<div>
<h2>This is a title cat</h2>
<p>This is a message</p>
<p>One cat</p>
<p>Two cat</p>
<p>Three cat</p>
<h2>This is a title dog</h2>
<p>Dog 0</p>
<p>Dog 1</p>
<p>Dog 2</p>
<p>Dog 3</p>
</div>
h2 ~ p:nth-of-type(2n+1){
font-weight: 600;
}