Jump to content


Photo

css nesting

css nesting

  • Please log in to reply
11 replies to this topic

#1 hackalive

hackalive

    Advanced Member

  • Members
  • PipPipPip
  • 657 posts

Posted 01 June 2013 - 02:27 AM

Hi guys,

 

I saw this in some CSS ages ago and cannot remember where so cannot remember how it goes exactly ... but i'd like to do somehting like this with my css:

 

<htmi id="something">

 

<style>

#something {

 

 h1 {

}

 

}

 

#other {

 

 h1 {

}

 

}

 

so if anyone know how it works or how to make it work thatd be great!

 

cheers


Edited by hackalive, 01 June 2013 - 02:40 AM.


#2 requinix

requinix

    Playful Member

  • Moderators
  • 5,743 posts
  • LocationWA

Posted 01 June 2013 - 04:41 AM

CSS doesn't have "nesting" like that but you can
#something h1 { }
#other h1 { }
for the same effect.

#3 computermax2328

computermax2328

    Advanced Member

  • Members
  • PipPipPip
  • 285 posts
  • LocationUnited States
  • Age:22

Posted 09 June 2013 - 01:24 AM

CSS doesn't have "nesting" like that but you can

 

 

CSS doesn't have it, but SASS does. SASS is pretty much CSS on steroids. It saves a lot of time and aggravation. Not only does it let you nest elements, but it also lets you assign variables to values. So instead of having to scroll through your style sheet for that hex-code or rearrange and reorganize your structure, you can do something like $white=#fff; and use it over and over again.

 

Give it a try. 


Follow me on Twitter @maxrbaldwin


#4 cpd

cpd

    ¬_¬

  • Members
  • PipPipPip
  • 881 posts
  • LocationLondon, UK

Posted 09 June 2013 - 04:12 AM

Compiling that every time you make a change could get very tedious! The concept behind it is really cool though.


"Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it."

"One of my most productive days was throwing away 1000 lines of code."

#5 DaveyK

DaveyK

    Advanced Member

  • Members
  • PipPipPip
  • 288 posts
  • LocationThe Netherlands

Posted 09 June 2013 - 01:59 PM

Its actually NOT tedious at all. I use Less for everything, running a program call WinLess in the background. Every time I change a Less file, the Less gets compiled into a bootstrap.css file in the css folder automatically. Bootstrap.css is also minified!

 

Couldnt be easier. Use it.


Edited by DaveyK, 09 June 2013 - 01:59 PM.


#6 shumaila

shumaila

    Newbie

  • New Members
  • Pip
  • 2 posts

Posted 21 June 2013 - 01:44 AM

#something h1 { }
#other h1 { }

 

this is the right way

no nesting 



#7 DaveyK

DaveyK

    Advanced Member

  • Members
  • PipPipPip
  • 288 posts
  • LocationThe Netherlands

Posted 21 June 2013 - 04:52 AM

#something h1 { }
#other h1 { }

 

this is the right way

no nesting 

 

the right way according to who? Less and SASS always you as much nesting as you want, nothing against that.



#8 Frank P

Frank P

    Advanced Member

  • Members
  • PipPipPip
  • 159 posts

Posted 23 June 2013 - 08:40 AM

the right way according to who? Less and SASS [allows] you as much nesting as you want, nothing against that.

 

The right away according to the normal CSS syntax.


Problem solved? Please click the button Mark Solved under the best post.

How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-down/Fly-out Menu with CSS: Website Laten Maken Amsterdam.


#9 DaveyK

DaveyK

    Advanced Member

  • Members
  • PipPipPip
  • 288 posts
  • LocationThe Netherlands

Posted 24 June 2013 - 01:58 AM

SASS and Less both compile into normal CSS syntax. Its for ease of use.



#10 computermax2328

computermax2328

    Advanced Member

  • Members
  • PipPipPip
  • 285 posts
  • LocationUnited States
  • Age:22

Posted 24 June 2013 - 04:40 PM

Nesting is cool and all, but the real reason I use SASS is for variables like I said before. Saves a lot of time! You don't have to address multiple id's for just one CSS statement. Makes things a lot more organized. For me at least. 


Follow me on Twitter @maxrbaldwin


#11 Irate

Irate

    Advanced Member

  • Members
  • PipPipPip
  • 358 posts
  • LocationHamburg, Germany
  • Age:17

Posted 25 June 2013 - 07:04 AM

I can very much understand people when they say that they want to use .sass because of variables...

 

Continuously assigning margin: 0 auto; or whatever styles you might repeat over a few lines for multiple selectors can get tiresome!


Quod placet mihi non placeat tibi. - What I think to be good must not always equal your perception of it.

I am not perfect. I try a lot with the code I provide and I don't guarantee for it to work as I have mostly no option to test it on my mobile phone. I do apologize for any inconvenience I caused, but if I do happen to have helped, liking my posts or marking them as to have solved or answered your question would be nice.

#12 DaveyK

DaveyK

    Advanced Member

  • Members
  • PipPipPip
  • 288 posts
  • LocationThe Netherlands

Posted 25 June 2013 - 07:30 AM

And dont forget mixins ^^






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com