photo

12 CSS Selectors to try out on your next project!

  1. The .class selector

    The .Class Selector will select all elements with the same class name. For Example, for div class="Example" you would use .Example to style all these examples the same. Here, by using the .example, I have created boxes for the info and colored the background.

  2. The ID selector

    The ID selector is marked with a "#" which is a way to select and style a specific element, without affecting any other elements. For example, using #Example2 allowed me to change the font color and font weight of just this example

  3. The element.class selector

    The element.class selecter allows you to style a specific group. For example, "p.p3qandp5" will style all "P" elements that have the same class name. Here I have used this selector to change the background and add a border to just section 3 and 5.

  4. The :nth-child() Selector

    The "nth-child()" selector will select all elements that are the specified child of the designated parent.

    For example, if we use p:nth-child(3), only this paragrapgh will be changed.

  5. The element>element selector (Parent + Child Selector)

    The element>element Selector allows you to select all child elements with the same parent element. For example, if we do an unordered list with list items, we can style all list items the same if we use "ul > li"

      List of Selectors

    • .Class Selector
    • #id Selector
    • element.class Selector
    • * Selector
    • element>element Selector

  6. The P Selector

    Lets look back at a a common, more simple Selector, the P Selector. The P Selector can be used to style wording within another selector. The P selector on its own will style all other P items the same, however if it is paired with an additional Selector, will allow you to style a single P element different from the others.

    This paragraph is set apart with an id selector of "ex6p" which allows me to style it different than the above paragraph

  7. The Descendant Combinator Selector

    This Selector can be used to styles all elements within another element with the same name. For thos exambple I have used h2 instead of h1 on selector example 1 and 7, if we use "li h2" this will style all h2 elements within a li element the same. Here I will use this selector to change the font of all h2 elements within li elements, in this case Examples 1 and 7.

  8. The Next-Sibling Combinator Selector

    For this example, instead of using a "P" element here, I chose to use a "main" element. The next sibling selector is used by using element + element. By using "h1 + main" I can style this paragraph with a different color background.

  9. The Selector List

    A selector list like "element, element, element" I can choose to style multiple elements the same, using only one entry. In this example, I used "#one, .sample, main" to change the background of only the heading of the background of the .class selector, the heading of the element>element selector, and the background of the Next-Sibling selector.

  10. The First-Child Selector

    The first-child selector is similar to the nth-child selector except instead of choosing a specific child, it chooses the first child of its listed parent. By using "li:first-child" we can change the font color of our first list item, "The .class selector"

  11. The Last-Child Selector

    The last-child selector is similar to the first-child selector except it selects the last child of the stated element. For example, "li:last-child" will allow be to style just the last element in a list. In this instance since we have a li under an ordered list, and under an unordered list, it will change both to the desired font color.

  12. The Subsequent-sibling combinator

    This Combinator Selector allows you to style an element based on it preceding element. For example, "h3 ~ p" will allow me to style all P elements that follow an h3 element. Here I have made the paragragh for "The Selector List and "The Last:Child Selector Underlined