Selecionar o primeiro elemento

[jgainfo]

Oi, tudo bem pessoal! Gostaria de saber como faço pra selecionar apenas o primeiro "button" desse código:

<div class="button-group">
<button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>', '<?php echo $product['minimum']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button>

<button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-heart"></i></button>

<button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i></button>
</div>

Pra depois inserir uma classe/id nela e aplicar um efeito.

Na verdade eu quero selecionar o primeiro elemento, no caso o "button" e faze-lo desaparecer pode ser com o ".hide" ou .css('display', 'none').

Se alguém souber, dá uma ajuda nesta parte, ficarei muito agradecido!

Muito obrigado!

[wootzor]

Se quiseres usar jQuery é bastante simples:

$(document).ready(function() {
  $("button:first").fadeOut("slow");  
});

 

[jgainfo]

Obrigado por responder, porém não esta pegando. Se eu deixar apenas "button" ele pega, entretanto todos os buttons!

Existe uma outra maneira de selecionar apenas o primeiro button?

Muito obrigado! 

Editado Dezembro 5, 2015 por jgainfo

[wootzor]

E assim, será que funciona?

$(document).ready(function() {
  $(".button-group").children(":first").fadeOut('slow');  
});

 

[jgainfo]

Obrigado pela resosta! Eu resolvi de outra forma sem Jquery mesmo, é que esse código é da plataforma de E-Commerce Opencart e ele estava selecionando, porém apenas o primeiro do loop, ai que não dava certo. Mas esse código funciona corretamente!

Obrigado!