CODEWITHSUNDEEP
htmlwordpresscss
Rick
Rick

Reputation: 61

CSS for targeting variable id name

I am using WordPress and have a slideshow from my Smugmug site.

The slideshow shows a cookie notification that I wish to hide. The problem is that the id attribute is random, except for the first and last characters (starting with yui_ and with _32 at the end. The Class is constant but using it makes no difference to the display of the Cookie Warning. There is some dynamically loaded javascript that runs as part of the embedded slideshow as well. I don't know if that makes a difference to the ability of local CSS to modify the code.

HTML:

<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_32"> = $0
            “ FYI: This site uses cookies to make sure your visit is as awesome as possible.  “
           <a class"headermessagelink"="" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
      <div class="sm-eu-cookie-close">
      <button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
      <span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
      </button>
</div>
</div>

I have spent hours trying to search for an answer without success.

How can I hide the entire <div> element using CSS?

EDIT: I should have mentioned that I have no control over the server from which the embedded code is served and most of the coed above is dynamically generated when the page loads. I can only edit the local CSS on my Wordpress theme and the theme CSS on my Smugmug hosted galleries (but I don't think that affects the slideshow that is shown on external embeds). The site is https://light/touch.photography/ if you want to see the page code as presented to the user.

Upvotes: 6

Views: 8072

Answers (2)

Ricky Ruiz
Ricky Ruiz

Reputation: 26771

CSS Approach

If the class of the cookie notification is consistent, you can use:

.sm-eu-cookie-message{
  display: none; /* If it is persistent, use the !important flag. */
}

Or, using !important flag:

.sm-eu-cookie-message{
  display: none!important; 
}

If the class is not consistent but the attribute id values are, you can use the ^ or $ substring matching attribute selectors.

  • [attribute^=value] Selects every element where the attribute starts with the specified value.
  • [attribute$=value] Selects every element where the attribute ends with the specified value.

[id^=yui_],
[id^=yui_ i] {  /* match attribute values case-insensitively */
  color: red;
  /*display: none;*/
}
[id$=_32] {
  color: blue;
  /*display: none;*/
}
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yui_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
  Id attribute ends with <em>_32</em>
</div>

<div class="sm-eu-cookie-message" id="yUI_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yUI_</em>
</div>

To cover more ground, you can also use the * substring matching attribute selector.

  • [attribute*=value] Selects every element where the attribute contains at least one instance of the specified value.

[id^=yui_],
[id^=yui_ i],  /* match attribute values case-insensitively */
[id*=yui_],
[id*=yui_ i]{  /* match attribute values case-insensitively */
  color: red;
  /*display: none;*/
}
[id$=_32],
[id*=_32]{
  color: blue;
  /*display: none;*/
}
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yui_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
  Id attribute ends with <em>_32</em>
</div>

<div class="sm-eu-cookie-message" id="yUI_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yUI_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
  Id attribute containing an instance of <em>_32</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yui_1478749888956_changedfordemo">
  Id attribute containing an instance of <em>yui_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yUI_1478749888956_changedfordemo">
  Id attribute containing an instance of <em>yUI_</em>
</div>

More info on these selectors here, source W3C.

Have in mind that this notification comes from an external source, and it can change completely all of a sudden, making the previous selectors useless and in need of an update.

EDIT:

JS Approach

This requires jQuery library.

You have two options:

  1. Manually create a jQuery Multiple selector and use remove().
  2. Use a function to do it for you.

1) Manually create a jQuery Multiple selector:

$(document).ready(function() {

  $("[id^=yui_], [id$=_32], [id*=yui_], [id*=_32], [id^=yui_ i], [id$=_32 i], [id*=yui_ i], [id*=_32 i], [id^=yui_][id$=_32], [id^=yui_ i][id$=_32 i]").remove();

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yui_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
  Id attribute ends with <em>_32</em>
</div>

<div class="sm-eu-cookie-message" id="yUI_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yUI_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
  Id attribute containing an instance of <em>_32</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yui_1478749888956_changedfordemo">
  Id attribute containing an instance of <em>yui_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yUI_1478749888956_changedfordemo">
  Id attribute containing an instance of <em>yUI_</em>
</div>

2. Use a function to do it for you.

$(document).ready(function() {

  // Summary: Removes an element from the DOM by substring matching attribute selectors.
  // Params: att, beginsWith, endsWith, bContains, bCaseInsensitive, bBeginsAndEndsWith
  function removeByAttSubstring(att, beginsWith, endsWith, bContains, bCaseInsensitive, bBeginsAndEndsWith) {

    // Assign string variables for each selector that we want to create
    var sBw = att + "^=" + beginsWith,
      sEw = att + "$=" + endsWith,
      sCbw = att + "*=" + beginsWith,
      sCew = att + "*=" + endsWith;

    // Create an array of the string selectors
    var aSelectors = [sBw, sEw, sCbw, sCew];

    // If boolean case insensitive equals true, add those strings as well
    if (bCaseInsensitive === true) {
      var sBwCi = att + "^=" + beginsWith + " i",
        sEwCi = att + "$=" + endsWith + " i",
        sCbwCi = att + "*=" + beginsWith + " i",
        sCewCi = att + "*=" + endsWith + " i";
      aSelectors.push(sBwCi, sEwCi, sCbwCi, sCewCi);
    }

    // If boolean stack attributes equals true, combine the strings
    if (bBeginsAndEndsWith === true) {
      var sBwaew = sBw + "][" + sEw;
      aSelectors.push(sBwaew);
    }

    // If booleans case insensitive and stack attributes equals true, combine the case insensitive strings 
    if (bCaseInsensitive === true && bBeginsAndEndsWith === true) {
      var sBwaewCi = sBw + " i][" + sEw + " i";
      aSelectors.push(sBwaewCi);
    }

    // For each string in the array, construct the attribute selector.
    for (var i = 0; i < aSelectors.length; i++) {
      aSelectors[i] = "[" + aSelectors[i] + "]";
    }
    // Format the jQuery Multiple Selector
    var sSelectors = aSelectors.join(", ");

    // Illustration purposes only
    console.log("Attribute Selectors: " + sSelectors);

    // Remove the elements, if matched, entirely from the DOM
    $(sSelectors).remove();

  }

  // Initialize function
  removeByAttSubstring("id", "yui_", "_32", true, true, true);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yui_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
  Id attribute ends with <em>_32</em>
</div>

<div class="sm-eu-cookie-message" id="yUI_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yUI_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
  Id attribute containing an instance of <em>_32</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yui_1478749888956_changedfordemo">
  Id attribute containing an instance of <em>yui_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yUI_1478749888956_changedfordemo">
  Id attribute containing an instance of <em>yUI_</em>
</div>

Parameters:

  1. att - (type: string) The attribute you want to match.
  2. beginsWith - (type: string) The value that the attribute value begins with.
  3. endsWith - (type: string) The value that the attribute value ends with.
  4. bContains - (type: boolean) If true, use the * substring matching attribute selector for both beginsWith and endsWith variables by creating new selectors (It does not replace them, it adds new ones).
  5. bCaseInsensitive - (type: boolean) If true, add new selectors but using the case insensitive flag i.
  6. bBeginsAndEndsWith - (type: boolean) If true, stack attribute selectors. (If bCaseInsensitive is true, it adds another stacked selector with case insensitive too).

Example:

  removeByAttSubstring("id", "yui_", "_32", true, true, true);

jsFiddle

Notes:

  • The case-insensitive CSS atribute selectors are level 4, you might want to check the browser suppport here. They are included in the demo to cover more ground, but they might not work in some browsers. That's why we keep the case-sensitive ones too.

Upvotes: 6

Bram Vanroy
Bram Vanroy

Reputation: 28437

Nice and simple: stack attribute selectors. I also added the !important directive because if this HTML comes from a plugin, it is likely that there is already CSS available. With !important you force your CSS to be used, unless the other party uses an even more specific selector with !important. If they override CSS with JavaScript you need to resort to a JS solution yourself.

div[id^="yui_"][id$="_32"] {
  display: none!important;
}
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478235091986_32">= $0 “ FYI: This site uses cookies to make sure your visit is as awesome as possible. “
  <a class="headermessagelink" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
  <div class="sm-eu-cookie-close">
    <button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
      <span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
    </button>
  </div>
</div>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_14782349638956_32">= $0 “ FYI: This site uses cookies to make sure your visit is as awesome as possible. “
  <a class="headermessagelink" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
  <div class="sm-eu-cookie-close">
    <button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
      <span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
    </button>
  </div>
</div>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_147834534532_32">= $0 “ FYI: This site uses cookies to make sure your visit is as awesome as possible. “
  <a class="headermessagelink" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
  <div class="sm-eu-cookie-close">
    <button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
      <span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
    </button>
  </div>
</div>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_147834534532_33">NOT HIDDEN
  <a class="headermessagelink" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
  <div class="sm-eu-cookie-close">
    <button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
      <span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
    </button>
  </div>
</div>

Upvotes: 2

Related Questions