Tabellenbreite
bearbeitet von Gunnar Bittersmann@@MrMurphy1
> Richtig. Da war ich zu schnell. Also
>
> ~~~css
> .konto tr>:nth-child(1),
> .konto tr>:nth-child(4) {
> width:20%;
> }
> .konto tr>:nth-child(2),
> .konto tr>:nth-child(3) {
> width:30%;
> }
> ~~~
Kann man machen. Allerdings ist der Code nicht sprechend; man erkennt nicht auf den ersten Blick, welche Elemente damit gestylt werden (`th` und `td`, was im Selektor gar nicht vorkommt). Ich würde dafür schreiben:
~~~css
.konto th,
.konto td
{
width: 30%;
}
.konto th:first-child,
.konto th:last-child,
.konto td:first-child,
.konto td:last-child
{
width: 20%;
}
~~~
Länger, aber selbsterklärend.
Zukünftig geht’s auch kürzer:
~~~css
.konto :matches(th, td)
{
width: 30%;
}
.konto :matches(th, td):matches(:first-child, :last-child)
{
width: 20%;
}
~~~
_The future is (almost) [now](http://caniuse.com/#feat=css-matches-pseudo)._{: lang="en"}
[Guckst du.](http://codepen.io/gunnarbittersmann/pen/zBbYzv?editors=0100) Dummerweise setzt weder Autoprefixer noch Prefixfree `:matches()` in `:-moz-any()` und `:-webkit-any()` um, so dass ich mich hier eines Sass-Mixins bedient habe, um nicht den Deklarationsblock duplizieren zu müssen.
**Nachtrag:** Ginge hier aber auch ohne Sass; `:matches()` macht sich ja besonders bei der zweiten Regel bezahlt. Und darin ist nur eine Deklaration. Guckst du [zweites Beispiel](http://codepen.io/gunnarbittersmann/pen/WxmNdP?editors=0100).
LLAP 🖖
--
_“The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.”_{: lang="en"} —Todd Motto
_[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): `sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|`_{: style="display: block; font-size: 0.875em; font-style: inherit; margin-top:1.5em"}
Tabellenbreite
bearbeitet von Gunnar Bittersmann@@MrMurphy1
> Richtig. Da war ich zu schnell. Also
>
> ~~~css
> .konto tr>:nth-child(1),
> .konto tr>:nth-child(4) {
> width:20%;
> }
> .konto tr>:nth-child(2),
> .konto tr>:nth-child(3) {
> width:30%;
> }
> ~~~
Kann man machen. Allerdings ist der Code nicht sprechend; man erkennt nicht auf den ersten Blick, welche Elemente damit gestylt werden (`th` und `td`). Ich würde dafür schreiben:
~~~css
.konto th,
.konto td
{
width: 30%;
}
.konto th:first-child,
.konto th:last-child,
.konto td:first-child,
.konto td:last-child
{
width: 20%;
}
~~~
Länger, aber selbsterklärend.
Zukünftig geht’s auch kürzer:
~~~css
.konto :matches(th, td)
{
width: 30%;
}
.konto :matches(th, td):matches(:first-child, :last-child)
{
width: 20%;
}
~~~
_The future is (almost) [now](http://caniuse.com/#feat=css-matches-pseudo)._{: lang="en"}
[Guckst du.](http://codepen.io/gunnarbittersmann/pen/zBbYzv?editors=0100) Dummerweise setzt weder Autoprefixer noch Prefixfree `:matches()` in `:-moz-any()` und `:-webkit-any()` um, so dass ich mich hier eines Sass-Mixins bedient habe, um nicht den Deklarationsblock duplizieren zu müssen.
**Nachtrag:** Ginge hier aber auch ohne Sass; `:matches()` macht sich ja besonders bei der zweiten Regel bezahlt. Und darin ist nur eine Deklaration. Guckst du [zweites Beispiel](http://codepen.io/gunnarbittersmann/pen/WxmNdP?editors=0100).
LLAP 🖖
--
_“The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.”_{: lang="en"} —Todd Motto
_[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): `sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|`_{: style="display: block; font-size: 0.875em; font-style: inherit; margin-top:1.5em"}
Tabellenbreite
bearbeitet von Gunnar Bittersmann@@MrMurphy1
> Richtig. Da war ich zu schnell. Also
>
> ~~~css
> .konto tr>:nth-child(1),
> .konto tr>:nth-child(4) {
> width:20%;
> }
> .konto tr>:nth-child(2),
> .konto tr>:nth-child(3) {
> width:30%;
> }
> ~~~
Kann man machen. Allerdings ist der Code nicht sprechend; man erkennt nicht auf den ersten Blick, welche Elemente damit gestylt werden (`th` und `td`). Ich würde dafür schreiben:
~~~css
.konto th,
.konto td
{
width: 30%;
}
.konto th:first-child,
.konto th:last-child,
.konto td:first-child,
.konto td:last-child
{
width: 20%;
}
~~~
Länger, aber selbsterklärend.
Zukünftig geht’s auch kürzer:
~~~css
.konto :matches(th, td)
{
width: 30%;
}
.konto :matches(th, td):matches(:first-child, :last-child)
{
width: 20%;
}
~~~
_The future is (almost) [now](http://caniuse.com/#feat=css-matches-pseudo)._{: lang="en"}
[Guckst du.](http://codepen.io/gunnarbittersmann/pen/zBbYzv?editors=0100) Dummerweise setzt weder Autoprefixer noch Prefixfree `:matches()` in `:-moz-any()` und `:-webkit-any()` um, so dass ich mich hier eines Sass-Mixins bedient habe, um nicht den Deklarationsblock duplizieren zu müssen.
**Nachtrag:** Geht hier aber auch ohne Sass; `:matches()` macht sich ja besonders bei der zweiten Regel bezahlt. Und darin ist nur eine Deklaration. Guckst du [zweites Beispiel](http://codepen.io/gunnarbittersmann/pen/WxmNdP?editors=0100).
LLAP 🖖
--
_“The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.”_{: lang="en"} —Todd Motto
_[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): `sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|`_{: style="display: block; font-size: 0.875em; font-style: inherit; margin-top:1.5em"}
Tabellenbreite
bearbeitet von Gunnar Bittersmann@@MrMurphy1
> Richtig. Da war ich zu schnell. Also
>
> ~~~css
> .konto tr>:nth-child(1),
> .konto tr>:nth-child(4) {
> width:20%;
> }
> .konto tr>:nth-child(2),
> .konto tr>:nth-child(3) {
> width:30%;
> }
> ~~~
Kann man machen. Allerdings ist der Code nicht sprechend; man erkennt nicht auf den ersten Blick, welche Elemente damit gestylt werden (`th` und `td`). Ich würde dafür schreiben:
~~~css
.konto th,
.konto td
{
width: 30%;
}
.konto th:first-child,
.konto th:last-child,
.konto td:first-child,
.konto td:last-child
{
width: 20%;
}
~~~
Länger, aber selbsterklärend.
Zukünftig geht’s auch kürzer:
~~~css
.konto :matches(th, td)
{
width: 30%;
}
.konto :matches(th, td):matches(:first-child, :last-child)
{
width: 20%;
}
~~~
_The future is (almost) [now](http://caniuse.com/#feat=css-matches-pseudo)._{: lang="en"}
[Guckst du.](http://codepen.io/gunnarbittersmann/pen/zBbYzv?editors=0100) Dummerweise setzt weder Autoprefixer noch Prefixfree `:matches()` in `:-moz-any()` und `:-webkit-any()` um, so dass ich mich hier eines Sass-Mixins bedient habe, um nicht den Deklarationsblock duplizieren zu müssen.
LLAP 🖖
--
_“The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.”_{: lang="en"} —Todd Motto
_[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): `sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|`_{: style="display: block; font-size: 0.875em; font-style: inherit; margin-top:1.5em"}
Tabellenbreite
bearbeitet von Gunnar Bittersmann@@MrMurphy1
> Richtig. Da war ich zu schnell. Also
>
> ~~~css
> .konto tr>:nth-child(1),
> .konto tr>:nth-child(4) {
> width:20%;
> }
> .konto tr>:nth-child(2),
> .konto tr>:nth-child(3) {
> width:30%;
> }
> ~~~
Kann man machen. Allerdings ist der Code nicht sprechend; man erkennt nicht auf den ersten Blick, welche Elemente (`th` und `td`) damit gestylt werden. Ich würde dafür schreiben:
~~~css
.konto th,
.konto td
{
width: 30%;
}
.konto th:first-child,
.konto th:last-child,
.konto td:first-child,
.konto td:last-child
{
width: 20%;
}
~~~
Länger, aber selbsterklärend.
Zukünftig geht’s auch kürzer:
~~~css
.konto :matches(th, td)
{
width: 30%;
}
.konto :matches(th, td):matches(:first-child, :last-child)
{
width: 20%;
}
~~~
_The future is (almost) [now](http://caniuse.com/#feat=css-matches-pseudo)._{: lang="en"}
[Guckst du.](http://codepen.io/gunnarbittersmann/pen/zBbYzv?editors=0100) Dummerweise setzt weder Autoprefixer noch Prefixfree `:matches()` in `:-moz-any()` und `:-webkit-any()` um, so dass ich mich hier eines Sass-Mixins bedient habe, um nicht den Deklarationsblock duplizieren zu müssen.
LLAP 🖖
--
_“The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.”_{: lang="en"} —Todd Motto
_[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): `sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|`_{: style="display: block; font-size: 0.875em; font-style: inherit; margin-top:1.5em"}