• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Help Understanding CSS Selectors

 
Ranch Hand
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
On the page I have several <div> tags. I have CSS that that sets the width to 90%.

The trouble is I have <div> tags embeded within <div> tags that I do not want to be 90%.

I want the parent <div> tag to be one width and the child <div> tag to be a different width.
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Assign and use a class name.
 
Steve Dyke
Ranch Hand
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:Assign and use a class name.



For each div tag?

My page is actually a div container with a class name. This is where I have the .divclassname div{width: 90%}

On this page I have parent div containers that I want as this width.

However, I have child div tags embeded in each of these div tags that need different widths.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
The way to differentiate each div from the other is with a class name or id. id values can only be used once so be sure to use those only for very unique elements.

You can also use positional CSS, but that can be fragile and easily break when structure is changed.
 
Greenhorn
Posts: 13
Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Use id for each div tags and then assign the width for each div tags.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

riteshhh kumar singh wrote:Use id for each div tags and then assign the width for each div tags.



I avoid id values except for elements that are very important and are guaranteed to be unique. id values are overused, in my opinion, when a class name is usually more versatile and appropriate.
 
Steve Dyke
Ranch Hand
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:The way to differentiate each div from the other is with a class name or id. id values can only be used once so be sure to use those only for very unique elements.



I am experimenting with making the child div tags span tags with inline-block styling. This seems to fix the issue.

Is this a correct way to proceed?
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
That made me cringe. So, no, I don't think that's an appropriate solution. What's your beef with class names? This is exactly what they are for.
 
reply
    Bookmark Topic Watch Topic
  • New Topic