Laravel

Valeri Tandilashvili's CSS Notes

Results: 126

CSS declaration

a { background-color: yellow; }

- selector

- declaration start

background-color

- property

- property/value separator

yellow

- value

- declaration separator

- declaration end

1. include .css file with media attribute:

<link rel="stylesheet" href="responsive.css" media="screen and (max-width: 900px)">

2. @media query without

<link>

@media screen and (max-width: 900px) {
    /* conditional CSS */
}

.container {
    background: url(../images/tile.png) left bottom repeat-x,  #FFF url(../images/tile.png) left top repeat-x;
}

We can use

first-child

to select only the first child element:

.my-list li:first-child {
    background-color: red;
}

last-child

is used to select the last member from the list:

my-list li:last-child {
    background-color: blue;
}

nth-child(5)

is used to select

nth

element. In the example we select 5th element

.my-list li:nth-child(5) {
    background-color: yellow;
}

We can also use

nth-child(even)

to select even members from the list

.my-list li:nth-child(even) {
    background-color: grey;
}

We can print some text before every paragraph as well as after every paragraph

p:before { 
    color: red; 
    content: "read this carefully"; 
}
p:after { 
    color: red; 
    content: "you have read it! good job"; 
}

margin & padding properties work only horizontally on inline elements (like

span

). Solution -

display: inline-block;

display: block;

more specific selector CODE

.flex-container > div {
  flex:2;
}

The selector above has class name and tag name, therefore it's more specific than this selector:

.search {
  flex:4;
}

That's why the second selector has no effect in this example. With more specific selector, like this:

.flex-container .search {
  flex:4;
}

the .search item will be twice as wide as the other flex items.

position:absolute CODE

The element is positioned relative to its first positioned (not static) ancestor element

.parent {
    position: relative;
}
.parent h1 {
    position: absolute;
    top: 10px;
}

https://youtu.be/aFtByxWjfLY?t=200

Selects all

h2

elements that has parent with both

cl1

and

cl2

classes

.cl1.cl2 h2{
    color: red;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

Results: 126