Child selectors, must be wrapped in smae div?

HTML & CSS
1

hi

I am using bootstrap to do this. Ignore the jango.

<div class="span2">
<div class="challenger">{{ challenge.challenger }}</div>
<img src="{{ STATIC_URL }}img/avatar.jpg"/>
</div>

I want to target the img tag here. I can do so easily like this

.span2 img{
}

But as I am using bootstrap, any img in a span 2 will take this style. I want to avoid using another class inside the span if I can (perhaps this is easy wya though, just add <div class=“span2 avatar”>

Does an element need to be in the same div or span or whaever to get targeted? I tried using a child selector but I can see how that wont work.

Ta

2

Not totally sure what you are asking here. There are other kinds of selectors like sibling selectors. You could target that image with

.challenger + img { ... }

but that may not be what you need. We need a bigger picture of what limitations you are working within.

3

If you only want to target that image within the span2, then just give that image a class/id? Seems like you’re making a simple problem difficult to me? Unless there’s something more complex you are trying to achieve.

4

Sorry if I am not clear. I guess I am still getting used to stuff. I have been coding in css though for about 4 hrs solid tonight. HAcve another cool question from the other day too I will post a new thread.

Anyway, notice how the challenger class is wrapped in its own div? My question is this. to target the img (element) with the class challenger, does it need to be wrapped in the same div. In this case, both the class challenger and the img element are wrapped in the span 2 div.

I am familiar with sibling selectors through my study, I will give it a go.

5

Hi - that’s a good point, I did realize I could assign an img element a class, but I guess as it is a HTML element I can. It’s all coming together. I gave a h1 a class the other day and it worked (of course I knew this but I had to do it for it to really sink in)

6

I put a class on on the img element and it worked.

Ralph, the sibling selector did not work. Are you sure a sibling selector will select an element in antoher div ? Perhaps my poor markup confused you, I close the challanger class in the same line.

Thanks guys!

7

You must have made a mistake then. This works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style media="all">
.challenger + img { border: 10px solid red; }
</style>
	
</head>

<body>

<div class="span2">
<div class="challenger">{{ challenge.challenger }}</div>
<img src="{{ STATIC_URL }}img/avatar.jpg"/> 
</div>

</body>

</html>
8

strange - I went back and tried :

/*.avatar{

	padding:20px 0 0 15px;
	}*/
	
.challenger + img  {	
	padding:20px 0 0 15px;
}

Did not work. When I enable the class avatar it works. I even took the img class off. Jango?

9

That doesn’t mean much in a CSS forum. :slight_smile:

As far as CSS/HTML is concerned, it works.

10

You can put as many classes as you want on elements in the body (this also encludes the html). Many times my image tags look like this <img src=“” alt=“” class=“img-border img-padding img-left” /> etc. Having this available you can really shrink down your css and make it efficient code :slight_smile:

11

Hey

I knew this - it was just a matter of applying it (having it spelt out for me I am applying my accedemic understanding). I knew I could add classes for elemets I just did not see the img tag an element for some reason:). I like the sibling selector soloution too. I wanted to know if I could target elements sitting in other divsions. II shoudl know that you can I mean you have the universal selector * after all