Jump to content

Css Questions


.tryhard {try-style:hard;}
 Share

Recommended Posts

Hi all, i started almost one week ago studying Html/Css through W3schools site, so i'm pretty noobish about it; and i'm here looking for some help; in this chapter http://www.w3schools...age_gallery.asp there's an Image Gallery example, and i have a couple of questions:

div.img img  {  display:inline;  margin:3px;  border:1px solid #ffffff;  }

1) in this part of the code, if i'm not wrong the div.img img is for nesting selectors, here my question: wasn't enough wrting it like .img img ? is the div before it, to specify that all the img elements within an element with class="img" have to be into a div element? so they can be distinguished from other kind of containers, like <span> etc..sorry for the confused question, and perhaps for you the answer was an obvious one, but i'd like to be sure about it, and i have none that can explain me these things.2) Aren't <img> elements already inline elements? why is it used display:inline; ?

div.img a:hover img  {  border:1px solid #0000ff;  }

What's the difference between div.img a:hover img and div.img img:hover ? thanks in advance for any kind of help and advice that you will provide me. ps.Sorry for my grammar errors and the poor english.

Edited by .tryhard {try-style:hard;}
Link to comment
Share on other sites

The "div" part is only needed if there are other elements with class="img" that should behave differently. It's the developer's choice to add these things, they may have been planning to use the class name on other elements. You're right, images are already inline. Technically inline-blocks because they have a width and height. Unless another selector is causing the image to become a block there's no point in telling it to be inline. The difference between a:hover img and img:hover is just the element that is being hovered on. It may be like that by custom. Internet Explorer 6 used to only support :hover on <a> elements.

Link to comment
Share on other sites

The "div" part is only needed if there are other elements with class="img" that should behave differently. It's the developer's choice to add these things, they may have been planning to use the class name on other elements. You're right, images are already inline. Technically inline-blocks because they have a width and height. Unless another selector is causing the image to become a block there's no point in telling it to be inline. The difference between a:hover img and img:hover is just the element that is being hovered on. It may be like that by custom. Internet Explorer 6 used to only support :hover on <a> elements.
Thanks a lot for your answers, and your precious help for now it's all clear; if you don't mind, please don't close this topic yet, cause i'd like to use it for some other questions while i'm studying; thanks again.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...