Member Avatar for castajiz_2

Hi there new to css and there is something I don t understand for example

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

what does the other img represent, what is this? I understand that the class called img is going to be applyed on the div tag in the html body but what is the other img?? is this like a recursion in programming something inside something?

Edited by castajiz_2 because: none
  • 2 Contributors
  • 3 Replies
  • 87 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

As noted, that two-part selector confused you; already pointed you in the right direction. Here are a few practical points that expand on that answer so the selector behavior is clear and useful in real projects.

A space between selectors is the descendant combinator: it matches elements at any depth. A different combinator, the child selector (>), matches only direct children. For example:

<div class="gallery">
  <figure>
    <img src="photo.jpg" alt="">
  </figure>
  <img src="logo.png" alt="">
</div>

.gallery img { outline: 2px solid blue; }    /* matches both images */
.gallery > img { outline: 2px solid green; } /* matches only the direct child */

Specificity decides which rule wins when multiple rules target the same element. Combinators do not add weight. A selector that combines a class and an element (class + type) has higher specificity than a plain type selector. For exact mechanics and examples, see MDN’s guide to Specificity. For selector types and combinators, see MDN’s CSS Selectors.

Practical tips: avoid naming classes the same as element names (e.g., img) to reduce confusion; prefer descriptive names like thumbnail or avatar. Use the browser inspector to see which selectors match and why a rule is overridden. Reserve !important only as a last resort.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

What this selector means is that you are going to select an image element that is within a div element that has been assigned a class called "img". So for example, this is the image element that would be selected...

<body>
  <div class="img">
    <img src="#" alt="image" height="50" width="50" />
  </div>
</body>
Member Avatar for castajiz_2

o thanks, i dont know why w3c schools did not mention this kind of thing and by the way how is this syntax called?

Member Avatar for JorgeM

i dont know why w3c schools did not mention this kind of thing

W3Schools is great for a beginners, simple overview. The site has some mistakes, but most importantly, that site should not be confused with the W3C.

and by the way how is this syntax called

Its just known as "Seletors". Selectors may range from simple element names to more complex representations. Take a look at this article on the W3C site that goes into Selectors in much more detail. This article covers CSS3.

http://www.w3.org/TR/css3-selectors/

commented: man, you re the best! +2
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.