2 de CSS

Comment

Cliente (HTML, Javascript, CSS) Programación

Ayer me crucé con dos dudas respecto a CSS, que ya había consultado en otras oportunidades. Por eso voy a dejar registro en este blog.

Width 100% – padding

Estaba trabajando con un fieldset dentro de un div, éste último con una medida fija en px, mientras que el fieldset establecía un ancho de 100% y además tenía padding lateral. Esto provocaba que el fieldset sea más grande que el div que lo contiene, excedido en la suma de los padding.

Para este problema hay una solución sencilla, disponible a partir de CSS3, es la propiedad “box-sizing”. Para ver la compatibilidad de navegadores pueden acceder a la página del W3C.

Se utiliza para indicarle al navegador que incluir para tener en cuenta el alto y ancho del objeto, por ejemplo, contar los bordes (border-box) o no (content-box).

Entonces en definitiva, el código se puede ejemplificar de esta manera:

<div style="width: 500px">
<fieldset style="width: 100%; padding: 0 10px; box-sizing: border-box">
...
</fieldset>
</div>

Selector X que incluya Y

Cuando estamos estructurando un sitio o diseñando con CSS, es posible que deseemos aplicar determinado estilo, a un elemento padre, dependiendo cual sea su hijo. Aclaremos con un ejemplo:

<div>
    <label>...</label>
</div>
<div>
    <input />
</div>

En este caso si yo quisiera aplicarle un estilo a todos los div que contengan input pero no a los que contengan label, no existe un selector o una manera directa de hacerlo desde CSS (sí se puede desde JQuery).

Por lo que la solución desde CSS que podemos aplicar aquí, es asignarle una clase a los div que queremos que tengan determinado estilo, para diferenciarlos del resto.

<div class="hasLabel">
    <label>...</label>
</div>
<div>
    <input />
</div>

Deja un comentario