InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

CSS selectors

    Simple Selectors

    • type selectors
    • universal selector (*)
    • attribute presence and value selectors
    • attribute substring selectors
    • class selectors
    • two classes (.c1.c2)
    • id selectors

    Pseudo-classes

    • :link
    • :visited
    • :hover
    • :active
    • :focus
    • :target
    • :lang
    • :enabled and :disabled
    • :checked
    • :root
    • :nth-child
    • :nth-of-type
    • :nth-child vs :nth-of-type
    • :nth-last-child
    • :nth-last-of-type
    • :first-child
    • :first-of-type
    • :last-child
    • :last-of-type
    • :only-child
    • :only-of-type
    • :empty
    • :not

    Pseudo-elements

    • ::first-line
    • ::first-letter
    • ::before and ::after
    • ::placeholder

    Combinators

    • child vs descendant selector
    • adjacent sibling selector (E1 + E2)
    • general sibling selector (E1 ~ E2)

    Specificity

    • Selector specificity
     
    • Home
    • > Tutorials
    • > CSS
    • > CSS selectors

    CSS class selectors – define style by class name

    on Apr 8, 2016

    The CSS class selector matches element having a specific class name as one of the classes in attribute class. This can be used to specify CSS style based on class name.

    Here is the syntax for defining style using class selector.

    .classname { style properties } /*all elements having class classname*/
    
    div.classname { style properties } /*div element having class classname*/
    

    Example – style using class selector

    <style>
    /* div.box can also be used to be more specific */
    .box {
      width: 100px; height:100px;
      background-color: lightgreen;
    }
    </style>
    
    <div class="box foo bar">
      Hello world
    </div>
    refresh done
    try it online

    Related

    • CSS type selectors - define style by element name
    • CSS universal selector
    • CSS attribute presence and value selectors
    • CSS attribute substring selectors
    • CSS - style for element having two classes (both)
    • CSS id selectors - define style by element id

    Specification

    • W3C CSS 3 class selectors specification

    Suggested posts:

    1. CSS id selectors – define style by element id
    2. CSS type selectors – define style by element name
    3. CSS attribute presence and value selectors
    4. CSS attribute substring selectors
    5. CSS selector specificity
    6. CSS pseudo class :hover
    7. CSS :only-child – define style if element if only child
    8. CSS :only-of-type – define style of only child a type
    Share this article: share on facebook share on linkedin tweet this submit to reddit
    Posted in Tutorials | Tagged CSS, CSS selectors, Tutorials
    • Browse content
    • Article Topics
    • Article archives
    • Contact Us
    Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

    Copyright © 2023 InfoHeap.

    Powered by WordPress