CSS selector grouping

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

Malas

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

toicontien

Doing this will exclude Internet Explorer because it doesn't support the child selector.

Selectors are given a specific priority.

Malas

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

toicontien

I see what you're trying to get at. You've got to first select the parent element, but I don't think there are any CSS 2 selectors that do that.

Malas

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).

toicontien

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.

Malas

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.

toicontien

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.