In this exercise, you will explore many ways to use advanced CSS selectors. This will include, among other things:
- descendent selectors
- direct descendent selectors
- a variety of pseudo-elements
- a number of pseudeo-classes
- the has selector (a parent select0r)
- the is selector
- adjacent sibling selectors
- attribute selectors
- and more
Download Project Files
First, please download this zip archive of the files you need for the exercise. Three screenshots are included in the project.
When you unzip the archive, please rename the project folder to AdvancedSelectors-YourFirstName-YourLastName
About the Exercise
You may NOT edit any file except mystyles.css.
This means you can’t change the HTML, the JS, or the styles.css file.
A Loom video describing the task.
Note: because this exercise has been revised numerous times, there may be occasional small inconsistencies between the downloaded screenshots and the ones that appear in this page.
Resources
One of your guides in this exercise will be this web page: despite the silly title of the document, it is an decent resource on advanced selectors.
What You Will Do
Using the information provided by the above articles and the screenshot file, please make changes to the page that are described below.
Put all your work in the file called mystyles.css.
I repeat: do not edit index.html or styles.css. Likewise, do not edit main.js.
As an aside, an excellent and detailed explanation of advanced selectors is found in the LinkedIn Learning course The Power of Selectors. If you have access to LinkedIn Learning, this course is worth watching.
Preexisting Links in the Document
The link to the Google fonts you will use for the headings (Alegreya Sans SC and Oswald) is already in the HTML.
There is also a link to Font Awesome in the document already, for tasks involving icons.
Hints
The following things will be very useful in the exercise:
- CSS Custom Properties (Variables) for colors
- Descendent Selectors
- Attribute Selectors
- Attribute Value Selectors
- Adjacent Sibling Selectors
- Pseudo Classes
- Pseudo Elements (and the “content” property)
- The not pseudo class
- The has pseudo class
TASK ONE:
Typography
Make the h1 and h2 elements Oswald (Google font, link is in HTML), with an appropriate fallback font stack.
Make h1 elements be 3.157rem.
Make h2 elements be 2.369rem.
In the h1, make the first word ( “Afrobeat:” ) this color: #c46d3b. Make the next three words this color: #788880.
Make the H3 elements have a border bottom, like in the screenshot below.
Make every h4 use the Google font Alegreya Sans SC. Space their letters out further, as in the screenshot, using the letter-spacing property.
Make the default font for the document be the system ui font stack. Make sure that all text has a decent line-height to aid readability.
TASK TWO:
Menu Borders
Do all of task two with a single CSS selector.
Put a small border element between all of the list items in the header (using one of the colors you used in the header), but make sure that there is no border element before the first one and after the last one.
Make the color of the links and the borders white (even though the screenshot below is orange).
Remember: no changes to the HTML.
The not pseudo-class will be helpful here.
TASK THREE:
First Paragraph Stylings
Make the first line of the first paragraph in the document be bold.
Then figure out how to select and style the “drop cap” first letter of this first paragraph.
Make it look as close as possible to this screenshot.
TASK FOUR:
“Section Intros”
Make the first paragraph directly following an H3 (but not one following an h4) have the following characteristics:
- charter, georgia, times, “times new roman”, serif font-stack
- heavier font-weight
- larger font-size
TASK Five:
Fix Ugly Text Wrap
One problem with floated images is that they can create ugly text wrapping, as in the following example:
Fix that problem by making any floated images be center aligned with no text flowing up beside them until there is room for the flowing up text to have a reasonable line-length.
Again, remember that you aren’t allowed to modify the HTML.
TASK SIX:
H4 “Pseudo-Borders”
On H4 elements — except when they are directly proceeded by an H3— add a border to the right side of the text.
Hint: Pseudo Elements will help you here.
TASK SEVEN:
Footer Styling & Background Img
In the footer, there is a list of “Other Important Figures in Afrobeat”. Look at the HTML and figure out how to style each “category” of link using colors as close as possible to those in the following screenshot:
Figure out how to do this in the most extensible way, so that if we add a contemporary artist, for example, the required color styling will be automatically applied. This means that styling by order (ie nth-of-type) is not the best approach here.
Make sure that the css you write does not risk links elsewhere in the page changing color (if there were any there). In other words, make the selectors both general enough to accommodate new links, but not so general that they select unintended elements in other parts of the page or site.
For viewports above 1000px, add the fela1.jpg as a background image on the footer.
Make sure that the image does not appear below 1000px screen width.
TASK EIGHT:
Gallery Layout
Make the gallery have the following characteristics:
- black background going all the way to edge of browser window
- phone & tablet: two columns, with the last 10 figures hidden
- desktop: four columns, all 20 figures shown
- larger desktop: five columns, all 20 figures shown
TASK NINE:
Figcaptions
If you look at the code for the album images in the gallery, you will see a data-band attribute on each. Data attributes allow us to essentially create our own attributes, since the word after the dash can be anything we want.
The values for the data-band attribute in this page are either africa 70 or egypt 80. These refer to Fela’s two most successful bands in his career: in this code, they identify which band recorded which album.
Your task here is to make each figure’s figcaption color dependent on the associated image’s data-band value:
- Africa 70 Albums: use aqua
- Egypt 80 Albums: use deeppink
Here, for example, is an Africa 70 album next to an Africa 80 album:
Make sure that if we rearrange the figures, or add additional albums, that the figcaption color will still be tied to the image’s data-band attribute value.
Do not key this style to source order, in other words.
Hint: there are a number of ways to do this task. You could use adjacent selectors, or make use of the :has pseudo class.
TASK TEN:
Article Layout
All of the content between the header and the footer is contained inside one article element.
Make sure that all the children of the article, except for the gallery, never get wider than 800px.
The gallery, on the other hand, must cover the entire width of the page: the black background will go all the way to the edge.
Make sure that article content (except for the gallery) never touches the edge of the screen in phone view.
Make this happen with a single selector.
Hint: the not pseudo-class will be your friend here.
TASK ELEVEN:
Icon Fonts
The downloaded HTML file has Font Awesome already included as a link in the head.
The icon for the search field is already included in the site. Study the code in the styles.css file and figure out how to apply the required icons to the links in the header menu.
Note: pseudo-elements are your friend here.
Icon Hover States
Now create a style that changes the link menu links’ color to #c46d3b; whenever the user hovers over the icon or the associated link text.
Make it so that only the link text changes color, not the icon. In the screenshot below, the video link text is changing color: in the screenshot, the cursor isn’t shown but it’s hovering over the music icon.
In other words, test that the text changes color when the icon is hovered over.
Task TWELVE:
Search Field
Make the search field look like it is below.
When the user clicks in the Search field, make the field bigger.
Set the Search Field to have the #788880 placeholder text color.
Set the Search Field to have the #C46D3B input text color.
TASK THIRTEEN:
Cool List Treatment
For this task, consult this web page. It contains some selectors the first resource I gave you does not cover.
The content below is a basic Unordered List (a UL, in other words).
Use CSS concepts from the above web page to change how this list’s markers look. Specifically, rather than a dot or a square, change the item markers to a heart.
Then make the hearts alternate their colors (to aid design unity, use colors from other elements in the site).
This will involve using HTML entities (symbols), pseudo elements, and other advanced selectors.
A great resource for HTML entities is the toptal website.
Big Hint: the Font Awesome code included in styles.css uses a very similar approach: using the ::before pseudo-element to inject content (in that case, an icon font). More detail on pseudo-elements.
Rather than using an icon font, however, use an entity. You can find an excellent listing of entities here.
Note also that the song titles are italicized, but the hearts themselves are not (ie they are not tilted, so choose your selectors carefully).
TASK FOURTEEN:
H1 Tweak
At small sizes (under 900px screen width), make the first word of the h1 in the header take its own line and be centered:
TASK FIFTEEN:
Dark Mode Setup
For this final task, you will give the user the ability to set a dark mode for the page.
To do that, examine the markup for the .dark-mode form in the header, then:
- For small screens, put the dark-mode form in the center, underneath the search field.
- For the large screens, use CSS Positioning to place the dark-mode form in the top right of the screen. Place it so it looks aligned.
- Note how, in style.css, the .visually-hidden class from the a11y project is used to hide the text for the form input label. Modify that selector to hide the checkbox also.
- Inject the icon seen in the screenshot using the same technique you used for the menu icons
- Style the icon as it appears in the page
- Set the icon color, on hover, to match the word “Afrobeat” in the h1
TASK SIXTEEN:
Dark Mode Document Styling
When the user clicks on the dark mode “button”, a dark-mode-selected class will be toggled on the footer of the document. Because this value is written to localStorage, it will persist even after page close.
In order for you to investigate the über-cool has selector, I have intentionally made this task a bit more complex than it might ordinarily be.
Specifically, this styling task would have been easier if the class had been applied to the body element, because then all we would have needed for dark mode would be a series of descendent selectors.
However, because the class is applied onto the footer, you’ll need to investigate more create approaches.
Please consult the dark mode screenshot and style your project as close as possible. Pay attention to colors of text, backgrounds, borders, etc.
Hint: the has pseudo class will be your best-ever friend with this task.
See https://css-tricks.com/the-css-has-selector/ for a description of this revolutionary new “parent” or ancestor selector ]
Support for :has is now part of the Baseline 2023 specification, signifying that :has is now supported by all major browsers: https://caniuse.com/?search=%3Ahas
When You Are Done
Make sure that your project folder is named as specified at the start of this exercise.
Then ZIP that folder.
Finally, hand that zip into the assignment hand in area on Brightspace.