Select a container with a specific element inside?

Forum Moderators: not2easy

Message Too Old, No Replies

Select a container with a specific element inside?

martinship

2:55 am on Dec 29, 2008 (gmt 0)

I'm looking to style images that are links. I want to select the <a> parent element only when there is an <img> tag as a child element and apply a border to the <a>. Is this possible? Or is it a case where extra markup, such as classes, would be necessary?

birdbrain

10:15 am on Dec 29, 2008 (gmt 0)

Hi there martinship,

try it like this...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
ul {
 list-style-type:none;
 }
ul li {
 margin:10px;
 }
ul li a {
 color:#000;
 }
ul li a img {
 border:3px double #900;
 }
</style>
</head>
<body>
<ul>
<li>
<a href="http://www.webmasterworld.com/">webmasterworld.com</a>
</li>
<li>
<a href="http://www.webmasterworld.com/">
<img src="http://www.searchengineworld.com/gfx/logo.png" alt="logo">
</a>
</li>
</ul>
</body>
</html>

birdbrain

swa66

1:37 pm on Dec 29, 2008 (gmt 0)

There are no direct selectors in CSS to apply something on a parent depending on the presence of a child element.

Ref:
[w3.org...]
[w3.org...]

That said mostly you can work around it by applying what you wanted on the child instead of the parent, as demonstrated above by birdbrain.