Select :first-of-type by class only

Question

I am trying to solve a bug in CKEditor where it doesn't apply the margin properly. Using Bootstrap, the first span's margin is effectively ignored as it falls outside the row. However in CKEditor, for some reason it sits inside the row, thus pushing the last span onto a new line as there isn't enough room inside the row.

A simple way to solve this is to just set the margin-left for the first span to 0, and so I ended up adding this to my content.css file:

[class*="span"]:first-of-type {
    margin-left: 0px;
}

And this works nicely, as long as all the spans are the same, all divs or all articles. But if I have an article and an aside, then the css appears to pick them up as two different first type's, and applies the :first-of-type rule to both of them. For example:

<div class="container">
    <div class="row">
        <article class="span6">
            ...some html text
        </article>
        <aside class="offset3 span3">
            ...some more html text
        </aside>
    </div>
</div>

Both the article and the aside will have had their margin-left set to 0, when I only want the article's margin-left set to 0. This is just an example, there could be any combination possible of divs, articles and asides you could think of, as well as any number that bootstrap allows.

After a short Google I found this question, which seemed similar to my problem. The answer explained that the :first-of-type actually works off the element, not the class, which explains the behavior I saw. Unfortunately the work around specified in that answer can't work for me as I'm trying to remove some css from the first div, and leave the rest intact.

Is there any workaround I could use that would allow me to target the first element with [class*="span"]? Failing that is there any other known solution to this bug with CKEditor and Bootstrap?

I think I've answered something like this before, not in the linked question, but yet another one here. If I recall correctly, there isn't any other workaround but to find out the exact style and hardcode it back in using the technique I described in the linked question. — BoltClock, Jun 24 '13 at 14:06
If the class names are different, resulting in different margin styles being applied per class, then I don't think there is a good solution to this. — BoltClock, Jun 24 '13 at 14:09
I've added in an HTML example above. jsfiddle doesn't have bootstrap or CKEditor on it, nor are there public repositories for them as far as I'm aware so I can't jsfiddle this. As for the classes being different, the only bit different is the number at the end, all of the classes contain the word "span", so you can use that, whether it be css or js, they can both use partial class names. — Styphon, Jun 24 '13 at 14:12

score 2 · Accepted Answer · answered Jun 24 '13 at 14:21

2

why not just use the nth child selector:

[class*="span"]:nth-child(1) {}

Example

answered Jun 24 '13 at 14:21

Pete

57,112
28
117
166

2

Because it may not always be the nth child. – BoltClock Jun 24 '13 at 14:24
@BoltClock it's always going to be the first of the spans - the clue is in first-of-type – Pete Jun 24 '13 at 14:24
Just because it's the first of the spans doesn't mean it's the first child. As for `:first-of-type`, read my answer to the linked question. – BoltClock Jun 24 '13 at 14:30
@BoltClock how about the line in the question: "Is there any workaround I could use that would allow my to target the first element with [class*="span"]? " – Pete Jun 24 '13 at 14:34
For that, see my comments on the question itself. In short I don't think there is a surefire way to do it. – BoltClock Jun 24 '13 at 14:34
@Styphon are you sure, it worked in my fiddle above. what browser are you using? – Pete Jun 24 '13 at 14:39
@BoltClock All I think the user is trying to do is get the first element with a class starting with span - for that nth-child is sufficient – Pete Jun 24 '13 at 14:42
@Pete perhaps it was cached when I tried it before, I swear it was clear but it obviously wasn't. CKEditor is notorious for caching. Thank you. – Styphon Jun 24 '13 at 14:44
@Styphon no problems, glad I could help – Pete Jun 24 '13 at 14:45

score 0 · Answer 2 · answered Jun 24 '13 at 14:17

As you've already mentioned, first-of-type works off the element, not the selector. Because article and aside are both the first of their types in your example, they will have ths style applied.

Off the top of my head, I don't think there's a way to solve your dilemma exactly how you've chosen but, if I understand your problem correctly, I would usually solve it by defining a style for all [class*="span"] and then revert/redefine for the ones that follow:

[class*="span"] { margin-left: 0px;}
[class*="span"] ~ [class*="span"] { margin-left: 10px; } /* Whatever the original is set to */

I was trying to avoid this as the original isn't set to one fixed value, it's responsive so it's set to many values depending on the width of the window. If it is the only solution it means a lot of extra CSS. — Styphon, Jun 24 '13 at 14:19

score 0 · Answer 3 · answered Jun 24 '13 at 14:51

you may reset reset your [class*=span] and then check if any others follow. (no matter if it stands first or else where within structure).

If it is the case , there other [class*=span] on same level, you can set them back to similar original value.

Since [class*=span] has already been overwriten, you need to overwrite it again with stronger selector

[class*="span"] {
  color:green;
  margin-left:0;
  border:solid;
}
[class*="span"] ~ [class]
{
  margin-left: 20px;
  color:red;
}

http://codepen.io/gcyrillus/pen/nFixc

codepen takes bootstrap if you link it .

Select :first-of-type by class only

3 Answers3