Tell us what’s happening:
Your code so far
<!-- html -->
<div class="table-wrap">
<table>
<caption>Assets</caption>
/* CSS */
table > caption {
color: #356eaf;
font-size: 1.3em;
font-weight: normal;
}
I understand that in order to complete the linked challenge I need to change the selector to “table caption” but I don’t understand why.
My code will select all caption elements where the parent is a table element. The “table caption” will select all ‘caption’ elements inside a ‘table’ element. Is this not effectively the same thing? If element ‘x’ is inside element ‘y’, aren’t they child and parent?
Basically what I’m asking is: what’s the difference between parent-child elements and just being inside another element?
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36
Challenge: Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 51
Link to the challenge:
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/step-51`