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)

10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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.