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
Doing this will exclude Internet Explorer because it doesn't support the child selector.
Selectors are given a specific priority.
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:
If you mouse over child (:hover) then the style for adjacentElement should change
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.
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).
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.
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.
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.
Last edited by toicontien; 06-02-2005 at 10:12 AM.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)