Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
Like Tree1Likes
  • 1 Post By Ronald Roe

Thread: What is the proper CSS selector?

  1. #1
    Junior Member
    Join Date
    Dec 2016
    Posts
    2
    Member #
    55864

    What is the proper CSS selector?

    I need help targeting this particular span class. Because it uses the data-displayname custom attribute after the initial span class, I need to know how to select just that individual field.

    This is what the HTML looks like:
    <span class="hillbillyForm" data-displayname="Module"></span>

    So I'm having a tough time writing the CSS classes for these fields. I'm pretty sure they should start with .hillbillyForm but I'm not sure what the proper selector is.

    Please help!

    Here's some background for why I'm coding it this way. It's essentially to make a boring SharePoint list prettier using a third party solution I found...

    So, the key that makes this all work is that the script is looking for each “span” in your custom layout that has the class “hillbillyForm”. This special span is the placeholder for your SharePoint Form input/display field.

    The script then looks for a custom attribute in this span called “data-displayName”. The value of this attribute is the DISPLAY NAME of the SharePoint Form field for which the span is a placeholder for.

    Confused yet?

    For example, the following span is a placeholder for the field with the Display Name “Title”:

    <span class=”hillbillyForm” data-displayName=”Title"</span>

    Sent from my Pixel XL using Tapatalk

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    That would depend on the rest of your page. If there are other hillbillyForm classes (who the F**K named that class, by the way?) then you may be able to get away with something like span.hillbillyForm:nth-of-type(1) (if it's the first one).

    If it's the only hillbillyForm contained within a parent element with a unique ID (and not an ASP.net automatically generated ID) you might be able to use something like div#hillbillyFormContainer span.hillbillyForm .

    I've never tried to use a data attribute as a CSS selector, so I don't know if that's possible (I suspect it probably isn't). Since this is sharepoint and data attributes are most commonly used in conjunction with JavaScript, you may be able to manipulate the span using JavaScript to add a unique ID or class name to that span to work in conjunction with your CSS.

    The long and the short of it is that there's not a direct way to target that particular span and you're going to have to get creative.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member
    Join Date
    Dec 2016
    Posts
    2
    Member #
    55864
    I was afraid of that. Thanks for your feedback though!

    Sent from my Pixel XL using Tapatalk

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    You can use the attribute selector to get it by the data-displayname attribute: https://css-tricks.com/almanac/selectors/a/attribute/
    RosamundJeffers likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Junior Member
    Join Date
    Jan 2017
    Posts
    1
    Member #
    56061
    Hello everybody!Few mounth ago i got some problem with my scientific article.I couldn't find normal picture.if the picture was good - size was to big,or wrong format.So i spend more then one houre without any successSuddenly i found in internet very,very nice website [EDIT: link removed by TheGAME1264] wich one help me to solve all my problems.this website helps to choose placeholder from huge base,with all yours characteristic.How its works?Very easily.You just enter all your nesessary characteristic and choosing type of generating.For example: if you choose type of generating "One Image" you will got the same image.If you choose "Random image" you will get different image to your link.Also you can choose a category for your picture.Change the color,height,width etc.And ,of course,one of the best news that this service is absolutely free!!! I must say that i am really enjoying with this free placeholder assistanse.Adervise my scientific article can take a lot of time. I am strongly recommended this service.
    Thank you.
    Last edited by TheGAME1264; Jan 25th, 2017 at 06:48 AM.

  7. #6
    Senior Member
    Join Date
    Feb 2006
    Posts
    793
    Member #
    12463
    Liked
    296 times
    Quote Originally Posted by Alex1980 View Post
    Hello everybody!Few mounth ago i got some problem with my scientific article.I couldn't find normal picture.if the picture was good - size was to big,or wrong format.So i spend more then one houre without any successSuddenly i found in internet very,very nice website --link removed--- wich one help me to solve all my problems.this website helps to choose placeholder from huge base,with all yours characteristic.How its works?Very easily.You just enter all your nesessary characteristic and choosing type of generating.For example: if you choose type of generating "One Image" you will got the same image.If you choose "Random image" you will get different image to your link.Also you can choose a category for your picture.Change the color,height,width etc.And ,of course,one of the best news that this service is absolutely free!!! I must say that i am really enjoying with this free placeholder assistanse.Adervise my scientific article can take a lot of time. I am strongly recommended this service.
    Thank you.
    How does this relate to this conversation? Please explain. Or is this simply a link-drop on your very first post?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:21 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com