{"id":241,"date":"2021-03-21T15:40:09","date_gmt":"2021-03-21T15:40:09","guid":{"rendered":"https:\/\/wshop.fi\/eng\/?p=241"},"modified":"2021-03-21T15:40:10","modified_gmt":"2021-03-21T15:40:10","slug":"css-wildcard-kind-of-css-attribute-selector","status":"publish","type":"post","link":"https:\/\/wshop.fi\/eng\/css-wildcard-kind-of-css-attribute-selector\/","title":{"rendered":"CSS Wildcard (kind of) – CSS Attribute Selector"},"content":{"rendered":"\n

CSS wildcard<\/strong> or CSS Regular expression?<\/strong> – You may be looking for CSS Attribute Selector.<\/p>\n\n\n\n

CSS Attribute Selector – Here\u2019s the scenario: You want to add styling to all elements that have \u201cread\u201d in the  name of the class.<\/p>\n\n\n\n

For instance: Below classes have some of the same wording.<\/p>\n\n\n\n

mark-as-unread
mark-as-reading
mark-as-read
mark-as-not-interested<\/p>\n\n\n\n

In CSS, selectors are patterns used to select the element(s) you want to style.  If you are looking for a CSS wildcard<\/strong> or CSS Regular expression<\/strong> then what you might  be trying to find is a CSS Attribute Selector<\/strong>.<\/p>\n\n\n\n

CSS Attribute Selector – HTML – for\u00a0CSS Wildcard<\/h2>\n\n\n\n

*note the space after \u201c-read \u201d for book 3.<\/p>\n\n\n\n

<div class=\"mark-as-unread otherClass\">   Book 1   <\/div>\n<div class=\"mark-as-reading otherClass\">   Book 2   <\/div>\n<div class=\"mark-as-read otherClass\">   Book 3   <\/div>\n<div class=\"mark-as-not-interested otherClass\">   Book 4   <\/div><\/code><\/pre>\n\n\n\n
CSS Attribute Selector – CSS – for\u00a0CSS Wildcard<\/h2>\n\n\n\n
div[class*='-read'] {color:blue; }\ndiv[class*='-read '] {text-decoration:line-through;}\ndiv[class*='mark-as'] {font-style:italic; }\n.otherClass {font-size:200%;}<\/code><\/pre>\n\n\n\n
CSS Wildcard or CSS\u00a0Selectors to note<\/h2>\n\n\n\n
  • ^<\/strong> \u2013 matches if the attribute begins<\/strong> with the given string<\/li>
  • $<\/strong> \u2013 matches if the attribute ends<\/strong> with the given string<\/li>
  • *<\/strong> \u2013 matches any<\/strong> part of the attribute value that contains<\/strong> given string<\/li><\/ul>\n\n\n\n
    CSS Selectors List \/ CSS Wildcard Table<\/h2>\n\n\n\n
    Selector<\/th>Example<\/th>Example description<\/th>CSS<\/th><\/tr>
    [attribute<\/em>]<\/a><\/td>[target]<\/td>Selects all elements with a target attribute<\/td>2<\/td><\/tr>
    [attribute<\/em>=value<\/em>]<\/a><\/td>[target=_blank]<\/td>Selects all elements with target=\u201d_blank\u201d<\/td>2<\/td><\/tr>
    [attribute<\/em>~=value<\/em>]<\/a><\/td>[title~=nickfever]<\/td>Selects all elements with a title attribute containing the word \u201cnickfever\u201d<\/td>2<\/td><\/tr>
    [attribute<\/em>|=value<\/em>]<\/a><\/td>[lang|=en]<\/td>Selects all elements with a lang attribute value starting with \u201cen\u201d<\/td>2<\/td><\/tr>
    [attribute<\/em>^=value<\/em>]<\/a><\/td>a[src^=”https”]<\/td>Selects every <a> element whose src attribute value begins with \u201chttps\u201d<\/td>3<\/td><\/tr>
    [attribute<\/em>$=value<\/em>]<\/a><\/td>a[src$=”.pdf”]<\/td>Selects every <a> element whose src attribute value ends with \u201c.pdf\u201d<\/td>3<\/td><\/tr>
    [attribute<\/em>*=value<\/em>]<\/a><\/td>a[src*=”nickfever”]<\/td>Selects every <a> element whose src attribute value contains the substring \u201cnickfever\u201d<\/td>3<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"
    CSS wildcard or CSS Regular expression? – You may be looking for CSS Attribute Selector. CSS Attribute Selector – Here\u2019s the scenario: You want to add styling to all elements that have \u201cread\u201d in the  name of the class. For instance: Below classes have some of the same wording. mark-as-unreadmark-as-readingmark-as-readmark-as-not-interested In CSS, selectors are patterns used to select the […]<\/p>\n","protected":false},"author":1,"featured_media":119,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":{"0":"post-241","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-coding"},"_links":{"self":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/comments?post=241"}],"version-history":[{"count":1,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/241\/revisions"}],"predecessor-version":[{"id":242,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/241\/revisions\/242"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/media\/119"}],"wp:attachment":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/media?parent=241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/categories?post=241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/tags?post=241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}