1

The task is very short and simple:

There are 4 div elements with class "mdf_filter_section" and I need to get the first one with CSS only (NO JS and NO jQuery).

Neither ":first-child, :nth-child(1), :first-of-type, :nth-of-type(1)" works. Before you give me an answer please check and try it yourself on my demo in developer tool of your browser.

Demo Link: http://goo.gl/HEaFcL

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Mark
  • 13
  • 3
  • Issues like these usually stem from improperly closed elements in your DOM. CSS doesn't know where things start and stop. There's quite a lot of code to dig through, but this is where I'd look. – fontophilic Nov 20 '14 at 15:27
  • @fontophilic thank you for your answer, I appreciate it. But even when I removed underscores and spaces at the end of the class name - it didn't solve the issue. I agree that there's a lot of code, but we can use "console" tool to find css3 selectors quickly using jquery to debug our css code like this: jQuery('.mdf_filter_section'). So I don't understand why jQuery('.mdf_filter_section:first-of-type') or jQuery('.mdf_filter_section:nth-of-type(1)') doesn't work. – Mark Nov 20 '14 at 17:03

1 Answers1

2

You can't (shouldn't) use underscores for css class names.

Also, first-child actually gets the element only if it is the first child of its parent, which it is not in this case.

One way to get the div you want is:

.mdf_widget_form > div:nth-of-type(2){}

also:

.mdf_filter_section.business{}

(but don't use underscores)

EDIT: Another solution (detailed explanation in the link in my comment)

.mdf_filter_section {background: red;}
.mdf_filter_section ~ .mdf_filter_section {background: transparent;}

This would make all classes selected have a red background, then overwrite all following siblings to transparent background, this works pretty well if you don't have too many css properties to add to the first class. (transparent could also be inherit or similar)

daniel
  • 1,435
  • 9
  • 16
  • WOW, It's fantastic! I typed in console jQuery('.mdf_widget_form > div:nth-of-type(2)') and it worked like a charm! I can't believe! I've tested so many variants but nothing works. Thank you SO MUCH! Do you have any suggestions why jQuery('.mdf_filter_section:first-of-type') or jQuery('.mdf_filter_section:nth-of-type(1)') won't work? I think it's logical to use these examples, I was sure they should work, but I can't understand why my code is non-working. Also thank you for your advice with underscores. I won't use it in future. – Mark Nov 20 '14 at 16:30
  • P.s: don't pay any attention at jQuery in my previous comment; I just used it as an example to see a fast result of code in debugger. – Mark Nov 20 '14 at 16:47
  • I'm glad it works like you wanted! Have a look at this answer, it's nicely detailed: http://stackoverflow.com/questions/6447045/css3-selector-first-of-type-with-class-name – daniel Nov 20 '14 at 19:33
  • 2
    Why shouldn't people use underscores in their css class name? As far as I know there is nothing wrong with using underscores in class names – Huangism Nov 20 '14 at 19:48