Jump to content

phunsoft

Members
 View Profile  See their activity

  • Posts

    4

  • Joined

  • Last visited

 Content Type 

Everything posted by phunsoft

  1. phunsoft
    That makes sense. Thanks.
  2. phunsoft
    I see, I mixed parent and child. At first read, I understood that it selects <div> elements which are children of *any* parent element having class "grid-container". So it would work the same for the following code: <span class="grid-container"> <div>...</div> <div>...</div> </span> But then: You write "... immediate children of <div class="grid-container...". Does the ">" symbol in this case, i.e. parent part is a class, not an element, specifically mean that the parent has to be of same type as the child, <dev> in this case? Or does the ">" symbol create a parent - child relationship between any kind of selectors, parent as well as child?
  3. phunsoft
    Hello The two try-it examples in topic "Grind Lines" have the following CSS style code: <style> .grid-container { display: grid; grid-template-columns: auto auto auto; grid-gap: 10px; background-color: #2196F3; padding: 10px; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 30px; } .item1 { grid-column-start: 1; grid-column-end: 3; } </style> I cannot identify what elements selector ".grid-container > div" will apply to? The greater-than symbol is only listed for HTML elements in the CSS reference. For HTML elements the greater-than symbol defines a parent-child relationship. The <div> elements in the example having class "grid-container" do not have another <div> as parent. <h1>Grid Lines</h1> <div class="grid-container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> <div class="item6">6</div> <div class="item7">7</div> <div class="item8">8</div> </div> <p>You can refer to line numbers when placing grid items.</p> Thanks Peter
  4. phunsoft
    Hi, Learning CSS with the help of W3Schools's great tutorials and exercices. I'm a bit confused about the first try-it example in topic "Grid Lines", which looks as follows: <!DOCTYPE html> <html> <head> <style> .grid-container { display: grid; grid-template-columns: auto auto auto; grid-gap: 10px; background-color: #2196F3; padding: 10px; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 30px; } .item1 { grid-column-start: 1; grid-column-end: 3; } </style> </head> <body> <h1>Grid Lines</h1> <div class="grid-container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> <div class="item6">6</div> <div class="item7">7</div> <div class="item8">8</div> </div> <p>You can refer to line numbers when placing grid items.</p> </body> </html> In the style part, attributes of only one item class, ".item1", are defined, but the HTML code refers to classes "item1", "item2", "item3", and so forth. As threre is no "item" class, except from "item1", all other references don't have any effect, right? What is the purpose of all thoe other "item" class references in this example? Thanks Peter
×
×
  • Create New...