Hi @Tom-Vanderboom!
I have looked at your code, and it looks really good; pretty much spot on except that the padding of the contract details was a bit off. You used this rule to style it:
article p {
padding-top: 1.8em;
padding-left: 1em;
color: white;
}
If you changed it to
article p {
padding: 1em;
color: white;
}
It would be centered better (or we could use flexbox for even more accuracy). But it is a pretty minor point — great work overall!
Now on to your questions:
-
The column combinator is an experimental new selector designed to allow you to select items inside a certain column in an HTML table. But this is currently very experimental and doesn’t seem to work anywhere yet except experimental browser builds. This is not helpful to learning about selectors, so I’ve removed it.
-
The stuff about attribute selectors is all in https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors, but there are quite a lot of options and it takes a while to digest the differences between all of them. The difference between these two is quite subtle:
-
[attr^=val]
matches any element with an attributeattr
that has the stringval
at the start of its value. This is a more general case. -
[attr|=val]
matches any element with an attributeattr
that has the stringval-
at the start of its value, OR, has the stringval
as its entire value. This was added to CSS specifically to handle language codes, e.g. you can use it to matchlang="en"
orlang="en-US"
.
You’re probably unlikely to use the second one very often, if ever. To make it clearer that this is a specialist option and not very commonly-used, I’ve moved it out of the main list in the article, and put it as a note below.