CODEWITHSUNDEEP
htmlcss
Richik SC
Richik SC

Reputation: 884

Style >/< signs html with css

I want to style greater-than and less-than signs with css.

My html is like this:

<some text more text some text>

And I want to style the < and > signs. I know I could wrap it in a <span>, but could I do something like this in my stylesheet?

&gt; {
font-weight:bold;
font-family:sans-serif;
}

Upvotes: 0

Views: 12139

Answers (4)

m59
m59

Reputation: 43785

Live demo (click).

<p class="my-class">some text more text some text<p>

CSS:

.my-class:before {
  content: '<';
  color: red;
}

.my-class:after {
  content: '>';
  color: blue;
}

The only other way would be to wrap with an element (preferably span) like you said. For completeness, I'll include that solution:

<p>
  <span class="my-class">&lt;</span>
  some text more text some text
  <span class="my-class">&gt;</span>
<p>

CSS:

.my-class {
  color: red;
}

If you are willing to use JavaScript, here's an example: Demo (click).

Sample Markup:

<p class="my-class">&lt;some text more text some text&gt;<p>

JavaScript:

var elems = document.getElementsByClassName('my-class');

for (var i=0; i<elems.length; ++i) {
  var elem = elems[i];
  var childs = elem.childNodes;
  var len = childs.length;
  for (var j=0; j<len; ++j) {
    var node = childs[j];
    if (node.nodeName === '#text') {
      var text = node.textContent;
      var first = text.charAt(0);
      var last = text.charAt(text.length-1);
      if (first === '<' && last === '>') {
        text = text.split('');
        text.splice(0, 1);
        text.splice(text.length-1);
        text = text.join('');

        var left = document.createElement('span');
        left.className = 'my-span-class left';
        left.textContent = '<';

        var right = document.createElement('span');
        right.className = 'my-span-class right';
        right.textContent = '>';

        node.textContent = text;
        node.parentNode.insertBefore(left, node);
        node.parentNode.appendChild(right, node);
      }
    }
  }
}

Upvotes: 4

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

Since a solution with pseudoelements was already suggested here's my approach:

if you need to use only a different font-family and font-weight (as specified in your question as example) on modern browser (supporting unicode-range property) you could use a different font-face for these two symbols

Example (working on Chrome, Opera and Safari, not working on Firefox, not tested on IE)
http://codepen.io/anon/pen/KDgep

@font-face {
  font-family: lessgreaterthan;
  font-weight: bold;
  src: local('Arial');
  unicode-range: U+003C,U+003E;
}

p {
  font-family: lessgreaterthan, "times new roman";
}

Upvotes: 0

Mabedan
Mabedan

Reputation: 907

Another solution would be to wrap your & gt & lt; signs within a span via javascript after onload (which would not work for content added afterwards dynamically). But the short answer is no, there's no content based selection on css

Upvotes: 0

Quentin
Quentin

Reputation: 943935

The only means to apply CSS to a given character is with the :first-letter pseudo-class, obviously this doesn't suit your needs.

CSS has no means to select a character based on what that character is. You will have to add additional elements if you want to style it.

Upvotes: 1

Related Questions