tagged [css]

How can I define colors as variables in CSS?

How can I define colors as variables in CSS? I’m working on a CSS file that is quite long. I know that the client could ask for changes to the color scheme, and was wondering: is it possible to assign...

23 Jul at 02:22

Play multiple CSS animations at the same time

Play multiple CSS animations at the same time How can I have two CSS animations playing ? - - - Example Code: ``` .image { position: absolute; top: 50%; left: 50%; width: 120px; height: 120p...

18 Nov at 04:0

How to transition CSS display + opacity properties

How to transition CSS display + opacity properties I have got a problem with a CSS3 animation. This code only works if I remove the cha

8 Mar at 17:47

Half circle with CSS (border, outline only)

Half circle with CSS (border, outline only) I'm trying to create a circle with CSS, which looks exactly like on the following picture: ![enter image description here](https://i.stack.imgur.com/Rt3yC.p...

11 Oct at 07:51

How to create a collapsing tree table in html/css/js?

How to create a collapsing tree table in html/css/js? I have some data to display that is both tabular and hierarchical. I'd like to let the user be able to expand and collapse the nodes. Sort of like...

13 May at 12:49

Equal height rows in CSS Grid Layout

Equal height rows in CSS Grid Layout I gather that this is impossible to achieve using Flexbox, as each row can only be the minimal height required to fit its elements, but can this be achieved using ...

12 Jun at 18:32

How to make rectangular image appear circular with CSS

How to make rectangular image appear circular with CSS I've used `border-radius: 50%` or `border-radius: 999em`, but the problem is the same: with squared images there's no problem, but with rectangul...

3 Dec at 11:46

How to Make A Chevron Arrow Using CSS?

How to Make A Chevron Arrow Using CSS? Ok, so everyone knows you can make a triangle using this: And that produces a solid, filled in triangle. But how would you make a hollow-type arrow-like triangle...

30 Dec at 17:6

not:first-child selector

not:first-child selector I have a `div` tag containing several `ul` tags. I'm able to set CSS properties for the first `ul` tag only: However, my following attempts to set CSS properties for each othe...

28 Dec at 22:6

Angular 2: How to style host element of the component?

Angular 2: How to style host element of the component? I have component in Angular 2 called my-comp: How does one style the host element of this component in Angular 2? In Polymer, You would use ":hos...

In jQuery how can I set "top,left" properties of an element with position values relative to the parent and not the document?

In jQuery how can I set "top,left" properties of an element with position values relative to the parent and not the document? `.offset([coordinates])` method set the coordinates of an element but only...

CSS Selector that applies to elements with two classes

CSS Selector that applies to elements with two classes Is there a way to select an element with CSS based on the value of the class attribute being set to two specific classes. For example, let's say ...

11 Jun at 05:36

CSS selector for first element with class

CSS selector for first element with class I have a bunch of elements with a class name `red`, but I can't seem to select the first element with the `class="red"` using the following CSS rule: ``` bl...

13 Mar at 14:2

Controlling Spacing Between Table Cells

Controlling Spacing Between Table Cells I'm trying to create a table where each cell has a background color with white space between them. But I seem to be having trouble doing this. I tried setting `...

10 Dec at 19:24

using nth-child in tables tr td

using nth-child in tables tr td ```   $     $     $     $     $  

24 Sep at 16:44

Stopping a CSS3 Animation on last frame

Stopping a CSS3 Animation on last frame I have a 4 part CSS3 animation playing on click - but the last part of the animation is meant to take it off the screen. However, it always goes back to its ori...

2 Jul at 12:46

Disable/turn off inherited CSS3 transitions

Disable/turn off inherited CSS3 transitions So I have the following CSS transitions attached to an element: ``` a { -webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ; -moz-trans...

5 Jan at 11:40

Can CSS3 transition font size?

Can CSS3 transition font size? How can one make the font size grow bigger on mouse over? Color transitions work fine over time, but the font size switches immediately for some reason. Sample code: ``...

3 Jan at 21:24

CSS Calc Viewport Units Workaround?

CSS Calc Viewport Units Workaround? From what I've seen in [other](https://stackoverflow.com/a/14184433/1191087) [answers](https://stackoverflow.com/a/14419680/1191087), CSS viewport units can't be us...

23 May at 11:54

CSS :not(:last-child):after selector

CSS :not(:last-child):after selector I have a list of elements, which are styled like this: Outputs `One | Two | Three | Four | Five |` instea

20 Jan at 22:7

How do I create a circle or square with just CSS - with a hollow center?

How do I create a circle or square with just CSS - with a hollow center? It should just basically be an outline of the square or circle - that I can style accordingly (i.e. change the color to whateve...

5 Dec at 21:27

Can I animate absolute positioned element with CSS transition?

Can I animate absolute positioned element with CSS transition? I want to animate an element's position change with CSS transition, but it is not working even when I use the transition on `all` propert...

26 Jul at 16:33

CSS Selector "(A or B) and C"?

CSS Selector "(A or B) and C"? This should be simple, but I'm having trouble finding the search terms for it. Let's say I have this: In CSS, how can I create a selector that matches something that mat...

22 Sep at 15:35

CSS: Force float to do a whole new line

CSS: Force float to do a whole new line I have a bunch of `float: left` elements and some are SLIGHTLY bigger than others. I want the newline to break and have the images float all the way to the left...

4 Dec at 14:17

Control the dashed border stroke length and distance between strokes

Control the dashed border stroke length and distance between strokes Is it possible to control the length and distance between dashed border strokes in CSS? This example below displays differently bet...

9 Jul at 11:21