Short Introduction to CSS for ABAP Developper

Short Introduction to CSS for ABAP Devlopper – for UI Design

Short Introduction to CSS for ABAP Devlopper – for UI Design. First I will list the main CSS selectors. Then I will explain something I struggled with it sometimes before finding out how to implement CSS.

Contents

What’s CSS ?

First let’s start with a short definition for CSS.

CSS stands for Selects every element that is the second child of its parent Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once. (source)

CSS Selectors

CSS Selectors allow to target element to which you want to apply the style.

CSS Selector: .class

Sample use of .class

Description of .class

Selects all elements with class=”intro”

CSS Selector: #id

Sample use of #id

Description of #id

Selects the element with id=”firstname”

CSS Selector: *

Sample use of *

Description of *

Selects all elements

CSS Selector: element

Sample use of element

Description of element

Selects all

elements

CSS Selector: element,element

Sample use of element,element

Description of element,element

Selects all

elements and allelements

Check also   Usefull UI5 Chrome Extensions: UI5 Inspector & UI5 Development Tools

CSS Selector: element element

Sample use of element element

Description of element element

Selects all

elements inside

elements

CSS Selector: element>element

Sample use of element>element

Description of element>element

Selects all

elements where the parent is a

element

CSS Selector: element+element

Sample use of element+element

Description of element+element

Selects all

elements that are placed immediately after

elements

CSS Selector: element1~element2

Sample use of element1~element2

Description of element1~element2

Selects every element that are preceded by a element

CSS Selector: [attribute]

Sample use of [attribute]

Description of [attribute]

Selects all elements with a target attribute

CSS Selector: [attribute=value]

Sample use of [attribute=value]

Description of [attribute=value]

Selects all elements with target=”_blank”

CSS Selector: [attribute~=value]

Sample use of [attribute~=value]

Description of [attribute~=value]

Selects all elements with a title attribute containing the word “flower”

CSS Selector: [attribute|=value]

Sample use of [attribute|=value]

Description of [attribute|=value]

Selects all elements with a lang attribute value starting with “en”

CSS Selector: [attribute^=value]

Sample use of [attribute^=value]

Description of [attribute^=value]

Selects every element whose href attribute value begins with “https”

CSS Selector: [attribute$=value]

Sample use of [attribute$=value]

Description of [attribute$=value]

Selects every element whose href attribute value ends with “.pdf”

CSS Selector: [attribute*=value]

Sample use of [attribute*=value]

Description of [attribute*=value]

Selects every element whose href attribute value contains the substring “w3schools”

CSS Selector: :active

Sample use of :active

Description of :active

Selects the active link

CSS Selector: ::after

Sample use of ::after

Description of ::after

Insert something after the content of each element

CSS Selector: ::before

Sample use of ::before

Description of ::before

Insert something before the content of each element

CSS Selector: :checked

Sample use of :checked

Description of :checked

Selects every checked element

CSS Selector: :disabled

Sample use of :disabled

Description of :disabled

Selects every disabled element

CSS Selector: :empty

Sample use of :empty

Description of :empty

Selects every

element that has no children (including text nodes)

CSS Selector: :enabled

Sample use of :enabled

Description of :enabled

Selects every enabled element

CSS Selector: :first-child

Sample use of :first-child

Description of :first-child

Selects every element that is the first child of its parent

CSS Selector: ::first-letter

Sample use of ::first-letter

Description of ::first-letter

Selects the first letter of every element

Check also   How to install SAPUI5 Development Tools in Eclipse - Step by Step Tutorials

CSS Selector: ::first-line

Sample use of ::first-line

Description of ::first-line

Selects the first line of every element

CSS Selector: :first-of-type

Sample use of :first-of-type

Description of :first-of-type

Selects every element that is the first element of its parent

CSS Selector: :focus

Sample use of :focus

Description of :focus

Selects the input element which has focus

CSS Selector: :hover

Sample use of :hover

Description of :hover

Selects links on mouse over

CSS Selector: :in-range

Sample use of :in-range

Description of :in-range

Selects input elements with a value within a specified range

CSS Selector: :invalid

Sample use of :invalid

Description of :invalid

Selects all input elements with an invalid value

CSS Selector: :lang(language)

Sample use of :lang(language)

Description of :lang(language)

Selects every element with a lang attribute equal to “it” (Italian)

CSS Selector: :last-child

Sample use of :last-child

Description of :last-child

Selects every element that is the last child of its parent

CSS Selector: :last-of-type

Sample use of :last-of-type

Description of :last-of-type

Selects every element that is the last element of its parent

CSS Selector: :link

Sample use of :link

Description of :link

Selects all unvisited links

CSS Selector: :not(selector)

Sample use of :not(selector)

Description of :not(selector)

Selects every element that is not a element

CSS Selector: :nth-child(n)

Sample use of :nth-child(n)

Description of :nth-child(n)

Selects every element that is the second child of its parent

CSS Selector: :nth-last-child(n)

Sample use of :nth-last-child(n)

Description of :nth-last-child(n)

Selects every

element that is the second child of its parent, counting from the last child

CSS Selector: :nth-last-of-type(n)

Sample use of :nth-last-of-type(n)

Description of :nth-last-of-type(n)

Selects every element that is the second element of its parent, counting from the last child

CSS Selector: :nth-of-type(n)

Sample use of :nth-of-type(n)

Description of :nth-of-type(n)

Selects every element that is the second element of its parent

CSS Selector: :only-of-type

Sample use of :only-of-type

Description of :only-of-type

Selects every element that is the only element of its parent

CSS Selector: :only-child

Sample use of :only-child

Description of :only-child

Selects every element that is the only child of its parent

CSS Selector: :optional

Sample use of :optional

Description of :optional

Selects input elements with no “required” attribute

Check also   A Short Introduction and Overview to SAP UI Theme Designer

CSS Selector: :out-of-range

Sample use of :out-of-range

Description of :out-of-range

Selects input elements with a value outside a specified range

CSS Selector: :read-only

Sample use of :read-only

Description of :read-only

Selects input elements with the “readonly” attribute specified

CSS Selector: :read-write

Sample use of :read-write

Description of :read-write

Selects input elements with the “readonly” attribute NOT specified

CSS Selector: :required

Sample use of :required

Description of :required

Selects input elements with the “required” attribute specified

CSS Selector: :root

Sample use of :root

Description of :root

Selects the document’s root element

CSS Selector: ::selection

Sample use of ::selection

Description of ::selection

Selects the portion of an element that is selected by a user

CSS Selector: :target

Sample use of :target

Description of :target

Selects the current active #news element (clicked on a URL containing that anchor name)

CSS Selector: :valid

Sample use of :valid

Description of :valid

Selects all input elements with a valid value

CSS Selector: :visited

Sample use of :visited

Description of :visited

Selects all visited links

Find the full list CSS Selector Reference

You may check also Best Ressources to Learn Javascript for ABAP Developers

CSS Specifity

If you have two (or more) conflicting CSS rules that point to the same element, there are some basic rules that a browser follows to determine which one is most specific and therefore wins out. (source)

Further Reading:

If you want to learn more about CSS development check this CSS for Beginners with Hands-on Project

Leave a Reply

Your email address will not be published. Required fields are marked *