Question jQuery / CSS - Comment styliser la première occurrence d'un élément à l'intérieur d'un autre élément?


Voici mon problème.

HTML

<div id="content">
    <h1>Headline</h1>
    <p>First paragraph that needs to be yellow.</p>
    <p>Second paragraph that need not change. :) </p>
    <p>Third paragraph that need not change. :) </p>
</div>

Si j'utilise #content p:first-child {color:yellow; } ça ne marche pas car p n'est pas le premier enfant de content... h1 est le premier né.

Comment puis-je faire cela sans toucher au code HTML?

Je vous remercie!

Bonne chance, Cris


11
2018-04-19 20:19


origine


Réponses:


C'est la meilleur façon:

$('#content p:first').css('color', 'yellow');

14
2018-04-19 20:22



une solution css3

#content > p:first-of-type { color: yellow; }

20
2018-04-19 20:39



vous pouvez aussi utiliser (CSS, jQuery) nth-of-type:

#content p:nth-of-type(1) {color:yellow; }

$('#content p:nth-of-type(1)').css('color', 'yellow');

4
2018-04-19 20:27



Utilisez le .first() fonction (ou :first sélecteur) à la place:

$('#content > p').first().css('color', 'yellow');

3
2018-04-19 20:21



<script>
$(function(){
    $('#content p:first').css('color','yellow');
});
</script>

2
2018-04-19 20:23



Depuis que vous l'avez taggé en utilisant jQuery, solution basée sur jQuery:

$ ("# content p: first-child"). css ({color: "yellow;"});

MODIFIER:

$("#content p:nth-child(2)").css({color:"yellow" });

2
2018-04-19 20:22



$('#content p').first().css({ color: 'yellow' });

1
2018-04-19 20:24



Essaye ça:

$("div p:first")
        .css("text-decoration", "underline")
        .hover(function () {
              $(this).addClass("sogreen");
            }, function () {
              $(this).removeClass("sogreen");
            });

1
2018-04-19 20:25