How to make CSS apply on specific specific elements? - html

Question

I am trying to create a timeline as the one thats shown here.
In the example the author uses the <p> tag in the CSS to display the timeline effect. When I use this code in my code. Every section where I've used a <p> tag gets the CSS effect, which I don't want.
So to avoid this I tried to use an ID I gave all of the <p> tags where I wanted the effect to show up an ID and I declared the CSS in the CSS file with the ID.
This is what I tried:
#te p {
border-top: 2px dashed;
border-color: blue !important;
margin: 0;
padding: 30px;
}
#te p:nth-child(even) {
border-left: 2px dashed;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
margin-right: 30px;
padding-right: 0;
}
#te p:nth-child(odd) {
border-right: 2px dashed;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
margin-left: 30px;
padding-left: 0;
}
#te p:first-child {
border-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
#te p:last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
<div>
<p id="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
<p id="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
<p id="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
<p id="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
<p id="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
</div>
But it did not work. The CSS didn't execute. After that I tried what was suggested in this stack overflow question. But that didn't work either.
So how do I apply this CSS to only the few <p> tags mentioned here and not any of the other <p> tags that exist somewhere else in the code?
Thank you

Answer 1

Your code doesn't work, because after the ID, there's a space, which will try to select a descendant of the #te, that match p.
So you have to reverse the order of these selectors, and remove the space, like:
p#te
And, IDs meant to be unique, so you should use a class instead (you can select it via . instead of #).
So, your code should look like:
p.te{
border-top: 2px dashed;
border-color: blue !important;
margin: 0;
padding: 30px;
}
p.te:nth-child(even) {
border-left: 2px dashed;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
margin-right: 30px;
padding-right: 0;
}
p.te:nth-child(odd) {
border-right: 2px dashed;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
margin-left: 30px;
padding-left: 0;
}
p.te:first-child {
border-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
p.te:last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
<div>
<p class="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
<p class="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
<p class="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
<p class="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
<p class="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
</div>

Answer 2

ids in HTML must be unique... use classes instead:
p.te {
border-top: 2px dashed;
border-color: blue !important;
margin: 0;
padding: 30px;
}
p.te:nth-child(even) {
border-left: 2px dashed;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
margin-right: 30px;
padding-right: 0;
}
p.te:nth-child(odd) {
border-right: 2px dashed;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
margin-left: 30px;
padding-left: 0;
}
p.te:first-child {
border-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
#te p:last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
<div>
<p class="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
<p class="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
<p class="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
<p class="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
<p class="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
</div>

Answer 3

The reason you're code was not working was the selectors were not used properly.
As you can see below, I slightly tweaked your code and it works fine.
Cheers.
P.S. IDs should be unique. Please use classes when targeting more than one element.
#te {
border-top: 2px dashed;
border-color: blue !important;
margin:0; padding: 30px;
}
#te:nth-child(even) {
border-left: 2px dashed;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
margin-right: 30px;
padding-right: 0;
}
#te:nth-child(odd) {
border-right: 2px dashed;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
margin-left: 30px;
padding-left: 0;
}
#te:first-child {
border-top: 0;
border-top-right-radius:0;
border-top-left-radius:0;
}
#te:last-child {
border-bottom-right-radius:0;
border-bottom-left-radius:0;
}
<div>
<p id="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
<p id="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
<p id="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
<p id="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
<p id="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
</div>