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 TutorialCardReal-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
  • 10+
    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
    • What you are going to get from this course
      Coming soon
    • Resources and Tips for taking the course
      Coming soon
    • Browser and Editor setup
      Coming soon
  2. Basic selectors
    • Anatomy of CSS Rule
      4m
    • Type selector
      3m
    • ID selector
      4m
    • Class selector
      7m
    • Universal selector
      2m
    • CSS Specificity
      7m
  3. Attribute selectors
    • Simple attribute value selector
      7m
    • Exact attribute value selector
      4m
    • Beginning attribute value selector
      5m
    • 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
    • Child combinator
      3m
    • 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
    • :hover
      4m
    • :active
      4m
    • :focus
      9m
    • :focus-visible
      4m
    • :focus-within
      4m
    • Ordering the link states
      11m
  8. Input pseudo-classes
    • :autofill
      Coming soon
    • :disabled
      Coming soon
    • :enabled
      Coming soon
    • :read-only
      Coming soon
    • :read-write
      Coming soon
    • :placeholder-shown
      Coming soon
    • :default
      Coming soon
    • :checked
      Coming soon
    • :indeterminate
      Coming soon
    • :required
      Coming soon
    • :optional
      Coming soon
    • :valid
      Coming soon
    • :invalid
      Coming soon
    • :in-range
      Coming soon
    • :out-range
      Coming soon
  9. Tree-structural pseudo-classes
    • :root
      Coming soon
    • :empty
      Coming soon
    • :nth-child()
      Coming soon
    • :nth-last-child()
      Coming soon
    • :first-child()
      Coming soon
    • :last-child()
      Coming soon
    • :only-child()
      Coming soon
    • :nth-of-type()
      Coming soon
    • :nth-last-of-type()
      Coming soon
    • :first-of-type()
      Coming soon
    • :last-of-type()
      Coming soon
    • :only-of-type()
      Coming soon
  10. Patterns in :nth-*() selectors
    • Intro
      Coming soon
    • Keyword values
      Coming soon
    • Functional notation
      Coming soon
    • of <selector>
      Coming soon
    • Quantity aware
      Coming soon
  11. Functional pseudo-classes
    • :is()
      Coming soon
    • :where()
      Coming soon
    • :not()
      Coming soon
    • :has()
      Coming soon
  12. More pseudo-classes
    • :dir()
      Coming soon
    • :lang()
      Coming soon
    • :fullscreen
      Coming soon
    • :modal
      Coming soon
  13. Pseudo-elements
    • What is pseudo-element?
      Coming soon
    • ::before
      Coming soon
    • ::after
      Coming soon
    • ::first-letter
      Coming soon
    • ::first-line
      Coming soon
    • ::selection
      Coming soon
    • ::marker
      Coming soon
    • ::backdrop
      Coming soon
    • ::file-selector-button
      Coming soon
    • ::placeholder
      Coming soon
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.
coming soon
ending attribute
::before
Custom Checkbox

Custom Checkbox

Learn how to style checkboxes for a better visual effect while ensuring accessibility.
coming soon
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.
coming soon
:indeterminate
general sibling
adjacent sibling

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 May 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 🚀