Attribute selectors ineffective in displaying element in "inline-block" - what's wrong?

Question

I have a group of LinkedIn share buttons (supplied via LinkedIn) throughout my blog pages, that I am trying to align horizontally inline with other share buttons. I have tried most everything so far, and have decided to - ineffectively - try attribute selectors to make the buttons do what I want. Here is the button code:

<script src="//platform.linkedin.com/in.js" type="text/javascript">
  <span class="IN-widget" style="line-height: 1; vertical-align: baseline; display: inline-block; text-align: center;">

And the attempted CSS:

span[class="IN-widget"] { display: inline-block; }

Can anyone tell me if I'm misstepping here? To my knowledge, every share button has this common class as part of its source code, so this should do the trick in introducing the desired styling. Any help would be much appreciated!

Answer 1

Edit

Second Edit: .IN-widget is dynamically generated and doesn't exist in markup. So use 'script[type^=IN]' as your selector see edited code below

Having one per page and using the id would be inefficient, so we need to use JavaScript/jQuery instead of CSS. One major limitation of CSS is it's inability to control a selected element's parent and ancestors.

Details are commented in demo

Demo

/* The selector means:
|| Find a <script> tag that has a [type] attribute 
|| that's value begins ^= with the string of "IN"
*/
/* The .closest() method will find the ancestor closest 
|| to the targeted selector. So here it's saying:
|| (Previous comment here)
|| Find the closest ancestor of the selected element 
|| which has the classes .sqs-block, .code-block, 
|| and .sqs-block-code.(grandma)
|| Use .css() method to change grandma's styles.
|| The extra style top:3px is just to push the icon down
|| down so that it is inline with FB and Twit icons.
*/

$('script[type^=IN]').closest('.sqs-block.code-block.sqs-block-code').css({
  'display': 'inline-block',
  'top': '3px'
});

$('.fb-share-button').closest('.sqs-block.code-block.sqs-block-code').css('display', 'inline-block');

$('.twitter-share-button').closest('.sqs-block.code-block.sqs-block-code').css('display', 'inline-block');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="sqs-block code-block sqs-block-code">
  <div class="sqs-block-content">
    <div class="fb-share-button fb_iframe_widget"><span style="vertical-align: bottom; width: 58px; height: 20px;"><iframe width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" src="https://www.facebook.com/v2.8/plugins/share_button.php?app_id=&amp;channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2F0F7S7QWJ0Ac.js%3Fversion%3D42%23cb%3Df836e17d67a66%26domain%3Dtylercharboneauprofessional.com%26origin%3Dhttps%253A%252F%252Ftylercharboneauprofessional.com%252Ff23efc0724f4838%26relation%3Dparent.parent&amp;container_width=39&amp;href=https%3A%2F%2Fwww.tylercharboneauprofessional.com%2Finternational-pulse%2Fyour-guide-to-the-french-election%2F&amp;layout=button&amp;locale=en_US&amp;mobile_iframe=false&amp;sdk=joey" style="border: none; visibility: visible; width: 58px; height: 20px;" class=""></iframe></span>
    </div>
  </div>
</div>

<div class="sqs-block code-block sqs-block-code">
  <div class="sqs-block-content">

    <iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-share-button twitter-share-button-rendered twitter-tweet-button" style="position: static; visibility: visible; width: 60px; height: 20px;" src="https://platform.twitter.com/widgets/tweet_button.5b6375bb17bd9edb2f4e7f8f12971999.en.html#dnt=true&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=https%3A%2F%2Ftylercharboneauprofessional.com%2Finternational-pulse%2Fyour-guide-to-the-french-election&amp;size=m&amp;text=Your%20Guide%20to%20the%20French%20Presidential%20Election%2C%20and%20Why%20it%20Matters%20%E2%80%94%20Tyler%20Charboneau&amp;time=1495223324688&amp;type=share&amp;url=https%3A%2F%2Ftylercharboneauprofessional.com%2Finternational-pulse%2Fyour-guide-to-the-french-election"></iframe>

  </div>
</div>

<div class="sqs-block code-block sqs-block-code">
  <div class="sqs-block-content">

    <span class="IN-widget" style="line-height: 1; vertical-align: baseline; display: inline-block; text-align: center;"><span style="padding: 0px !important; margin: 0px !important; text-indent: 0px !important; display: inline-block !important; vertical-align: baseline !important; font-size: 1px !important;">
<span><a href="javascript:void(0);"><span>in</span><span><span></span><span>Share</span></span>
    </a>
    </span>
    </span>
    </span>
    <script type="IN/Share"></script>
  </div>
</div>

Each share button has been stripped of ids and are as generic as they could be for demonstration purposes. On each page, include the jQuery inside <script> tags and place that <script> block before the closing </body> tag. Any other modification to HTML is unnecessary. A better way is to use an external script and have each page point to that .js file. To save a http request you could add that those 3 lines to an existing .js script but you'll need to be familiar with jQuery/JavaScript to do so safely.

Explination

This template (like all templates of this nature, Squarespace, Word-Press, etc.) is a cluster-fu#@ of HTML. If you find a particular element and you need to actually move it, or behave in layout, or adhere to a flow, you'll need to move up the DOM hierarchy until you find the ancestor that has siblings. For example:

 <div class='great-great-great-aunt'>
     <!--Many levels of cousins-->
        <span class='fb'>Facebook I need to liked!</span>
     <!--...</div>...-->
   </div>
   <div class='great-great-grandma'>
      <div class='great-grandma'>  
         <div class='grandma'>
            <div class='mom'>
               <span class='linkedIn'>Hey I'm a corporate clone! How about you?</span>
            </div>
          </div>
       </div>
     </div>

The target element in this example is .linkedIn (Note the . preceding the className, that is the proper syntax for a class selector in CSS and jQuery.) On the surface, that is the element you see in the browser. It's "cousin" icon is .fb, meaning that as far as relations go they are not siblings as it appears so when rendered in browser. They do not share the same parents as siblings would so styles that concern position, flow, layout, etc. will not affect a cousin. Cousins are isolated from each other because they are nested within their own parent element as well as any ancestor elements. Therefore you must find the ancestor of .linkedIn that has a sibling that is the ancestor of .fb. Confused? Me too.

Solution

Here is grandma:

 #block-yui_3_17_2_1_1493318168221_183886

A # means id which is by far the easiest and most accurate way of locating a specific element. The reason id is the best means of selecting an element is because an id is unique on any given document (i.e. single webpage).

This is the ruleset that should bring that linkedIn icon inline with the Twitter and Facebook icons:

 #block-yui_3_17_2_1_1493318168221_183886 { display: inline-block; top:3px}

Answer 2

Linkedin Share Example Check this jsfiddle: https://jsfiddle.net/wrahvvr2/

JS:

<script src="//platform.linkedin.com/in.js" type="text/javascript">
  lang: en_US
</script>
<script type="IN/Share" data-counter="top"></script>

CSS(this should target the share button):

span[class="IN-widget"] {
  display: inline-block;
  background: red;
}

BTW:

You have an open script tage:

<script src="//platform.linkedin.com/in.js" type="text/javascript">

You should close it:

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>