I have 5 paragraphs in my div and I need to style them differently.
Is there an easier way to do it rather than giving each paragraph a different class?
<div class="container-fluid">
<div class="row">
<div class="col bg-dark text-white">
<p class="text">Nikolina Tute 2 Mount Street, Manchester M2 5WQ</p>
<p class="text-2">#1 in Customer Service in the UK</p>
<p class="text-3">Free Shipping for Orders over 60$</p>
<p class="text-4">support#hlfonline.co.uk</p>
<p class="text-5">07441 430 469</p>
</div>
</div>
</div>
Just make a standard class and then make micro classes for the changes you want:
<p class="p-class"> Some Text </p>
<p class="p-class"> Some Text </p>
<p class="p-class diff-class"> I'm Different!! </p>
.p-class{
background: green;
text-align: center;
font-size: 1rem;
}
.diff-class{
"Some different stuff here"
}
If you don't want to write in the class name for each paragraph than you can replace ".p-class" with just "p" Keep in mind this will affect all "p" elements.
I'm aware these aren't good class-naming conventions.
Generally speaking, if each P tag needs to be accessed differently. Then yes you will need to put an ID/Class selector on each p tag. You can either use an ID on each p tag or do some type of subclasses in CSS and take advantage of the cascading effect.
.base{
color: green;
}
.firstP{
color:red
}
.lastP{
color: purple;
}
<div>
<p class="base firstP">Some text</p>
<p class="base">Some text</p>
<p class="base">Some text</p>
<p class="base">Some text</p>
<p class="base lastP">Some text</p>
</div>
Another thing you could do if you wanted to have cleaner markup in the HTML is nth-child selector. This way you HTML doesn't have a bunch of classes on it and all the work is done in the CSS file
#base p{
color: green;
}
#base p:nth-child(1){
color: red;
}
#base p:nth-child(5){
color: purple;
}
<div id="base">
<p >Some text</p>
<p >Some text</p>
<p >Some text</p>
<p >Some text</p>
<p >Some text</p>
</div>
Related
I have some HTML where I would like just the first h1 anywhere within .main to have specific styling. The first h1 might not be directly under .main and other h1s could be anywhere further down with any level of nesting.
The example code shows a few possible HTML structures, but it could be anything.
EDIT: I am wondering if there is a generic solution that excludes other h1s from the :first-child styling, rather than creating additional rules to "remove" the styling from the :first-child rule. Other h1s are not necessarily nested with divs and the css will need to work for many different HTML structures. The example below is a specific and very simplified version of what might be produced in real life. I have added some other example HTML structures in the code.
h1 {
color: black;
}
.main h1:first-child {
color: red;
}
<div class='main'>
<h1>First h1 - goal is to be red</h1>
<h1>Second h1 - goal is to be black</h1>
<div>
<h1>Third h1 - goal is to be black</h1>
</div>
</div>
<hr>
<div class='main'>
<div>
<h1>First h1 - goal is to be red</h1>
<h1>Second h1 - goal is to be black</h1>
</div>
<div>
<h1>Third h1 - goal is to be black</h1>
</div>
</div>
<hr>
<div class='main'>
<div>
<div>
<div>
<h1>First h1 - goal is to be red</h1>
</div>
<h1>Second h1 - goal is to be black</h1>
</div>
</div>
<h1>Third h1 - goal is to be black</h1>
</div>
<hr>
<div class='main'>
<div>
<div>
<div>
<h1>First h1 - goal is to be red</h1>
</div>
<h1>Second h1 - goal is to be black</h1>
</div>
</div>
<div>
<div>
<h1>Third h1 - goal is to be black</h1>
</div>
</div>
</div>
Is this what you wanted?
h1 {
color: black;
}
#main h1:first-child {
color: red;
}
#main div h1:first-child {
color: black;
}
<div id='main'>
<h1>First Child - goal is to be red</h1>
<h1>Second Child - goal is to be black</h1>
<div>
<h1>Subdiv first child - goal is to be black</h1>
</div>
</div>
So, if this is the HTML of an element:
<div class="parent">
<div class="ignore-me">
<p class="child">ignore me</p>
<p class="child">ignore me</p>
<p class="child">ignore me</p>
<!-- I don't know how many <p> gonna be here -->
</div>
<p class="child">paint me green</p>
<p class="child">paint me blue</p>
</div>
How can I :
Select the children .child but not the ones inside the
div.ignore-me?
Select them separately, based on their index order.
I tried to use a mix of > and :nth-child(n) like this:
.parent > .child:nth-child(1)
But, it doesn't work!
Can this be done only CSS?
.parent > .child:nth-child(1) {
background: green;
}
.parent > .child:nth-child(2) {
background: blue;
}
<div class="parent">
<div class="ignore-me">
<p class="child">ignore me</p>
<p class="child">ignore me</p>
<p class="child">ignore me</p>
<!-- I don't know how many <p> gonna be here -->
</div>
<p class="child">paint me green</p>
<p class="child">paint me blue</p>
</div>
Use div.parent > p.p
> is the child combinator. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.
div.parent > p.p {
color:green;
}
<div class="parent">
<div class="ignore-me">
<p class="p">don't select me</p>
<p class="p">don't select me</p>
<p class="p">don't select me</p>
<!-- I don't know how many <p> gonna be here -->
</div>
<p class="p">select me</p>
<p class="p">select me too</p>
</div>
The accepted answer can be further simplified to div.parent > p, because > already only selects direct children.
div.parent > p {
color:green;
}
<div class="parent">
<div class="ignore-me">
<p>don't select me</p>
<p>don't select me</p>
<p>don't select me</p>
<!-- I don't know how many <p> gonna be here -->
</div>
<p>select me</p>
<p>select me too</p>
</div>
Regarding
Select them separately, based on their index order.
you can use :nth-child, but be aware that :nth-child also counts <div class="ignore-me"> as a child of <div class="parent">. So your first <p class="child"> is the second child. You can then use even and odd to alternate between the children.
div.parent > p {
color:green;
}
div.parent > p:nth-child(odd) {
color:blue;
}
<div class="parent">
<div class="ignore-me">
<p class="child">ignore me</p>
<p class="child">ignore me</p>
<!-- I don't know how many <p> gonna be here -->
</div>
<p class="child">paint me green</p>
<p class="child">paint me blue</p>
<p class="child">paint me green</p>
<p class="child">paint me blue</p>
</div>
Selecting direct nth p tag inside "parent" class
div.parent>p.child:nth-child(2) {
background: green;
}
div.parent>p.child:nth-child(3) {
background: blue;
}
div.parent>p.child:nth-child(4) {
background: green;
}
we can slect odd and event children
div.parent>p.child:nth-child(odd) {
background: green;
}
div.parent>p.child:nth-child(even) {
background: red;
}
I want to grab all the class name ('my-class') and change it's color to red EXCEPT for the last one
Apparently I've been googling and there's no such thing as :last-of-class or whatever. I'm having trouble trying to find a work around without using JS.
div1 and div2 are both dynamic! If div2 doesn't exist, then div1 should have the first p element red and the second not.
Please note I left a 'p' tag at the top because I don't want that being part of my selector. I just need the 'my-class' specifically.
or is there a selector I can write to grab all "p"s inside of my-container which include nested P's
<p>Some text</p>
<div class="my-container">
<div class="div1">
<p class="my-class"></p>
<p class="my-class"></p>
</div>
<div class="div2">
<p class="my-class"></p>
<p class="my-class"></p>
<p class="my-class"></p>
<p class="my-class"></p> <!-- This tag should not be red-->
</div>
</div>
I can also use sass so feel free to include that in if need be.
I don't know of any SINGLE rule that would do this, but a simple workaround would be to use 2 separate rules in conjunction:
.my-class {
color: red;
}
.div-2 .my-class:last-child {
color: // whatever you want the default to be
}
note that the order is important, setting the last child's color should be done after setting everything first
You can use the workaround below.
use div:last-child . that will select the last div in the container and if there is only one, it will select it and so...the last p from the last div will be of other color ( in this example )
.my-container div p.my-class {
color:red;
}
.my-container div:last-child p.my-class:last-child {
color:blue;
}
<p>Some text</p>
<div class="my-container">
<div class="div1">
<p class="my-class">a</p>
<p class="my-class">a</p>
</div>
<div class="div2">
<p class="my-class">a</p>
<p class="my-class">a</p>
<p class="my-class">a</p>
<p class="my-class">b</p> <!-- This tag should not be red-->
</div>
</div>
This will get the behavior you're looking for without any forced reflow:
.my-class:not(:last-child) {
color: red;
}
<p>Some text</p>
<div class="my-container">
<div class="div1">
<p class="my-class">a</p>
<p class="my-class">b</p>
</div>
<div class="div2">
<p class="my-class">c</p>
<p class="my-class">d</p>
<p class="my-class">e</p>
<p class="my-class">f</p> <!-- This tag should not be red-->
</div>
</div>
hi I want to add css in title sections in my page
I have a different sections in 1 page
but I want to change in each section fonts and color of title text
but not sure about how to do that
Give each section a class, and then apply the stylings to the children of that class. For example:
.section-1 h2{
color:#fff;
}
.section-1{
background-color:orange;
}
.section-1 p{
color:blue;
}
.section-2 h2{
color:#fff;
}
.section-2{
background-color:peachpuff;
}
.section-2 p{
color:black;
}
.section-3 h2{
color:#fff;
}
.section-3{
background-color:pink;
}
.section-3 p{
color:purple;
}
<html>
<head></head>
<body>
<div class="section-1">
<h2>Section 1</h2>
<p>Filler paragraph text</p>
</div>
<div class="section-2">
<h2>Section 2</h2>
<p>Filler paragraph text</p>
</div>
<div class="section-3">
<h2>Section 3</h2>
<p>Filler paragraph text</p>
</div>
<div class="section-4">
<h2>Section 4</h2>
<p>Filler paragraph text</p>
</div>
</body>
</html>
You can make separate css options via Id attribute.
Check out https://www.w3schools.com/html/html_css.asp. "The id Attribute"
You can use the style attribute
https://www.w3schools.com/tags/att_style.asp
<h1 style="color:blue;text-align:center">This is a header</h1>
<p style="color:green">This is a paragraph.</p>
So, in my code i have the following possibilities:
<div class="price-box">
<p class="was-old-price">$PRICE$</p>
<p class="special-price">$PRICE$</p>
</div>
or
<div class="price-box">
<p class="old-price">$PRICE$</p>
<p class="special-price">$PRICE$</p>
</div>
I want when .was-old-price get printed insted of .old-price, the .special-price has display:none properties. is this possible to achieve this using CSS?
You can do that with the the Adjacent Sibling Combinator (+) selector:
.was-old-price + .special-price {
display: none;
}
The E + F selector selects the F element immediately following the E element. In this case, the .special-price element immediately following the .was-old-price element. Here's an example:
.was-old-price + .special-price {
display: none;
}
<h3>Box 1</h3>
<div class="price-box">
<p class="was-old-price">was-old-price</p>
<p class="special-price">special-price</p>
</div>
<h3>Box 2</h3>
<div class="price-box">
<p class="old-price">old-price</p>
<p class="special-price">special-price</p>
</div>