/    Sign up×
Community /Pin to ProfileBookmark

:first-child does not work

Hallo,
why does this CSS work stand alone in a fiddle:
[url]https://jsfiddle.net/kpoypc33/[/url]
but not in the context of my complete page:
[url]http://ulrichbangert.de/heimat/mediaelement/2014-03-29_Harz_Stabkirche_Glockenspiel_Playlist.php[/url]
(border top missing).

to post a comment
CSS

8 Comments(s)

Copy linkTweet thisAlerts:
@tracknutFeb 01.2016 — In the complete page, the playlistitem is not the first child, it's the second child of its parent. In the jsfiddle you don't have the same code. You may want to look at nth-child(2) instead
Copy linkTweet thisAlerts:
@excelcare01Feb 01.2016 — Nice Information.
Copy linkTweet thisAlerts:
@SempervivumauthorFeb 01.2016 — Hallo Tracknut,

this works fine. My fault was, that I assumed that "first-child" refers to the set of elements specified by ".playlistitem" but obviously it does not.

Many thanks for this info, it helped me a lot!
Copy linkTweet thisAlerts:
@SempervivumauthorFeb 01.2016 — I see, it works perfectly now. My fault was that I assumed, that "first-child" refers to the set of matched elements for ".playlistitem".

Thanks so much for this hint!
Copy linkTweet thisAlerts:
@TrainFeb 01.2016 — Nice, Lichterfelde , Berlin, Germany has Glockenspiel too. Listened to them many a night.
Copy linkTweet thisAlerts:
@SempervivumauthorFeb 01.2016 — Hallo Train,

interesting info. Have you lived in Berlin? Near my home there are some more chimes, at the market place in Goslar, in Wernigerode near the Harz and in a hospital in Hannover.
Copy linkTweet thisAlerts:
@TrainFeb 01.2016 — 1966 -1969 I was stationed in Berlin. Did quite a bit of travel and remember hearing the chimes in lots of places, be darn if I can remember the town/city names now though. 50 years is awhile ago.
Copy linkTweet thisAlerts:
@remedyFeb 02.2016 — The :first-child selector allows you to target the first element immediately inside another element. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.

Instead of giving it a class (e.g. .first), we can use :first-child to select it:

p:first-child {

font-size: 1.5em;

}

Using :first-child is very similar to :first-of-type but with one critical difference: it is less specific. :first-child will only try to match the immediate first child of a parent element, while first-of-type will match the first occurrence of a specified element, even if it doesn't come absolutely first in the HTML. In the example above the outcome would be the same, only because the first child of the article also happens to be the first p element. This reveals the power of :first-child: it can identify an element with relation to all its siblings, not just siblings of the same type.

**Links removed by Site Staff so it doesn't look like you're spamming us. Please don't post them again.**
×

Success!

Help @Sempervivum spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...