Course Individual Lesson Page
COMPONENT SELECTOR GUIDE
Course Lesson Page Content
Desktop display of course page.
Mobile floating footer element that replaces the top nav on desktop.
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| Content Container | ||
| .course-item | The outer wrapper for the course page content, including the video and the text content. |
|
| Top Nav | ||
| .course-item__header | The outer wrapper for the top nav on desktop, which contains the course title, and the "Complete & Continue" or "Next Lesson" button. |
|
| .course-item__course-title | The course title in the top nav. |
|
| .course-item__course-title a | The course title link element in the top nav. |
|
| .course-item__next-lesson-button | The button in the top nav. |
|
| Video Elements (these do not refer to YouTube videos, because we cannot style YouTube iframe elements with CSS) | ||
| .course-item-video-inner-wrapper .plyr__video-wrapper | The parent container of the video element. |
|
| .course-item-video-inner-wrapper .plyr__video-wrapper video | The video element. |
|
| .course-item-video-inner-wrapper .plyr__poster | The thumbnail image of the video element. |
|
| .course-item-video-inner-wrapper .plyr__control | The overlay "Play/Pause" button that shows on the video. |
|
| .course-item-video-inner-wrapper .plyr__control svg | The vector imagery of both the play and pause icons. |
|
| .course-item-video-inner-wrapper .plyr__controls | The parent container of the video controls that show at the bottom of the video, including the current video time, that total video duration, the progress indicator, the volume button, the settings button, and the full screen toggle button. |
|
| .course-item-video-inner-wrapper .plyr__controls__item | All of the button controls at the bottom of the video excluding the progress indicator. This includes the time text, the speaker button, the settings button, and the full screen toggle button. |
|
| .course-item-video-inner-wrapper .plyr__controls__item svg | All of the icon imagery for the control buttons, including the speaker button, the settings button, and the full screen toggle button. |
|
| .course-item-video-inner-wrapper .plyr__controls__item.plyr__time | The current time and the video duration text elements. |
|
| Text Elements (Meta data, title and description) | ||
| .course-item__chapter-title | The chapter title text. |
|
| .course-item__lesson-title | The lesson title text. |
|
| Course Lesson Page Footer on Desktop | ||
| .course-item__footer-container | The footer container that contains the "Complete & Continue" or the "Next Lesson" button at the bottom of the lesson page content. |
|
| .course-item__footer-container .course-item__footer-background | The footer container background (used to style the background color). |
|
| .course-item__footer-container .course-item__footer-content | The footer content. |
|
| .course-item__footer-container .course-item__next-lesson-button | The "Complete & Continue" or the "Next Lesson" button at the bottom of the lesson page content. |
|
| Course Lesson Floating Footer on Mobile | ||
| .course-item__side-nav-mobile-header | The floating footer wrapper on mobile. |
|
| .course-item__side-nav-toggle-button-mobile | The side navigation toggle button in the mobile footer. |
|
| .course-item__side-nav-toggle-button-mobile .course-item__side-nav-collapsed-svg | The vector imagery for the side navigation toggle button when the menu is collapsed. |
|
| .course-item__side-nav-toggle-button-mobile .course-item__side-nav-expanded-svg | The vector imagery for the side navigation toggle button when the menu is expanded. |
|
| .course-item__next-lesson-button | The "Complete & Continue" or the "Next Lesson" button in the mobile footer. |
|
HTML Structure Explanation
The Course Page Top Navigation Element on Desktop
The container for the course lesson page top navigation, including the course name and the button. This element is hidden on mobile devices and replaced with a floating footer element that shows on mobile only.
The Video Elements
The container for the video elements on the course lesson pages.
The container for the video elements on the course lesson pages.
Course Page Text Elements Below the Video
The container for the course lesson page text content elements, including the chapter title and the lesson title.
The container for the video page text content elements, including the title, meta data, and description.
Footer Elements on Desktop & Mobile
The container for the course lesson page mobile and desktop footer, which contains the "Complete & Continue" or the "Next Lesson" button. The mobile footer element additionally contains the side navigation toggle button.
Desktop footer element.
Mobile floating footer element.
Side Navigation Flyout
Desktop side nav
Mobile side nav
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| Global Elements (Targets Both Desktop & Mobile Elements) | ||
| .course-item__side-nav-toggle-button | The button that opens the side navigation panel. |
Desktop
Mobile
|
| .course-item__side-nav | The parent container for the side navigation elements, including the progress bar and the chapter item elements. |
Desktop
Mobile
|
| .course-item__side-nav-header | The outer container for the progress bar wrapper. |
Desktop
Mobile
|
| .course-item__side-nav-progress-bar-container | The wrapper for the progress bar elements, including the bar, and the text inside the bar. This element is hidden on mobile devices by default. |
Desktop
|
| .course-item__side-nav-progress-bar | The progress bar that shows current percentage completed (the beige element). |
Desktop
|
| .course-item__progress-bar-text | The text inside of the progres bar wrapper. |
|
| .course-item__side-nav-content | The container for the chapter and lesson content in the side nav. |
Desktop
Mobile
|
| .course-item__side-nav-chapter-container | The container for each of the chapter content, including the chapter title, # of lessons, duration, and the chapter lesson items. |
Desktop and Mobile
|
| .course-item__side-nav-chapter-header | The header container for the chapter details, including the chapter title, the # of lessons and duration. |
Desktop and Mobile
|
| .course-item__side-nav-chapter-title | The chapter title text. |
Desktop and Mobile
|
| .course-item__side-nav-chapter-metadata | The metadata text, including the # of lessons and the duration. |
Desktop and Mobile
|
| .course-item__side-nav-chapter-lessons | The wrapper for the chapter lessons. |
Desktop and Mobile
|
| .course-item__side-nav-lesson | The individual lesson items, which contain the lesson thumbnail, title, duration, and the checkbox. This includes both active and inactive links. |
Desktop and Mobile
|
| .course-item__side-nav-lesson.active | The active lesson item, which contains the lesson thumbnail, title, duration, and the checkbox. |
Desktop and Mobile
|
| .course-item__side-nav-link | The link wrapper, which contains the thumbnail, the title and the duration. |
Desktop and Mobile
|
| .course-item__side-nav-thumbnail-container | The lesson thumbnail container. |
Desktop and Mobile
|
| .course-item__side-nav-thumbnail | The lesson thumbnail. This is not an image HTML element, but is a div element with a "background-image" property. |
Desktop and Mobile
|
| .course-item__video-player-icon-container | The container for the "Play" button vector imagery that is on top of the thumbnail. |
Desktop and Mobile
|
| .course-item__video-player-icon-container svg | The vector imagery for the "Play" button icon that is on top of the thumbnail. |
Desktop and Mobile
|
| .course-item__side-nav-link-title | The lesson title text. |
Desktop and Mobile
|
| .course-item__side-nav-lesson-metadata | The metadata text, including the lesson duration. |
Desktop and Mobile
|
| .course-item__side-nav-checkbox-container | The checkbox container that's on the far right of the lesson container. |
Desktop and Mobile
|
| .course-item__checkbox-svg | The vector imagery for the status checkbox. These will also target similar elements in the accordion section on the course overview page unless specified otherwise. |
Desktop and Mobile
|
| .course-item__checkbox-svg .course-item__checkbox-svg-outline | The dashed circle outline of unfinished lessons. These will also target similar elements in the accordion section on the course overview page unless specified otherwise. |
Desktop and Mobile
|
| .course-list__checkbox:checked+.course-list__checkbox-target .course-item__checkbox-svg .course-item__checkbox-svg-outline | The solid circle outline of the completed lessons. These will also target similar elements in the accordion section on the course overview page unless specified otherwise. |
Desktop and Mobile
|
| .course-item__checkbox-svg .course-item__checkbox-svg-checkmark | The checkbox icon of the completed lessons. These will also target similar elements in the accordion section on the course overview page unless specified otherwise. |
Desktop and Mobile
|
| Desktop Elements (Targets Desktop Elements Only) | ||
| .course-item:not(.mobile-layout) | The side navigation outer container that opens on desktop. Use this as an ancestor element for the "Global Element" selectors if you want to only target desktop nav elements. |
|
| .course-item__side-nav-toggle-button-desktop | The button that opens the side navigation panel on desktop devices. |
|
| .course-item__side-nav-toggle-button-desktop svg | The vector imagery of the desktop button. |
|
| .course-item__side-nav-header.mobile-layout-hidden | The side nav header element on desktop devvices, which contains the progress bar. |
|
| Mobile Elements (Targets Mobile Elements Only) | ||
| .course-item.mobile-layout | The side navigation outer container that opens on mobile. Use this as an ancestor element for the "Global Element" selectors if you want to only target desktop nav elements. |
|
| .course-item__side-nav-header.desktop-layout-hidden | The side nav header element on mobile devvices, which contains the mobile menu toggle button, the course title, and the "Next Lesson" or "Complete & Continue" button. |
|
| .course-item__side-nav-toggle-button-mobile | The button that opens the side navigation panel on mobile devices. |
|
| .course-item__side-nav-toggle-button-mobile .course-item__side-nav-collapsed-svg | The vector imagery for the side navigation toggle button when the menu is collapsed. |
|
| .course-item__side-nav-toggle-button-mobile .course-item__side-nav-expanded-svg | The vector imagery for the side navigation toggle button when the menu is expanded. |
|
| .course-item__side-nav-mobile-course-title | The course title that appears on the mobile side nav flyout. |
|
| .course-item__side-nav-mobile-course-title a | The course title text link that appears on the mobile side nav flyout. |
|
| .course-item.mobile-layout .course-item__next-lesson-button | The "Complete & Continue" or "Next Leson" button that appears on the mobile side nav flyout menu. |
|
HTML Structure Explanation
The ide navigation toggle button and flyout menu on desktop and mobile.
The <body> HTML element with an id attribute that corresponds to the specific course lesson item.
Unique Course Pages
Relevant CSS Selectors
| CSS Selector(s) | HTML Element |
|---|---|
| #item-6523563efccf945a69218c46 | Targets a unique course lesson page using its ID attribute. The selector in the left column is just the general form of the collection ID, but the characters that come after "#item-" will be different for each element. |
HTML Structure Explanation
The <body> HTML element with an id attribute that corresponds to the specific course lesson item.
The <body> HTML element with an id attribute that corresponds to the specific course lesson item.