Biography Project: > div question

HTML-CSS
1

I don’t understand why this code works in a CSS file.

.bio-3grid-container 
{
  display: grid;
  width: 1210px;
  height: 450px;
  line-height: 95%;
  grid-template-rows: 75px 75px 75px 75px;
  grid-template-columns: 350px 26px 210px 35px 210px 50px 210px;
  column-gap: 10px;
}

.bio-4grid-container > div
{
  width: 350px; 
  height: 175px;
}

I do not have any HTML references to .bio-4grid-container but I do reference bio-3grid-container. The ‘4’ in the former selector name was a typo, yet I get the layout that I want. If I correct the typo, I get a layout that I cannot explain.

All the code can be found in a public GitHub repo: GitHub - RHH42/BiographyTest-Project: Repo for sharing when posting

I do not understand what adding > div to the selector means. As you can see from the code, this is a grid specification. I followed a code example from W3Schools CSS information. I thought that the purpose of syntax for the 2 selectors was to define the container styling first then define styling for container elements by adding the > div. Can someone please enlighten me?

By the ss you can see that the display mostly works. I have a problem with subsequent pages overlapping but I don’t think that is related to this question.

grid selector question example
grid selector question example1851×768 200 KB

NOTE: Is the general format for this question consistent with best practices for questions here? If not, please tell me how to improve it so I can do better in future posts.

2

check this stackoverflow thread if you havent already What does the ">" (greater-than sign) CSS selector mean? - Stack Overflow

happy coding :slight_smile:

1 Like
3

Thanks for the link. Having read it over several times, I’m still a bit confused. My understanding is that, in my example, every div statement will be assigned width and height as stated, unless, of course, I explicitly defined a different width or height in a div?

Could I add a background color and expect every div to inherit that color? What about borders and other styles? I’ve experimented with results so mixed that I didn’t understand what styling controlled what.

4

Hi @ahraitch

To help write and maintain your code, consider placing all the css in a single styles.css file.

You can place comments above each selector letting you know what the selector does. This way you won’t have to remember what each bit of styling does.

It will also become much easier to access to styling properties if they are contained in a single file, and you can comment and uncomment individual properties or the entire selector when you want to debug.

I noticed the following div elements are not closed.

  <div class="bio-0page">

Happy coding

1 Like