CSS help matching specific span class

Posted on 2016-11-21
Medium Priority
Last Modified: 2016-11-21
Below is a code snippet that is output of a SharePoint page.  I need help selecting the <span class="ms-rteElement-btnWhite1">Want to style only this span</span> line below.   I realize I could just do "span.ms-rteElement-btnWhite1" but this formats it everywhere else it's found on the page.  Is it possible for me to just apply a style to it only when it's in the code below?

<td class="ms-cui-gallery-td ms-cui-gallery-element-sizeCustom">
	<div class="ms-cui-gallerybutton ms-cui-gallerybutton-SizeCustom ms-cui-gallerybutton-highlighted">
		<div tabindex="0" title="White Button" class="ms-cui-gallerybutton-a">
			<div class="ms-rte-stylePreview ms-rte-styleGalleryPreview">
				<div class="ms-rte-stylePreviewBox">
					<div class="ms-rte-stylePreviewBoxInner">
						<div class="ms-rte-stylePreviewHolder">
							<span style="white-space: nowrap;">
								<span class="ms-rteElement-btnWhite1">Want to style only this span</span>
				<div class="ms-rte-stylePreviewTitle ms-cui-ctl-mediumlabel">White Button</div>

Open in new window

Question by:greddin
LVL 20

Accepted Solution

Russ Suter earned 2000 total points
ID: 41896277
Depending on how detailed you want to get you can specify parent tags be included in your CSS defintion. In the most extreme case of your example above, your CSS declaration would look something like this:
td.ms-cui-gallery-td.ms-cui-gallery-element-sizeCustom > div.ms-cui-gallerybutton.ms-cui-gallerybutton-SizeCustom.ms-cui-gallerybutton-highlighted > div.ms-cui-gallerybutton-a > div.ms-rte-stylePreview > div.ms-rte-stylePreviewBox > div.ms-rte-stylePreviewBoxInner > div.ms-rte-stylePreviewHolder > span > span.ms-rteElement-btnWhite1 {
  background-color: green;

Open in new window

This is the most detailed selection I could come up with. It's very specific but not guaranteed to be unique. It's possible, however unlikely, that the exact hierarchy could appear elsewhere on your page.

Here's a jsfiddle proof of concept: https://jsfiddle.net/ptc1kz0s/

I had to add the <table> and <tr> tags to make it work as a <td> tag without an enclosing <table> and <tr> is not strictly valid HTML and the CSS won't match on that.

Author Closing Comment

ID: 41896342
As always Russ.  Thank you for your help.  Exactly what I needed to understand.

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question