Combining the same CSS code for a few different elements?…

[satrap]

Hi everyone,

I am not totally new to to CSS, but I am not an expert either. I can do some basic things.

Here is an issue I am having:

Is there anyway to make this CSS code a bit more smaller and more compact?

`
.home-section-2.below-header .widget img {
border-radius: 50%; }

.home-section-3.below-header .widget img {
border-radius: 50%; }

.home-section-4.below-header .widget img {
border-radius: 50%; }

.home-section-5.below-header .widget img {
border-radius: 50%; }

.home-section-6.below-header .widget img {
border-radius: 50%; }
`

I know there has to be a way to make this more compact, but I just can’t figure it out. I would appreciate any help.

Thanks in advance.

[nixnerd]

One thing I’m seeing RIGHT OFF THE BAT is that you’re creating way too many classes. Why are those not one class, added to many elements? All you need is one class… like @TheDoc is saying.

[satrap]

Thank you both for taking time to help. Much appreciated.

Ok, that is exactly what I want to do. Combining all of them into just one line of code. However, the only issue with that is that it applies the style to every .below-header widget, but I need to exclude one. How would I do that?…

Here is my complete Css if that helps (I know there are lots of mistake in it, especially towards the bottom where it says “Custom CSS Starts from Here”, but I am just learning as I go along):

[Mod Edit: Code dump removed]

[nixnerd]

Ok… HOLY CODE DUMP! I’ve never seen one so huge. Can you please make a codepen for this?

@Paulie_D, can you remove this dump?

Also, if you’d like to exclude ONLY one… you could do many things. You could use nth-of-type, nth-child, or just create a modified class/ID.

[satrap]

Sorry about that. Didn’t realize it would be a problem.

Here is the Codepen: http://codepen.io/anon/pen/sECJz

[Paulie_D]

If you have a whole bunch of classes with similar names like

.home-section-2.below-header .widget img {
border-radius: 50%; }
.home-section-3.below-header .widget img {
border-radius: 50%; }
.home-section-4.below-header .widget img {
border-radius: 50%; }
.home-section-5.below-header .widget img {
border-radius: 50%; }
.home-section-6.below-header .widget img {
border-radius: 50%; }

You can target them based on their similar names like this

[class^="home-section-"]

Example: http://jsfiddle.net/Paulie_D/5a6d8xpv/

..and there a several more: http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–net-16048

[Author]

Posts