CSS Syntax - How to interpret this?


Tags: css,syntax

Problem :

I have very little experience with CSS. The following syntax is from bootstrap 3.

.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
  background-color: #f2dede;
  border-color: #eed3d7;
}

I was hoping someone could translate this into English for me.



Solution :

To take the first line as an example

.table > thead > tr > td.danger

The .table is a class named table, the > means anything nested directly inside. thead is an html element, as is tr, while td.danger is a combination of a html element td with a class danger.

So this line means a td with the class danger, inside of a tr, inside of a thead, inside of an element with the class table.

The background-color and border-color at the end are the styles being applied to the specified elements with #f2dede and #eed3d7 as their values.

In summary, the overall syntax is as follows:

selector {
   style: value;
}

And as you can see in the example, you can have multiple selectors separated by commas and multiple styles and values separated by ; inside the curly braces.


    CSS Howto..

    How to put a footer in the bottom (but not fixed or stick!) with css [duplicate]

    How to position one element relative another using CSS/jQuery

    How to prevent transition to run on page load after height is set with javascript in Safari?

    How to center text next to a responsive image in Bootstrap3

    How does CSS 'overflow:hidden' work to force an element (containing floated elements) to wrap around floated elements?

    CSS: how do I force contents in a table cell to stay on one line when browser size reduced

    How to set style for n-th td in a table using css

    How to put a menu over the full width of the page using HTML and CSS?

    Do I need to use float:clear to have content show where I want it to show?

    How is better to do with CSS sprites [closed]

    How do I center (vertically and horizontally) buttons in a div tag?

    How do you make HTML elements appear on a vertical line using CSS?

    How to integrate Thread and

    How to get the CSS-Code and save in a String?

    How to set hover of the block which contains icon with HTML or CSS?

    How to remove href attributes from a tag and remove css associated to it in iframe using jquery

    How to make the height of the div take all the space?

    how to remove 2nd 0r 4th div padding with Pure CSS not jquery

    How do I apply css animations to angular2 components before they are destroyed/removed?

    How can I make sure redundant

    tags do not break styling?

    how to keep the css style after inserting a row to table by jquery

    How to auto fit input field after dynamically added spans?

    How to create a chrome extension using multiple css and js files?

    ASP.net - How to achieve CSS with constant values, arithmetic and string manipulation

    How to create a CSS Animation that is responding to horizontal mouse movement? [closed]

    how to change “product details” text to my own text in Virtuemart?

    Apple's Website - How Does It Autosize Itself For Mobile Devices?

    How to merge .CSS files with Sass (or other tool)? [duplicate]

    CSS - Absolute position , how to ignore left and top of parent

    How to vertically center text span in fixed position div?