{"id":1927,"date":"2016-05-24T14:18:15","date_gmt":"2016-05-24T14:18:15","guid":{"rendered":"http:\/\/cssreset.com\/?p=1927"},"modified":"2016-05-24T14:18:15","modified_gmt":"2016-05-24T14:18:15","slug":"quick-tip-multiple-classes","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/quick-tip-multiple-classes\/","title":{"rendered":"Quick Tip: Multiple Classes"},"content":{"rendered":"

Sometimes it’s necessary for an HTML element to have two, three, or even four + classes assigned to it. To assign multiple classes to an element, all you need to do is separate them with a space, like this:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
HTML<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. <div<\/span> class<\/span>=<\/span>"class-one class-two class-three"<\/span>><\/<\/span>div<\/span>><\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    In your CSS, you can easily select one or all of these classes. To select some or all of the classes, makes sure you string them together using periods (.) with no spaces in between:<\/p>\n

    \r\n\r\n\t\t
    \r\n\r\n\t\t
    \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
    css<\/div>\r\n\r\n\t\t\r\n\t\t
    \r\n\r\n\t<\/div>\r\n\t\r\n\t
    \r\n\t\t
    1. .class-one<\/span>.class-three{<\/span><\/div><\/li>\n
    2.   font-size<\/span>:<\/span> 12px<\/span>;<\/span><\/div><\/li>\n
    3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

      Share and Enjoy !<\/h3>
      0<\/span><\/span>Shares<\/small><\/div>
      <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

      Sometimes it’s necessary for an HTML element to have two, three, or even four + classes assigned to it. To assign multiple classes to an element, all you need to do is separate them with a space, like this:<\/p>\n

      \t\t\t\t\t\t< View […]<\/p>\n

      Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,6,36,10,11,42],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1927"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1927"}],"version-history":[{"count":2,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1927\/revisions"}],"predecessor-version":[{"id":1929,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1927\/revisions\/1929"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1927"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}