{"id":3004,"date":"2016-08-09T09:17:26","date_gmt":"2016-08-09T14:17:26","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1914"},"modified":"2016-08-09T09:17:26","modified_gmt":"2016-08-09T14:17:26","slug":"how-to-use-css3s-not-pseudo-selector","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-use-css3s-not-pseudo-selector\/","title":{"rendered":"How To Use CSS3’s :not() Pseudo Selector"},"content":{"rendered":"

CSS3’s :not pseudo selector makes it possible for you to select and apply styling to every type of element except<\/em> one. This handy little trick can save you from having to manually write a lot of CSS code, because in just one line you can define a style to be applied to certain elements while also designating that the style\u00a0not<\/em> be applied to another.<\/p>\n

To use this selector, you need to first define the element type that you want the styling to be applied to, and then using the pseudo-selector :not(), define the element type that you want\u00a0excluded\u00a0<\/em>from this styling. For example, let’s say you’d like the color of all text in your HTML to be a shade of red, except for <a> tags. Here’s what that code would need to look like using :not() :<\/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. body :<\/span>not(<\/span>a)<\/span>{<\/span><\/div><\/li>\n
  2. color<\/span>:<\/span> #ef3e42<\/span>;<\/span><\/div><\/li>\n
  3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    \"Screen<\/p>\n

    So the color #ef3e42 is applied to all of the body text, except for the <a> tags, because the “a” element is selected within the parentheses.<\/p>\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":"

    CSS3’s :not pseudo selector makes it possible for you to select and apply styling to every type of element except one. This handy little trick can save you from having to manually write a lot of CSS code, because in […]<\/p>\n

    Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2759,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[192],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3004"}],"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=3004"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3004\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2759"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}