fix: warning of nth-child (apache#23638)

Author: justinpark

superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ReactParallelCoordinates.jsx

@@ -106,7 +106,7 @@ export default styled(ParallelCoordinates)`
       height: 18px;
       margin: 0px;
     }
-    .parcoords .row:nth-child(odd) {
+    .parcoords .row:nth-of-type(odd) {
       background: ${addAlpha(theme.colors.grayscale.dark2, 0.05)};
     }
     .parcoords .header {

superset-frontend/plugins/legacy-preset-chart-nvd3/src/ReactNVD3.jsx

@@ -152,7 +152,7 @@ export default styled(NVD3)`
       white-space: nowrap;
       font-weight: ${({ theme }) => theme.typography.weights.bold};
     }
-    tbody tr:not(.tooltip-header) td:nth-child(2) {
+    tbody tr:not(.tooltip-header) td:nth-of-type(2) {
       word-break: break-word;
     }
   }

superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx

@@ -44,7 +44,7 @@ const SaveDatasetActionButton = ({
       font-weight: ${theme.gridUnit * 150};
       background-color: ${theme.colors.primary.light4};
       color: ${theme.colors.primary.dark1};
-      &:nth-child(2) {
+      &:nth-of-type(2) {
         &:before,
         &:hover:before {
           border-left: 2px solid ${theme.colors.primary.dark2};

superset-frontend/src/components/ButtonGroup/index.tsx

@@ -30,18 +30,18 @@ export default function ButtonGroup(props: ButtonGroupProps) {
       role="group"
       className={className}
       css={{
-        '& :nth-child(1):not(:nth-last-child(1))': {
+        '& :nth-of-type(1):not(:nth-last-of-type(1))': {
           borderTopRightRadius: 0,
           borderBottomRightRadius: 0,
           borderRight: 0,
           marginLeft: 0,
         },
-        '& :not(:nth-child(1)):not(:nth-last-child(1))': {
+        '& :not(:nth-of-type(1)):not(:nth-last-of-type(1))': {
           borderRadius: 0,
           borderRight: 0,
           marginLeft: 0,
         },
-        '& :nth-last-child(1):not(:nth-child(1))': {
+        '& :nth-last-of-type(1):not(:nth-of-type(1))': {
           borderTopLeftRadius: 0,
           borderBottomLeftRadius: 0,
           marginLeft: 0,

superset-frontend/src/components/DropdownButton/index.tsx

@@ -42,7 +42,7 @@ const StyledDropdownButton = styled.div`
         background-color: ${({ theme }) => theme.colors.grayscale.light2};
         color: ${({ theme }) => theme.colors.grayscale.base};
       }
-      &:nth-child(2) {
+      &:nth-of-type(2) {
         margin: 0;
         border-radius: ${({ theme }) =>
           `0 ${theme.gridUnit}px ${theme.gridUnit}px 0`};

superset-frontend/src/components/DropdownSelectableIcon/index.tsx

@@ -46,7 +46,7 @@ const StyledDropdownButton = styled(
   button.ant-btn:first-of-type {
     display: none;
   }
-  > button.ant-btn:nth-child(2) {
+  > button.ant-btn:nth-of-type(2) {
     display: inline-flex;
     background-color: transparent !important;
     height: unset;