- This topic is empty.
-
AuthorPosts
-
August 8, 2014 at 2:33 pm #178346
satrap
ParticipantHi 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.
August 8, 2014 at 3:06 pm #178348nixnerd
ParticipantOne 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.
August 8, 2014 at 3:51 pm #178351satrap
ParticipantThank 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]
August 8, 2014 at 4:18 pm #178353nixnerd
ParticipantOk… 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.August 8, 2014 at 5:20 pm #178359satrap
ParticipantSorry about that. Didn’t realize it would be a problem.
Here is the Codepen: http://codepen.io/anon/pen/sECJz
August 9, 2014 at 12:05 am #178372Paulie_D
MemberIf 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
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.