pseudo-clase :first-child y elemento button :?
7 seguidores
tengo un button definico con class="toolBar" y quisiera que el primero de ellos el border-left rubiese una caracteristica especial...
Intento usar la pseudo-classe first-child :D pero no lo me funciona. :(
Por otro lado con el TopStile no me aparece button como elemento lo cual me mosquea monton :?
... gracias amigos :D
II GemInIs II
klein
¿Estás haciendo un editor xhtml?
toi en ello ... ;)
http://www.2d2art.com/ii/test/grupoButton3.gif
bueno el editor practimante está, pero solo es parte de un cms que me está dando guerra a tope... pq lo toi hasiendo toito en xhtml+css &tableLess ...(<em>bueno esa es la intención pero falta validarlo</em>) claro me está dando guerra guerra guerra ... para programar me pongo el traje de cuero y latex :D
Al final he solucionado lo de cerrar el border-left pero con el div contenedor no añadiendo una classe nueva.
Que potito está .. snifff snifff snifff que potito :) snifff!!
gracias !!!
II GemInIs II
ja ja aj :D :D ...
eso si que es una buena idea ... joder ... :D
Deberiamos fundar una asociación de profesionales del web o algo por el estilo .... y tomar estas iniciativas en bloque ya veriais como cambiaban las cosas ...
:D
cbp
si el IE admitiera selectores y demás al mismo nivel que el resto de navegadores el potencial del css se multiplicaría y sería aún mucho más cómodo y fácil hacer todo.
como en la siguiente versión no lo hayan mejorado paso de su culo de blanquitos y empiezo a poner un aviso en mis diseños diciendo que la página no se ve correctamente en Explorer porque sus programadores son unos incompetentes incapaces de soportar unas mínimas reglas.
ikgoru
Joder q rabia me da esto, nos vemos obligados a utilizar una parte de todo el potencial de css y darle vueltas para conseguir lo que queremos solo porque los putos navegadores hacen lo q les da la gana.
Bueno sin más, necesitaba deahogarme.
II GemInIs II
fale ... ya estoy m'as calmao :D
y he visto el link de denegro csscreator ...
Pués al final ... como dice cbp :D parece lo más lógico. O mejor dicho única alternativa ¿no?
II GemInIs II
cbp
...a lo mejor no es muy correcto semánticamente, pero al menos permite usar listas como menús en el IE hasta que admitan las pseudo-clases de :first-child y :last-child.
tu también .... :D
oooggghhhh!!! aaggghhhht !!!! (esto ... me está dando un atake) ...
un momento que me voy a buscar una esquina pa darme de cabezazos .... ahhhggggg !!!!
ahora vuelvo aaahggg!!!
pom!! pomm!!! pommmmmm!!! pommm!!!! aaggg!!!! pommm!! pommm!!
cbp
las pseudo-clases de first y last child, al igual que cierto tipo de selectores, no funcionan en IE. en el enlace que he puesto arriba viene especificado qué funciona y dónde.
II GemInIs II
No consigo que funcione :( . Seguro que tengo algún error de sintaxis o concepto con el first-child. :(
He simplificado el código para que podais lanzarlo y modificarlo directamente, haber si me veis el error :) aquí vaaaaaa :
<code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>abrakadabra</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.toolBar{
float: right;
}
.toolBarButton {
width: 24px;
height: 24px;
margin: 0px;
padding: 0px;
border-top: 2px solid #333333;
border-right: 2px solid #333333;
border-left: none;
border-bottom: none;
}
toolBarButton button:first-child {
border-left: 2px solid #333333;
}
</style>
</head>
<body>
<div id="toolBarTitular" class="toolBar">
<button class="toolBarButton">
</button>
<button class="toolBarButton">
</button>
<button class="toolBarButton">
</button>
<button class="toolBarButton">
</button>
</div>
</body>
</html>
</code>
O Acaso es un problema de explorer ????? com diche denegro
cbp
aquí hay buena información sobre selectores, pesudo-clases y demás principios básicos de css :)
yo lo que hago es poner borde derecho a todas las opciones de los menús y me creo una clase que se llame "ultimo" a la que le pongo el border a 0. a lo mejor no es muy correcto semánticamente, pero al menos permite usar listas como menús en el IE hasta que admitan las pseudo-clases de :first-child y :last-child.
albertoromero
Vaale, lo veo perfecto con Firefox.
Es el maldito explorer que no lo coje.
Nchst!
Klein
¿Estás haciendo un editor xhtml?
albertoromero
Gracias por poner el ejemplo ikgoru, así es como yo lo había pensado.
Sin embargo, lo he probado y ¡no me pinta el borde izquierdo! Estoy un poco mosca... he probado con el doctype de xhtml y de html4 y nada...
Si a tí te rula, ¿podrías poner el ejemplo con la cabecera y todo o colgarlo por ahí?
II GemInIs II
Meddle, al hilo de lo que me comentas, ahora mismo no estoy implementando DOM :( ... la verdad tendré que ponerme ;) ... pero por ahora todos los esfuerzos los dedico a crear xhtm con css lo más correcto posible (<em>de hay que le de tantas vueltas a las cosas</em>), es algo que me hace ir muy lento ... pero creo sinceramente que dará sus frutos en breve.
Por otro lado los botones son tratados con javaScript, instanciados con (x)html y su aspecto por CSS. Esto por ahora es para mi insalvable para poder tener esta funcionalidad y aspecto, además añadiré indentación, sangrado, listas y quizas tablas:
http://www.2d2art.com/ii/test/brupobutton2.gif
Se integrará en un CMS y va enfocado cara al Administrador del web del cliente, así que tendrá que usar un navegador que soporte javaScript y además, creo que será obligatoria Explorer 5.5 en adelante (aún por comprobar)... ya veremos ... :D por lo que DOM de momento lo dejo "quieto parao". Otra cosa es que los visitantes a la web puedan ver el site con cualquier otro navegador, claro. Pero a nivel de administración, bastantes problemas de implementación tenemos. :D
No creo que pueda ir al off, es una lastima pq me apetece ralemente ... quizás a última hora coja el coche y me plante en valencia, ya veremos :D
Muchas gracias por el link, lugo probaré de aplicar el first-child a los <button> haber que tal ... y no chuta te pongo el codigo, pq si decis que funciona seguro que cometo algún Erro de sintaxis :D
ta luego :D
ikgoru
El ejemplo que me pedias denegro:
<code>
HTML:
<ul>
<li>Vino</li>
<li>Coca Cola</li>
<li>Lim&oacute;n exprimido</li>
</ul>
CSS:
ul li {
display: inline;
padding: 10px;
border-right: 1px solid #f00;
}
ul li:first-child {
border-left: 1px solid #f00;
}
</code>
Primero defino que todos los li dentro de ul tengan un borde a la derecha y luego le digo q el primer li dentro de ul tenga un borde también a la izquierda.
De paso os dejo la receta para un refrescante Kalimotxo para este veranito q viene con calor.
meddle
en cualquier caso eso no responde a tu pregunta, tanto si lo metes en el html como en el js deberas darle estilo con CSS. Si veo q no te aclaras ya intentare echarte un cable.
meddle
GemInIs, en realidad no estoy seguro que esos botones los debas meter en el HTML. En mi opinion deberian añadirse con DOM una vez comprobado que el navegador acepta javascript actual. Puedes ver un ejemplo al final de esta pagina temporal:
http://meddle.dzygn.com/v3/
ojo ni es perfecto ni esta depurado ni nada, solo es una aproximacion de las tantas que suelo dejar a medias.
Pero si vas al OFFF podras ir a una gran conferencia (de hecho son dos) justamente sobre como crear un sistema de este tipo para enriquecer formularios añadiendo formato. Segun la parrilla palaueb charlan el jueves a las 10.45 y el sabado a las 12.45
albertoromero
¡anda! joer creo que nunca lo había visto, mira, una cosa nueva que aprendo hoy, gracias.
Bueno, en ese caso, a lo mejor tiene que ver con qué versión de Topstyle tengas o cómo esté configurado, no?
Lo acabo de mirar y sí que me sale en Tools > New css selector > Simple.
Por cierto, he estado probando lo del first-child con una lista (para bordes..) tal y como decía ikgoru, y no me sale... ¿Podríais poner un ejemplo de esto, por favor?
II GemInIs II
no input type button
sino el tag <button> </button> son cosas diferentes.
albertoromero
II GemInIs II
Por otro lado con el TopStile no me aparece button como elemento lo cual me mosquea monton :?
Creo que el elemento que buscas es input
II GemInIs II
Ikgoru ... ese es el caso :D
II GemInIs II
Vale ... ya se que me complico la vida y que quizás lo de ponerle un class diferente al primer boton podria servir ... pero por razones de mi aplicación creo que en este caso es mejor con el first-child ... ;)
ejemplo visual:
http://www.2d2art.com/ii/test/grupoButton.gif
Análisis: Todos los botones deben poseer border-top y border-rigth. El primer boton debe tener tambien border-left.
* En el html los botones con <Button> contenidos dentro de un <div>
esta claro :? --- :D
ikgoru
Yo el first-child lo veo muy útil para casos como cuando haces un menú horizontal donde a cada opción de menú le das un borde a la derecha y al primero utilizando first-child le das también un borde a la izquierda para así "cerrar" el menú.
¿habría algun problema de semánica en ese caso?
¿para que lo soleis utilizar vosotros?
meddle
podria servirte, pon un ejemplo y lo vemos
II GemInIs II
Y pq no me sirve para el primer Button que se encuentre dentro de un div determinado. ? :?
meddle
para cualquier elemento que sea el primer descendiente de otro elemento. por ejemplo, si tu button fuera lo primero de un form (aplicado a form), aunque seria semanticamente incorrecto, claro. o el primer parrafo de un bloque (aplicado a bloque). o el primer item de un menu (aplicado al menu), etc.
II GemInIs II
Entonces ... solo para aplicar a parrafos y eso ... no sirve para cualquier cosa que sea first-child :?
:D
II GemInIs II
jo :(
meddle
ya, pero no es para ese caso :)
II GemInIs II
Ke salao !!! ;) :D
M'hacia ilu usar el first-child:D
zigotica
al primer button ponle:
class="toolBar primero"
y luego en el CSS metes el border al .primero ;)
por cierto, button es correcto