All geek questions in one place

: first child selector not working

I select certain divs with pseudo-selectors first-child and last-child, but: first-child does not work in any browser in which I checked it. I checked caniuse.com and css tricks. com, and the consensus is that: the first child is pretty widely supported, so I think maybe there is a bug that I don't know about. I am running the application on a local node server. I have confirmed both my css and my html. Does anyone know of any errors that may interfere: the first child from work?

HTML

<div class="col-md-6 blurbs"> <label>NEWS</label> <div> <p>Lorem ipsum dolor spernatur aut odit aut fugit conse oluptate</p> </div> <div class="clearfix"> <a class="pull-left">RSS</a> <a class="pull-right">MORE NEWS</a> </div> </div>

CSS

(does not work)

 .news .blurbs div:first-child{ outline: 1px solid red; height: 260px; overflow: auto; margin-bottom: 10px; }

(working)

 .news .blurbs div:last-child{ outline: 1px solid red; width: 95%; }
+6
source share
1 answer

The :first-child and :last-child pseudo :last-child select an element that is the first / last child of the parent, filtered by any other chain selector, so the div:first-child does not actually match anything, since the first child within .blurbs not div

What you need to use to get the effect you are using is the :first-of-type pseudo-class as follows:

 .news .blurbs div:first-of-type{ outline: 1px solid red; height: 260px; overflow: auto; margin-bottom: 10px; }

here is a working example

+13
source

Source: https://habr.com/ru/post/957955/

More articles:


All Articles