I want to make another circular image but different color and other form. Like for example an on sale icon instead of most popular. Here is the css and below will be the HTML.
I am not sure what your question is. If you want to find the CSS related to any given element, you can right click the element and select “Inspect”. In Chrome, this will open your dev tools and should be on the “Elements” tab with the element highlighted on the left. On the right you will see the CSS related to that element. In that CSS panel, you can also see the css/scss file the style is in along with its line number.
Note: Sometimes styles are minimized for performance and their css files might also have a dynamic name. Clicking the location link will take you to that place in the css file for your to examine. I have attached a screenshot from an element on this page to show you what it looks like.
We can break it down and see what it’s doing. .pricingTable-firstTable_table
This first part is looking for an element in the HTML with the class name “pricingTable-firstTable_table”. :nth-of-type(2)
This part narrows it futher by selecting only the second element with that class name of a particular type. In this case the class is applied to <li> elements, so it’s the second <li> with that class. :before
The last part means that instead of styling the selected element itself, we will create a pseudo element before the selected element.
So in essence, you are creating a pseudo element before the second <li> with the class name “pricingTable-firstTable_table”.
That’s how the CSS selector relates to the HTML.
To me it sems a clunky way of selecting. It would be far simpler to add a sensibly named class to the element and select it directly, or more likely add an actual element (not pseudo element) and target a class applied to that.
How you have it is how you may do it if for some reason you were unalbe to edit the HTML (and intend never to do so).
Thanks. I’m trying to copy the blue circle that says Most Popular and make one in a different color that says 30% Off over one of the other packages. http://lmbc.me/rates.html http://lmbc.me/css/style.css
I haven’t used css in a while now so I need to lookup new things.
.pricingTable-firstTable_table {
position: relative; // The parent has relative positioning to give the absolute context
}
.feature {
position: absolute;
color: white;
display: block;
background-color: #3bbdee;
text-align: center;
right: 15px;
top: -25px;
height: 65px;
width: 65px;
border-radius: 50%;
box-sizing: border-box;
font-size: 0.5em;
padding-top: 22px;
text-transform: uppercase;
letter-spacing: 0.13em;
transition: all 0.5s ease;
}
Now we have a class who’s style may be reused any where, on any element with any content, instead of making lots of those long, clunky very specific selectors all with pretty much the same rules repeated over and over.
