Class 7: What I Learned This Week…
HTML & CSS Feedback
- It’s a good idea to not use margin in the body section as we can place it with main instead
- Floats can’t be contained as they cause the collapsing parent problem. This can be fixed by using ‘flow-root’ on the parent element
- You can use ‘p:first-of-type:first-letter’ in CSS instead of having to use the span tag in HTML
- You can use ctrl + scroll to test different screen sizes by zooming in/out to see how your work looks
- You can’t use vw/vh as image sizes in html
- Span is an inline element, div is a block element
- It is a good idea to use the line height in the body section, you can alter it for other elements specifically in different selectors so that it can be overridden
Lean Code
It is more considerate to others if you are working in a team, such as a job environment, to keep things in order with commented out notes and simple/no unnecessary code. This is also more sustainable as it uses less energy to load the webpage, less data transferred and less data on people’s computers. Using lean code is more accessible because it makes it easier for assistive technologies to interpret. The nav element acts a div but better as it has semantic meaning as well, therefore it is redundant adding an extra div when the nav already acts as a container.
Advanced CSS Selectors
- Use aria label <nav aria-label=”primary”> if you have more than one navigation section
- nav a:nth-of-type(2) means to select the 2nd anchor element inside of the nav
- If list is unordered, a[href=”toffee.html”] this is an attribute selector
- nav[aria-label=”primary”]
- Combinator selector is defined by relationship with sibling elements
- Child combinator which selects paragraphs that are direct children of = main>p
- General sibling selector is any paragraph which follows the h2 = h2~p
- Adjacent sibling combinator selects any paragraph directly after h2+p
- Child and adjacent combinator, all paragraphs that are direct children of main following h2 = main>h2+p
- Action pseudo classes = p:first-child selects a paragraph if it happens to be a first child
- Tree-structural pseudo-classes ‘p:last-child’ means all paragraphs that are last children
- p:nth-child(3) selects the 3rd child of any container, main p:nth-child(3) means the 3rd child of main
- p:nth-child(odd) are all paragraphs that are odd children. p:nth-child(even) are all paragraphs that are even children
- p:nth-of-type(3) is a tree-structural pseudo-class. Selects not the 3rd child, but the 3rd paragraph
- p:nth-of-type(odd/even)
- main p:first/last-of-type selects first or last paragraph in main
Attribute Selectors
- a[href^=”https”] is an <a> element where the href attribute value starts with the string “https”. This is a neat way of selecting all external links
- main :not(p) selects everything in main that is not a paragraph. Applies to direct children only
- :has(p) are all elements containing paragraphs that are direct children (this is not ready for production sites yet)
- h1:has(+h2) selects h1 that is immediately followed by h2. Both are only supported on Chrome so far and again are not ready for production sites