diff --git a/client/scss/components/forms/_title.scss b/client/scss/components/forms/_title.scss index 0d7c17428b..46a6d94962 100644 --- a/client/scss/components/forms/_title.scss +++ b/client/scss/components/forms/_title.scss @@ -1,10 +1,7 @@ // Styles for title fields throughout the page. // The `title` class is meant to be applied by end users throughout different forms APIs. -.w-panel.title, -.w-field.title { - input, - textarea, - .Draftail-Editor .public-DraftEditor-content { +:where(.w-panel, .w-field).title { + :where(input, textarea, .Draftail-Editor .public-DraftEditor-content) { @apply w-h2; color: theme('colors.text-context'); } @@ -12,8 +9,7 @@ // Styles for the title field when at the top of the page. // It’s the first panel when comments are disabled, second if enabled. -.w-panel.title:nth-child(1), -.w-panel.title:nth-child(2) { +.w-panel.title:nth-child(-n + 2) { .w-panel__header { @apply w-sr-only; @@ -32,9 +28,7 @@ order: 2; } - input, - textarea, - .Draftail-Editor .public-DraftEditor-content { + :is(input, textarea, .Draftail-Editor .public-DraftEditor-content) { @apply w-h1; color: theme('colors.text-context'); // Slightly out-dented so the field’s is horizontally aligned.