Login
Join waitlist
// coming soon

CSS
selectors

#>.,""*+~:||(){}[]

Learn, practice, master:
CSS Selectors for simpler coding.

nananana
By nana & Ryan

Still confused how CSS Selectors actually work with all unfamiliar symbols?

// What you will learn

1.

No More Guesswork,Target Correct Elements

Learn how to find and style the right parts of your webpage with correct selectors. This course guides you through mastering CSS selectors using clear and practical examples. You'll gain the skills to style webpages efficiently and precisely for your projects.

No More Guesswork,
2.

Don't Fear Complexity,Understand Advanced Selectors

Feel confident with complicated CSS. This course provides step-by-step guidance, making the advanced selectors easy to learn. You'll learn to use advanced selectors with ease, making your web designs stand out with less effort.

Don't Fear Complexity,
3.

No More Unnecessary JavaScript,Go with CSS Selectors

Reduce your reliance on JavaScript. This course teaches you to achieve similar interactivity through CSS selectors. With this techniques, your websites will be faster and easier to manage.

No More Unnecessary JavaScript,
4.

Stop Inefficient CSS,Optimise Selector Performance

Learn to write cleaner, more efficient CSS code. This course simplifies key ideas like Specificity and teaches you to check how performant your selectors are.

Stop Inefficient CSS,
5.

Not Just Principles,Learn Practical Solutions

Gain hands-on experience with CSS selectors. This course goes beyond basic principles to offer real-world CSS solutions. You will have the skills to create sophisticated applications with confidence.

Not Just Principles,

// Who is this course for?

* This course is for everyone *

Beginner

Beginner

This course is beginner friendly!
No prior CSS knowledge required. We begin with the simple basics of CSS Selectors, gently progressing to more complex topics. Start your CSS learning journey with us!

Intermediate

Intermediate

Taking the next step?
This course warmly invites intermediates to deepen your CSS Selectors knowledge. Let's build on your foundation and explore more challenging concepts together!

Advanced

Advanced

Ready to master CSS Selectors?
For advanced learners, this course offers in-depth exploration of CSS Selectors. Dive into complex strategies and enhance your web development skills with us!

// What you will get

Video TutorialQuizCardReal-world ScenariosStay Up to Date
Video Tutorial
video-tutorial

All Essential Selectors & Practical Examples

Our course covers all the crucial selectors with practical examples, guiding you from basic to advanced concepts clearly and smoothly. For enhanced accessibility, our videos come with closed captioning.

  • 70+
    selectors
  • 10+
    CSS fundamentals
  • 13+
    hours of videos

Sneak Peek 👀

More than 1200 slides are provided in the video tutorial to help easily master and understand CSS Selectors.

  • Anatomy
  • CSS Specificity

Curriculum

  1. Intro
    • Free
    • Resources and Tips for taking the course
      6m
    • Browser and Editor setup
      2m
  2. Basic selectors
    • Free
    • Type selector
      3m
    • Free
    • Class selector
      7m
    • Universal selector
      2m
    • Free
  3. Attribute selectors
    • Simple attribute value selector
      7m
    • Exact attribute value selector
      4m
    • Free
    • Ending attribute value selector
      6m
    • Containing attribute value selector
      5m
    • Spaced attribute value selector
      4m
    • Hyphenated attribute value selector
      9m
  4. Combinators
    • Selector list
      5m
    • Descendant combinator
      5m
    • Free
    • General sibling combinator
      10m
    • Adjacent sibling combinator
      3m
    • Lobotomised Owls
      10m
  5. Pseudo-classes
    • What is pseudo-classes?
      2m
  6. Location pseudo-classes
    • :link
      3m
    • :visited
      5m
    • :any-link
      4m
    • :target
      8m
  7. User action pseudo-classes
    • Free
    • :active
      4m
    • :focus
      9m
    • :focus-visible
      4m
    • :focus-within
      4m
    • Ordering the link states
      11m
  8. Input pseudo-classes
    • :autofill
      9m
    • :disabled
      7m
    • :enabled
      7m
    • :read-only
      11m
    • :read-write
      6m
    • :placeholder-shown
      7m
    • :default
      22m
    • Free
    • :indeterminate
      18m
    • :required
      8m
    • :optional
      10m
    • :valid
      11m
    • :invalid
      6m
    • :in-range
      10m
    • :out-of-range
      17m
  9. Tree-structural pseudo-classes
    • :root
      6m
    • :empty
      8m
    • :nth-child()
      16m
    • :nth-last-child()
      10m
    • :first-child()
      10m
    • Free
    • :only-child()
      8m
    • :nth-of-type()
      15m
    • :nth-last-of-type()
      10m
    • :first-of-type()
      11m
    • :last-of-type()
      9m
    • :only-of-type()
      11m
  10. Patterns in :nth-*() selectors
    • Free
    • Keyword values
      10m
    • Functional notation
      30m
    • of <selector>
      13m
    • Quantity aware
      15m
  11. Functional pseudo-classes
    • :is()
      10m
    • :where()
      8m
    • Free
    • Free
  12. More pseudo-classes
    • :dir()
      17m
    • :lang()
      10m
    • :fullscreen
      8m
    • :modal
      9m
  13. Pseudo-elements
    • Free
    • Free
    • ::after
      11m
    • ::first-letter
      7m
    • ::first-line
      5m
    • ::selection
      6m
    • ::marker
      9m
    • ::backdrop
      7m
    • ::file-selector-button
      6m
    • ::placeholder
      7m
Quiz
selectors-card

Practice makes perfect with quizzes

Practice makes perfect! Each module comes with quizzes to help you nail down what you’ve learned. With plenty of practice with quizzes, you’ll build confidence and become a CSS selector pro in no time.

* We’ve covered everything up to Combinators so far, and we’re working hard to bring you the rest soon - stay tuned!

QuizQuizQuizQuizQuiz
Card
selectors-card

Forgot which selectors to use? Just come and peep!

Can't recall which selectors to use? No worries! Our Selectors Card Finder page gives all members instant access to quickly search and find the selectors you need. Say goodbye to the hassle of remembering every detail!

CSS Selectors Card Finder
Real-world Scenarios
real-world-scenarios

Not Just Principles, Learn Practical Solutions

Practicing with real-world scenarios is crucial for a deep understanding of how each selector functions. You'll receive regular updates with practical CSS selector solutions, empowering you to leverage the latest technologies in your projects.

First Letter Styling

First Letter Styling

Learn styling the first letter of text using a utility-based approach with OOCSS.
::first-letter
google font
utility class
oocss
CSS Tooltip

CSS Tooltip

Learn how to create a tooltip using only CSS.
::before
::after
:hover
File Format Icons

File Format Icons

Learn how to display the correct icon for each file format without using JavaScript.
ending attribute
::before
Custom Checkbox

Custom Checkbox

Learn how to style checkboxes for a better visual effect while ensuring accessibility.
exact attribute
adjacent sibling
::before
:disabled
Email List with Indeterminate

Email List with Indeterminate

Learn how to use the indeterminate state and apply it to an email list table.
:indeterminate
general sibling
adjacent sibling
Dark theme switcher

Dark theme switcher

Learn how to create a dark theme switcher.
hover
checked
focus-visible
general sibling
adjacent sibling
Dark theme in action

Dark theme in action

Activating Dark Mode with :has() pseudo-class.
has
color-scheme
light-dark
quantity aware
Smart button

Smart button

Learn how to build a smart button that adapts its appearance dynamically based on its content.
has
not
where
prefers-reduced-motion
specificity

More coming soon 💌

Stay Up to Date

Stay Up to Date

We continuously update our course with the newest CSS selectors, ensuring you're always up to date. There's no need to search elsewhere for the latest updates. This course is your one-stop destination for mastering all the essential selectors needed for your projects.

* Last updated October 2024

// Created by

  • nana
    nana
    Codesigner

    Hello, I am Nana, a product designer who loves the CSS magic. 🔮

    5 years ago, I shared a CSS selectors cheatseat. Thank you for all the love and support. 💚

    Now updated with video classes, covering most CSS selectors, this course makes understanding CSS selectors easy for everyone.

    Let's dive into the magic of CSS selectors together.

  • Ryan
    Ryan
    Instructor

    Hey 👋, I'm Ryan based in Sydney, Australia.

    I've spent almost 15 years working as a frontend engineer, leading a variety of projects and making extensive use of CSS Selectors in complex environments.

    I'm genuinely excited to share my knowledge and assist you in learning how to effectively use CSS selectors for your projects.

    I'm looking forward to welcoming you to the course soon!

Join the waitlist

Subscribe to the waitlist to be notified when it's released.

// Frequently Asked Questions

Learn, practice, master
Join CSS Selectors Now
Join waitlist


Beautifully crafted by Frontendly.io with lots of 💛

© Copyright Frontendly. All rights reserved.

Join waitlist now 🚀