CSS Selectors

CSS Selectors

Table of Contents

To add styling to an HTML element on a web page, you must first select it. It's important to specify an element because a typical webpage contains so many HTML elements, and it only is logical to select the ones you would like to style and not everything else.

The good thing is that CSS allows you to select different HTML elements using CSS selectors.

W3C has provided a plethora of selectors to enable web designers to select virtually every element and style it.

This chapter looks at some of the most commonly used CSS selectors.

Tag

Access tutorial

  • Gain Access to This TutorialiUnlock complete access to the current tutorial: CSS Selectors
  • Future UpdatesiYou will get access to all future updates to this tutorial.
  • Enjoy Unlimited UsageiUse on as many of your own sites or your clients sites as you wish.

    Note that reselling or redistributing is not permitted.
$99* Purchase access

Access everything

  • Unlock every premium tutorial on Element.howiGet access to the entire library of premium tutorials on Element.how
    Preview premium tutorials
  • Get access to the CSS course for Elementor usersiAccess the complete 14 HTML chapters, 30 CSS chapters and 7 Elementor Projects.Learn more
  • Simple CSS Grid For ElementoriAn Elementor Addon to Create Awesome Grid Layouts in a Single Click for Containers, Galleries and Loop Grid. Learn more
  • free extra: ShapeDividers.com Premium AccessiLifetime Premium Access to ShapeDividers.comVisit ShapeDividers.com
  • 30 day money backiNo questions asked money back. Not what you expected? Get a refund.
  • One-time payment of only $299iNo hidden fees or subscriptions.

    Sales taxes added where applicable.
  • Limited supportiGet help when you need it. Support includes getting things working as intended.

    Support excludes customization work.
  • Lifetime access to everything Element.howiThe price reflects what is currently available on Element.how. All future updates are included, but none are promised. You pay for what is available now, and the rest is a sweet extra.

    I will say that it is definitely my intention to keep adding tutorials to Element.how.
  • Launch offer discounts!iThis all inclusive package is freshly released and to celebrate, there is a special discount available:

    10% for new customers with coupon code LAUNCH10

    20% for existing customers with coupon code LAUNCH20

    30% for CSS Course customers with coupon code LAUNCH30_CSS_STUDENT

    Available for a limited time only.
$299* Purchase All Access
* All prices are USD. Applicable taxes will be charged at checkout. Have a question? email me

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly

Comments

6 Responses

  1. Hey Maxime.
    One little detail:

    On the: "Attribute and Value Selector" subtitle you have this HTML line:

    Link to click.

    But on the following examples, the value of the href is "home-page.html" from that point onwards.

    Keep up the good work! Cheers

  2. Also, I have a couple of questions.

    Under "Select Direct Children" I am a bit confused about the use of classes and the (>) symbol. Particularly, examples 3-5.

    Why on example 3 only the Second and Third level paragraphs are styled? The class is ".selectors-cd5", and you also added the "div" tag. But, the firs two "First level paragraph" are inside the "div class="wrapper selectors-cd5"

    Why are those two not styled when they are "p" tags inside a "div" tag?

    The same confusion comes with examples 4 and 5.

    Additionally, I noticed that in your examples, when you have a CSS class like "wrapper selectors-cd5", but you only need to target the "selectors-cd5" part. Is there a need for the "wrapper" element before it? Or is it to keep the class identified as its own thing?

    I can't do .wrapper selectors-cd5, and I think that had to do with the CSS syntax.

    Sorry for the long post, but I am trying to wrap my head around it!

    Thank you

    1. Hey Miguel!

      Thank you for your great questions!

      Why on example 3 only the Second and Third level paragraphs are styled? The class is ".selectors-cd5", and you also added the "div" tag. But, the first two "First level paragraph" are inside the "div class="wrapper selectors-cd5"

      This is because the full selector is ".selectors-cd5 div > p". Reading from right to left, we understand that this CSS selector is selecting all p elements that are direct children of a div element, which are themselves descendants of an element with the class 'selectors-cd5'.

      To break it down further:

      p: This is the element type being selected. It represents all p elements in the HTML document.

      >: This is the child combinator, which selects only direct children of the element on the left. In this case, it is selecting only p elements that are direct children of a div element.

      div: This is the element type being selected as a parent. It represents all div elements in the HTML document.

      .selectors-cd5: This is the class of the element being selected as an ancestor. It represents all elements with the class selectors-cd5 in the HTML document.

      So, this CSS selector is selecting all p elements that are direct children of a div element, and that have an ancestor element with the class .selectors-cd5.

      The key part to understand is that the space in between ".selectors-cd5" and "div" denotes an ancestor-descendant relationship. We are selecting div elements that are descendants of elements with the selectors-cd5 class name.

      The same logic goes for example 4 and 5. In example 5, the selector is ".selectors-cd5 div div > p"

      Reading this CSS selector from right to left, we understand that it selects all p elements that are a direct child of a div element, which itself is a descendant of a div element, that in turns is a descendant of an element with the class name "selectors-cd5".

      You asked:Is there a need for the "wrapper" element before it? Or is it to keep the class identified as its own thing?

      There is no need for the 'wrapper' class to be present in the examples. We needed to use uglier "selectors-cd5" kind of classes to avoid conflict across the code demos, as the CSS is applied to the whole page.

      To use both classes in a selector, to specify an element that has both the classes "wrapper" and "selectors-cd5", you would write it like this: .selectors-cd5.wrapper

      Hope this helps!

      Cheers!

      1. Thanks for the thorough explanation. It cleared a lot of my questions and helped me understand better this chapter of the course. Much appreciate it!

      2. Welcome Miguel and thank you for the great question!

        This chapter is one of the most important of the course to understand well... it really is a fundamental part of CSS.

Leave a Reply