dcsimg
www.webdeveloper.com
Results 1 to 8 of 8

Thread: CSS selector grouping

  1. #1
    Join Date
    Jul 2004
    Posts
    59

    CSS selector grouping

    I was playing around with CSS and was wanting to do an advanced selector.

    Basically I want to change the style of an item if an adjacent tag has a child with a certain attribute.

    Is there a way to group selectors.

    use the + for adjacent
    use the > for child

    but can you do parent > child + tag_adjacent_to_parent

    That syntax specifies the + as being adjacent to the child. Is there a way to group selectors such as

    (parent > child) + tag_adjacent_to_parent

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774

  3. #3
    Join Date
    Jul 2004
    Posts
    59
    Even without using the child selector, is it possible to group items?

    parent child + element_adjacent_to_parent

    The problem is that this example, the + applies to the child not the parent.

    can you do

    grandparent parent child + grandparent element_adjacent_to_parent?

    basically what I am trying to accomplish is:

    <div id="grandparent">
    <div id="parent">
    <div id="child1">something</div>
    <div id="child2">something</div>
    </div>
    <div id="adjacentElement">something</div>
    </div>

    If you mouse over child (:hover) then the style for adjacentElement should change

  4. #4
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774

  5. #5
    Join Date
    Jul 2004
    Posts
    59

    Lightbulb

    I found something of a work-around for being able to do this. Doesn't work in IE since IE doesn't recognize child or adjacent selectors.

    The goal was to have a CSS slider which could resize an image. Similar to the CSS animated images using background images. However, you cannot resize background images and those didn't allow you to disconnect the slider from the image. With this you could conceivably move/resize/reformat any content block by interacting with a completely disconnected trigger (in this case a "slider").

    A quick example can be found here: http://www.ozonecreations.com/css_test.html

    Just mouse over the red bar.

    It is quick, dirty and I didn't bother with any real formatting, but it works (at least with browsers that have updated their standards support in the last 5 years).

  6. #6
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    I'm sure you could create this functionality in JavaScript. The image resizing is really only usefull in the visual medium and a larger image doesn't add anything semantically do your document. As long as the JavaScript only resizes the image it's perfectly OK to use JavaScript. In fact, it's the most ideal solution. Post your question in the JavaScript forum and they could probably help you out.

  7. #7
    Join Date
    Jul 2004
    Posts
    59
    Actually, doing it in javascript is exceptionally easy. CSS is my weak point in doing DHTML. I am still learning the true power behind it.

    The image resizing was just a quick example. What I was looking for was a way to affect one piece of content from a completely disconnected (visually) piece of content. The idea spawned from the Flick images (http://www.stunicholls.myby.co.uk/menu/animation.html). I used the image resizing becuase you cannot resize a background image and resizing an image within a container normally would resize the container also. It is something you normally can not/would not do with CSS.

    I ended up having a massive nested ball instead of a nice clean adjacent HTML like I wanted. But it was a good experiment. Using positioning and fixed widths, one could apply this to something that is actually practical.

    May be common sense for a CSS guru, but there is a big mental leap from using CSS for basic things to truly using CSS as it was meant to be used. Specially when you are used to using simple classes and changing everything with JS.

  8. #8
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774

    Web Design is a Peanut Butter Jelly Sandwhich

    Yeah. I know what you mean. I went through that phase about two years ago. It was really frustrating at first until you realize that Web design is like a peanut butter and jelly sandwhich.

    To set things up, HTML is like peanut butter. CSS is the jelly and the abstract thing called "Web design" is the bread.

    At first we only had peanut butter and bread to work with. PB provides a good base for things and helps define what the sandwhich is (peanut butter sandwhich). Add some good design (like honey oat bread... mmmm... ) and you've got a decent lunch.

    But peanut butter (HTML) was never meant to tantalize the taste buds. In an effort to make it more than it was, peanut chunks were added to make chunky peanut butter, but at the root of it, chunky peanut butter is still just peanut butter. This was the equivalent of adding presentational tags and attributes to HTML and using tables for layout. Yeah, it worked. But it was still HTML and it wasn't being used for its intended purpose: Marking up a document. Designers needed something more.

    CSS was developed to fill this void, and thus jelly was invented. Now we can use plain old peanut butter as peanut butter (semantic HTML) and add some zest to our sandwhich with jelly (CSS) add some gourmet bread (good design) and you've got a kick ass lunch! That leaves out one thing in Web design: JavaScript.

    Right now we can take away the jelly and we still have a sandwhich. We can't build it totaly out of jelly because after all, its not called a jelly and peanut butter sandwhich Now on to JS.

    We're not going to add anything to the sandwhich, instead, we're going to add something to our lunch: A glass of milk. HTML (peanut butter), CSS (jelly) and design (bread) make a functional Web site. JavaScript extends that basic functionality. It should never create it (you wouldn't pour milk onto bread would you?). A swallow of milk helps the sandwhich go down easier, but if you take away the milk, you've still got a sandwhich.

    JavaScript adds to an already functional, whole page. Take away the JavaScript and all information is still accessible and readable. This whole strange analogy is the mantra of accessible, CSS-based design.
    Last edited by toicontien; 06-02-2005 at 11:12 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles