Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #178346
    satrap
    Participant

    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.

    #178348
    nixnerd
    Participant

    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.

    #178351
    satrap
    Participant

    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]

    #178353
    nixnerd
    Participant

    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.

    #178359
    satrap
    Participant

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

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

    #178372
    Paulie_D
    Member

    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

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.